Close

Applying Accessible Styles to Text

Using text styles such as bolding, italics, underlining, and others may be desired for various reasons and the key is to use them purposefully. We will explore the best ways that you can use these features for your audience.

Empathizing with Users

As noted previously, dyslexia affects between 5% and 10% of the population and the majority of older adults experience increased vision issues(Patel & West, 2007; Siegel, 2006).

Defining the Problem

Selecting an appropriate font is not the only consideration when designing accessible content. When building text-based content, there are common style features that are commonly used for a variety of reasons.

The Adobe Blog (2017) lists five issues that can impact a user’s experience when accessing text as follows:

  • Familiarity, or the user’s expectations of what a style indicates
  • Visual cues, or indicators that can easily be recognized
  • Accessibility, or the opportunity to provide multiple methods of signaling importance
  • Aesthetics, or the visual appeal of the design, and
  • Readability, or how easily a user can read a comprehend the text.

Design choices may result in positive or negative effects in any of these areas. Using text styles such as bolding, italics, underlining, and others may be desired for various reasons and the key is to use them purposefully. We will explore the best ways that you can use these features for your audience.

Bolding

According to the British Dyslexia Association Dyslexia Style Guide, bolding text is actually a really great way to provide a readable visual cue. It is recommended for use with headings and key text, but with restraint (BDA, 2018; Bear, 2018). Educationally, I always recommend that designers follow suit with textbook conventions by reserving bold text for key terms and headings. People are familiar with bold text indicating critical information, and misusing this formatting style can create confusion about which content is actually important.

Italics

Italics are actually really difficult to read for people with dyslexia and its use is not recommended (BDA, 2018). While italics decrease readability, there may instances when their use is necessary. For example, italics are commonly used in biological binomial nomenclature and to identify terms in another language. In order to maintain style consistency with this usage, I recommend using italics for these types of instances since they are familiar. However, italics should otherwise be avoided and especially not used for large amounts of text. There may be instances when historical or official documents use highly italicized fonts. While there is historical merit for including these examples, a non-italicized version should also be provided to ensure that all readers can access the content.

Underlining

When drawing attention to text, one of the most frequently used styles has been underlining. This style is extremely effective in drawing a reader’s eye to information, however, it can impact readability and distractibility (Obendorf & Weinreich, 2003). While underlining indicates emphasis in printed text, readers expect hyperlinks when they see underlined text online. Based on these considerations, I recommend limiting the use of underlining for necessary links since the online user experience is based on this familiarity.

Recommendations for Design

As designers, it is critical that we balance the needs of all users with our design choices. When making choices to emphasize text using styling features, you can follow these guidelines:

  • Bolding is preferred and should be reserved only for key information,
  • Italics should be used minimally and only for information stylistically denoted through the use of this style, and
  • Underlining may reduce readability if used excessively and should be balanced against the reader expectation for a hyperlink.

References

 

Babich, N. (2017). How to use underline text to improve UX. Retrieved from https://theblog.adobe.com/use-underline-text-improve-ux

Bear, J. H. (2018). A guide to using bold fonts effectively in page layout. Retrieved from https://www.lifewire.com/how-to-use-bold-type-effectively-1074100

British Dyslexia Association. (2018). Dyslexia style guide 2018: Creating dyslexia friendly Content. Retrieved from https://www.bdadyslexia.org.uk/employer/dyslexia-style-guide-2018-creating-dyslexia-friendly-content

Evett, L., & Brown, D. (2005). Text formats and web design for visually impaired and dyslexic readers—Clear text for all. Interacting with Computers, 17(4), 453–472. http://doi.org/10.1016/j.intcom.2005.04.001

Internet Society. (2017). 2017 Internet Society global internet report: Paths to our digital future. Retrieved from https://future.internetsociety.org/wp-content/uploads/2017/09/2017-Internet-Society-Global-Internet-Report-Paths-to-Our-Digital-Future.pdf

Obendorf, H., & Weinreich, H. (2003). Comparing link marker visualization techniques: Changes in reading behavior. In Proceedings of the 12th international conference on World Wide Web (pp. 736–745). http://doi.org/10.1145/775152.775255

