Skip to Main Content

Creating Accessible Learning: Readability

Text Formatting & Language

"Readability" is the impact of language, formatting, and design on the user's ability to take in and understand content. 

Text Formatting

Too much text formatting (e.g., colors, different/hard to read fonts, text styles, slim spacing, etc.) can lead to poor readability. The provided LibGuides template uses fonts and formatting that are already preformatted for accessible readability. Stick to the template to ensure text readability! 

If copy/pasting text from another location, maintain the template style text formatting by pasting it as plain text using the following keyboard commands: 

  • In Chrome, Edge, or Firefox: (Windows) ctrl + shift + v or (Mac) cmd + shift + v
  • Safari: cmd + optionshift + v

Additional Formatting Best Practices

  • Use text styling sparingly: Too much text styling--such as bold, italics, and underline--can visually or semantically overwhelm your reader. Try to save text styling for text you need to emphasize, and use underlining for hyperlinked text only.
  • Left align text: This makes it easier to read and track. 
  • Avoid all caps: When possible, avoid using all caps as it’s more difficult to decipher. 
  • Create space: Create visual and semantic space between content. E.g., via paragraphs, using the "Insert Horizontal Line" formatting option, or adding new content boxes. For new paragraphs, use only one "Enter" (Windows) or "Return" (Mac) space between paragraphs.
  • Use text instead of images of text: Images of text require alt text, so use actual text whenever you can. 

Language & Reading Level

Keep content simple and concise, avoiding jargon and overly complex phrasing when possible. You can use generative AI tools to help edit your content for clarity! 

Hyperlinks

Accessible hyperlinks are essential for ensuring that all users, and especially those using assistive technologies, can understand and navigate web content effectively. Accessible hyperlinks are appropriately descriptive, match the info you're linking to, and can be differentiated by something other than color alone. 

  • Descriptive: The hyperlinked text should be concise but descriptive enough so that the purpose of the link can be determined from the linked text alone. A good design practice is matching or using similar text to the title of the hyperlinked page. 
  • Place link after context: If a link falls within a sentence, place the additional link context before the hyperlinked text if possible. This assists screen readers who will encounter content linearly and would have to continue past the link to hear more about it and then go backward to click on the link.
  • Differentiate links: Differentiate linked text from non-linked text in some way other than just color alone, as those with vision disabilities may have difficulty distinguishing between colors. Using the "Link" formatting option will automatically enable this in our LibGuide template. 

Design best practice: Whenever possible, use the "Link" asset option to add hyperlinks so you can reuse them and automate checking for broken links. 

Link Practices to Avoid

  • Vague linked text: Just say no to "click here!" Screen reader users rely on link descriptions to know what they're clicking on. 
  • Whole links: In most instances, avoid pasting a whole link since a screen reader user would have to hear each letter, symbol, and number read out. 
  • Using "link" in the hyperlinked text: Adding the word “link” to your hyperlinked text is redundant. Screen reader tools verbally identify linked text for users by adding the word “link."
  • Unnecessary link repeats: Having multiple, repeated links to the same thing on the same page can potentially cause frustration or confusion for screen reader users. 

The hyperlinked text, "Click here!" is behind a red circle with a line through it to show that you should not do that.

For more info about accessible hyperlinks, visit: 

Color & Color Contrast

Accessible color use ensures that visual information is perceivable by all users, including those with visual impairments. Two main accessible color considerations are:

  • Good color contrast, or ensuring that background and foreground color combinations have high enough contrast for people to perceive it, and
  • Using something other than color alone to communicate information visually

Color Contrast

The stock LibGuide template font color is already accessible, so sticking to the template is safest. Accessible color contrast is a ratio that can be calculated, so if you choose to use any other colors, always use a color contrast checking tool to check the contrast ratio, such as WebAIM's Contract Checker

Using Color to Convey Information

Using color as the only way to visually communicate important information–such as in charts and graphs or color-coding info–excludes users with visual disabilities from being able to accurately perceive the content. If you use color to convey information, be sure to also use another stylistic mechanism to differentiate. Some examples include combining color with: 

  • Labels or text descriptions
  • Patterns
  • Symbols 

Two of the same pie charts are side-by-side. Each chart has a key at the bottom to differentiate colors as well as text labels affixed to each pie chunk to assist with identification. The second chart shows how the colors would look to someone with protanopia, illustrating the importance of text labels when using color to provide info.