Why Web Accessibility and ADA Compliance Matter: Part 4 – Text Readability

This is a continuation of our blog series on ADA compliance and website accessibility, in our post on the how of accessibility we broke down the four ways you can have an impact on your association’s web presence no matter what platform you are using and in part four we are doing a deeper dive into Text Readability. 

Ensuring text readability on your website is crucial for accessibility and user experience. It involves making sure that all users, including those with visual impairments, can easily read and understand the text on your site. Here’s a detailed look at the key aspects of text readability: 

1. Text Resizing: 

• Scalable Text: Ensure that text on your website can be resized without breaking the layout or cutting off content. This helps users with visual impairments who need larger text to read comfortably. 

• Browser Zoom Compatibility: Make sure your website is fully functional and retains its usability when zoomed in up to 200%. This is a standard set by the WCAG (Web Content Accessibility Guidelines). 

2. Sufficient Contrast: 

• Color Contrast: Ensure that there is a strong contrast between text and background colors. The WCAG recommends a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt or larger, or 14pt bold or larger). 

• Testing Contrast: Use tools like the WCAG Color Contrast Checker Tool to test the color contrast on your site. These tools allow you to input text and background colors and provide you with the contrast ratio and whether it meets accessibility standards. 

• Avoiding Color Alone: Don’t rely solely on color to convey information. For instance, if you’re using red text to indicate an error, also include an icon or text label (like “Error”) to ensure that colorblind users can understand the message. 

3. Font Selection and Size: 

• Readable Fonts: Choose fonts that are easy to read, avoiding overly decorative or script fonts. Sans-serif fonts like Arial, Helvetica, or Verdana are generally more readable on screens than serif fonts. 

• Font Size: Ensure that the default font size is large enough for comfortable reading. Typically, 16px is considered a good starting point for body text, but allowing users to resize text is essential. 

• Line Spacing: Use appropriate line height (leading) to make text easier to read. A line height of 1.5 times the font size is often recommended. 

4. Clear and Concise Language: 

• Plain Language: Use clear and straightforward language, avoiding jargon and complex sentences. This improves readability for everyone, including users with cognitive impairments. 

• Headings and Subheadings: Organize content with clear headings and subheadings to break up text and make it easier to scan. Headings should follow a logical structure (e.g., using h1 for the main title, h2 for sections, and so on). 

5. Text Alignment and Spacing: 

• Left-Aligned Text: For most languages, left-aligned text is easier to read than centered or justified text. Left-aligned text creates a consistent starting point for each line, reducing eye strain. 

• Avoiding Justified Text: Justified text can create uneven spaces between words (known as “rivers”), which can be difficult for some users to read. Left-aligned text is generally more accessible. 

• Paragraph Spacing: Ensure there is adequate space between paragraphs to separate ideas visually and make the content easier to digest. 

6. Responsive Typography: 

• Adapting to Different Devices: Ensure that text is readable across all devices, including smartphones, tablets, and desktops. Responsive design should adjust font sizes, line spacing, and layout to maintain readability on different screen sizes. 

• Mobile Testing Tools: You can use the first step in this guide from BrowserStack to test your website on mobile, or sign up for BrowserStack to do further testing. 

7. Testing Readability: 

• User Testing: Conduct usability testing with real users, including those with visual impairments or other disabilities, to assess text readability. Gather feedback on font sizes, contrast, and overall readability. 

• Automated Tools: Use tools like WAVE or Lighthouse to assess your website’s text readability and identify any potential issues with contrast, font size, or text scaling. 

By focusing on these aspects, you can ensure that the text on your website is readable by a wide range of users, improving accessibility and user satisfaction. If you are looking for a supportive partner in your associations’ accessibility journey, contact AMR today!