Patel, I., & West, S. K. (2007). Presbyopia: Prevalence, impact, and interventions. Community Eye Health, 20(63), 40–41. Retrieved 10 February 2018, from https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2040246

Siegel, L. S. (2006). Perspectives on dyslexia. Paediatrics & Child Health, 11(9), 581–587. Retrieved 10 February 2018, from https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2528651

The Texas Governor’s Committee on People with Disabilities. (n.d.). Making documents accessible. Retrieved from https://gov.texas.gov/uploads/files/organization/disabilities/making_documents_accessible.pdf

Accessibility Considerations for Choosing Fonts

One of the challenges in designing content is the constant struggle between aesthetics and accessibility. Something as simple as choosing a font can illustrate the practice of being intentional about inclusivity within the design process.

Accessible design is not something happens intuitively, it is an intentional practice that becomes a habit through practice. One of the challenges in designing content is the constant struggle between aesthetics and accessibility. Something as simple as choosing a font can illustrate the practice of being intentional about inclusivity within the design process.

Empathizing with Users

Accounting for the potential needs of users is the first step in making accessibility decisions. In the case of font selection, it is important to consider potential barriers that people with dyslexia or vision issues may face. Estimates for the prevalence of dyslexia range between 5% and 10% of the population, although these figures vary depending on the definition used (Siegel, 2006). About 60% of people aged 40 or more deal with difficulty reading text up close, and the incidence increases with age (Patel & West, 2007). These numbers are already significant, and a host of other vision or visual processing issues have not even been accounted.

Defining the Problem

When selecting a font, an examination of four font letter features is really important.

  • Does the font have good ascenders and descenders?
  • Is the font a serif or sans serif?
  • Are the letters I, i, L, l, n, m, p, q, d, b, u, v, w and 1 distinguishable from one another?
  • If applicable, is the font appropriate for young users still learning to print or read?

Ascenders and Descenders

Two fonts of lowercase letters a, b, c, d, e, f, and g are shown. Both rows have a red line at the base height of the letter and a blue line at the bottom of the letter. Ascenders rise above the red line and descenders are below the blue line. The top row shows an example of a font with good ascenders and descenders, while the bottom is a poor example.

The red line indicates the top of the letter base height, while the blue line indicates the bottom. Ascenders are above the red line and descender fall below the blue line. 

Ascenders and descenders can help with readability because they can help a reader distinguish different letters from one another. A lowercase letter has a base height determined by letters such as x, v, c, or w. As depicted in the image below, an ascender is any part of a lowercase letter that rises above that height indicated by the red line. Also depicted below, a descender is any part of a lowercase letter that falls below the base indicated by the blue line. According the British Dyslexia Association (BDA) (2015), typefaces with more-easily distinguished ascenders and descenders are preferred. The bottom row demonstrates a font with short or poor ascenders and descenders.

The top row of letters are the lowercase letters a, b, c, d, e, f, and g in a sans serif font. The bottom row of letters are the lowercase letters a, b, c, d, e, f, and g in a serif font with the serifs at the ends of the letters a, b, d, f, and g circled in red.

The top row is a san serif font and the bottom row shows a serif font with the extra lines circled in red.

Sans Serif and Serif Fonts

Fonts are also classified by whether or not they possess serifs, which are basically lines attached to the ends of letters. While there is a lot conflicting research currently on the “best” font, san serif fonts are typically recommended (BDA, 2015). In the image below, the top row depicts a sans serif font and the bottom row shows a serif font. The serifs are circled in red.

 

Distinguishing Letters

One of the biggest issues with readability for all users, are fonts that have letters that can be easily confused for one another. For users who already face barriers in reading text, this type of letter confusion just adds one more layer of frustration. To make sure this is not the case, you can easily ensure that your font is easy to read by ensuring that the number 1 and letters i, l, n, m, p, q, d, b, u, v, and w are distinguishable from one another. The most common issue arises from the upper- and lowercase letter i and l being similar to each other. The image below depicts how these letters look in different fonts. Red letters indicate potential readability issues.

The letters I, i, L, l, n, m, p, q, d, b, u, v, w and the number 1 are shown in five different rows. The top row uses the font verdana, followed by arial narrow, times, nunito, and permanent marker. The row with arial narrow and nunito highlights the capital letter I with the lower case l to show they look the same. Permanent marker highlights the similarity between the number 1 and lowercase i and the capital and lowercase letter l.

Letter distinguishability is shown for different fonts. Letters that could cause readability issues are in red.

Appropriate Fonts for Young Users

When designing content for users, it is also important to take into account the age or developmental stage of materials, especially for young users. When young children are learning to read and write they are exposed to letters similar to handwritten print. It is important to keep in mind that young users are still learning to associate the symbol of the letter with the concept of the letter. Most fonts depict the letters a and g in a format with which they are likely not familiar. Other fonts that use a cursive style may also depict letters such as S, Q, F, G, I, J, L, T, and Y in unfamiliar ways. The image below shows how these letters look compared to Comic Sans which depicts the letter forms young users recognize. Red letters are potentially unrecognizable for very young users.

Five rows of the letters a, g, S, Q, F, G, I, J, L, T, and Y in the font comic sans in the top row. Followed by depictions in the fonts verdana, times, tangerine, and pinyon script. Letters that differ from printed handwriting are shown in red.

Comic sans is an example of a font that is readable by young users who are learning to read and print. Red letters indicate potential letters that young users may not recognize.

The Font Selection

While it would be nice to be able to conclusively say that everyone should use a particular set of fonts, the research does not provide a conclusive answer and there are many variables to consider. While the basic font considerations have been addressed, font accessibility is also impacted by font size, color, and style. However, examining the above features in your font will guide any content developer towards making an accessible font choice. I strongly recommend reading more about fonts by checking out the British Dyslexia Association, WebAIM.org, and in the other references listed below.


Note: Personally, I feel it is important to find research to inform the design thinking process and decisions. As such, I have cited my sources and included a full reference list. It is not uncommon to find conflicting studies and as an educator and accessibility advocate it is important to acknowledge these sources as the body of knowledge is always growing and revealing new insights.

References

British Dyslexia Association New Technologies Committee. (2015) Typefaces for dyslexia. Retrieved 10 February 2018, from https://bdatech.org/what-technology/typefaces-for-dyslexia

Font Face. (2015). Accessibility at Penn State. Retrieved 5 April 2017, from http://accessibility.psu.edu/legibility/fontface

Marshall, A. (2013). Good Fonts for Dyslexia – An Experimental Study. Dyslexia the Gift Blog. Retrieved 5 April 2017, from https://blog.dyslexia.com/good-fonts-for-dyslexia-an-experimental-study

Patel, I., & West, S. K. (2007). Presbyopia: Prevalence, impact, and interventions. Community Eye Health, 20(63), 40–41. Retrieved 10 February 2018, from https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2040246

Rello, L., and Baeza-Yates, R. (2013). Good fonts for dyslexia. Assets. Retrieved 5 April 2017, from http://dyslexiahelp.umich.edu/sites/default/files/good_fonts_for_dyslexia_study.pdf

Siegel, L. S. (2006). Perspectives on dyslexia. Paediatrics & Child Health, 11(9), 581–587. Retrieved 10 February 2018, from https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2528651

Typefaces for Dyslexia. (2018). Dyslexic.com. Retrieved 5 April 2017, from https://www.dyslexic.com/fonts

Velarde, Orana. (2017). A Visual Guide to the Anatomy of Typography [Infographic]. Visual Learning Center by Visme. Retrieved 10 February 2018, from http://blog.visme.co/type-anatomy

WebAIM: Fonts. (2013). Webaim.org. Retrieved 10 February 2018, from https://webaim.org/techniques/fonts

What’s the best font for dyslexia? (2017). Touch-type Read and Spell (TTRS) Blog. Retrieved 10 February 2018, from http://www.readandspell.com/us/best-font-for-dyslexia

 

Accessibility is a Result of Good Design

If student-centered instruction is the goal, then accessible instruction is a natural outcome of the design process.

Design is a really popular buzzword right now. There is instructional design, design thinking, and universal design. While each of these ideas is nuanced, they all share some common features which are relevant to an accessible learner experience.

If instruction is truly to be student-centered, then the accessible design of instruction is a natural outcome of the design process. In other words, accessibility is a result of good design.

Let’s start with instructional design which is also sometimes called instructional systems design. These terms refer to a plethora of models that describe the process of creating effective instruction. These include many models such as the following:

  • ADDIE (Analyze, Design, Develop, Implement and Evaluate)
  • Dick, Carey, & Carey model
  • R2D2 (Recursive and Reflective, Design and Development)
  • McTighe and Wiggins Understanding By Design (also referred to as backward design)

While there are much more this list represents a sampling of models that most people may be familiar with. Each approach tackles the process of instructional development similarly, and they all share some common features even if slightly different language is used. Specifically, they include the following components:

  • Assessing instructional need
  • Determining instructional practice such as appropriate objectives, assessments, and instructional strategies and materials
  • Evaluating and revising of instructional practices

Design thinking is also a process that can be used to problem solve in all settings but can also be applied to instruction. This model consists of the following:

  • Empathizing with and learning about the user
  • Defining the instructional need, if any
  • Brainstorming ideas to address this need
  • Creating a prototype
  • Testing the design and materials to collect feedback
  • Implementing the design

Universal design is not a process, but more of a concept that promotes inclusive design in all areas. The idea is that products, experiences, and environments should be developed in such a way that all people can access them. Educationally, this concept can include instructional experiences that are accessible to all learners of all ability levels.

While all three design approaches merit a deeper analysis on their impact within an educational context, it is important to begin with a general foundation that addresses how accessibility is relevant. First, instructional design and design thinking both begin with an assessment. These assessments strive to ensure the design process takes into account the needs of the learner. Second, these approaches also address the development of instruction. Universal design is relevant to both in that it is a philosophy in which your design as many potential needs of any learner.

It follows that accessibility must be considered during the analysis of learner needs, which includes researching any potential barriers users may face when accessing instruction. These barriers may be emotional, motivational, physical, or any other factor that can affect a learner’s ability to access instruction. By empathizing with learners and striving to design universally, addressing accessibility becomes integral to the process of designing effective instruction.

If the instruction is truly student-centered, then the accessible design of instruction is a natural outcome. Current accessibility standards address the specific barriers that learners may face in accessing instructional components such as web interfaces, media, text, and many more. By ensuring these standards are met, instruction will naturally be inclusive, empathetic, and more likely to be effective.

The next blog posts will begin addressing the simple practices that can be implemented to start moving toward a habit of accessible design.

Accessible Design Thinking

This blog is about the integration of accessibility, instructional design, and design thinking in an easy-to-use manner. Learn more about accessible design thinking.

A logo made from the letters a, d, and t

This blog is a passion project for me. For the last few years, I have been working to create instructional experiences that are meaningful and accessible for all users. Accessible instructional design is extremely relevant due to the fact that many learning opportunities are occurring in digital environments.

Designing accessible instruction is part of good universal design and integral in meeting 508 compliance guidelines. While educators are often prepared in cultivating lessons and the art of teaching, current educator preparation programs have not begun to address the increasing role of online instruction. As a result, instructional design is increasingly becoming an important aspect of educators’ job descriptions without the benefit of appropriate preparation. Without preparation, it can be difficult for educators to maximize the potential of online and blended learning environments.

Accessibility is coming to the fore in many areas. However, a quick review of online resources regarding accessibility guidelines for online content makes it clear that this information is geared for programmers. This can make information for best practices out of reach to anyone who does not have some knowledge of programming or coding. One of the goals of this blog to make accessibility considerations approachable and easy to implement for the lay user.

Finally, I strongly believe that design thinking is integral to this process. Design thinking is part of instructional systems design and includes several important elements. These include the following:

  • Empathizing with and learning about the user
  • Defining the instructional need, if any
  • Brainstorming ideas to address this need
  • Creating a prototype
  • Testing the design and materials to collect feedback
  • Implementing the design

While many naturally incorporate many of these elements, it is important to ensure this process is understood and undertaken when launching new initiatives, especially instructional ones.

As stated earlier, I hope to make this blog a place to make accessibility easy to understand and implement. I also want to address elements of instructional design and design thinking that are related, not only to accessibility but also effective online and blended instruction. Although my main audience is educators, I am positive that the information contained in this blog will be helpful to any user.

Welcome to Accessible Design Thinking!