Legibility

Overview

Using ADA-compliant fonts ensures that your content is easier to read, site navigation is convenient, and that assistive technology such as screen readers functions as it should.

The wrong fonts don’t just affect those living with disabilities either; even those with learning difficulties such as dyslexia struggle with certain text. The Americans with Disabilities Act, and many other disability acts across the globe, aim to remove the online barriers countless people encounter daily due to a certain type of disability.

On our site, all the headings have been predefined by color and size, following the compliant heading order. Furthermore, most of our blocks have also been assigned to an H2 heading style to maintain accessibility, except blocks three, four, and five.

We can achieve accessibility in two ways:

1. In a single text editor, you can reorganize the headings from the text format dropdown.
2. If using block sections, you can add a block two with a heading style and fill in the title section. This will automatically assign this header to an H2 tag. Consequently, you can add a block three with heading style (H3),  if needed, but not a block four (H4) to avoid breaking the descending heading order. To view a full example, feel free to review the web style guide.

Headings should form an outline of the page content (Heading 1 for the main heading, Heading 2 for the first level of sub-headings, etc.). This enables screen reader users to understand how the page is organized. If the heading structure skips or reverses heading levels, this breaks the page outline. Screen readers also have features that enable users to jump quickly between headings with a single keystroke. This functionality makes it possible for screen reader users to navigate within a page with the same efficiency as sighted users.

What to check for?

• Ensure there is only one H1 Heading tag on your page, especially after copying text into the webpage.
• Verify that the headings are ordered from H2 to H6, with no skipping levels.
• Don’t choose based on style: Use headings for their intended purpose, not just for how they look. Don’t use <h2> because you like the size; use it because it’s the right level in the hierarchy.
• Heading elements only for headings: Don’t style regular text as a heading. This confuses both users and search engines.
• Don’t use all caps in headings: Text in all capitals is harder to read, particularly for people with dyslexia. Instead, use title case (Capitalising Most Words) or sentence case (Capitalising the first word) to improve readability.

Benefits

• Descriptive headings are especially helpful for users who have disabilities that make reading slow, and for people with limited short-term memory. These people benefit when section titles make it possible to predict what each section contains.
• When headings and labels are also correctly marked up and identified in accordance with 1.3.1 Info and Relationships, this success criterion helps people who use screen readers by ensuring that labels and headings are clearer when presented in a different format — for example, in an automatically generated list of headings, a table of contents, or when jumping from heading to heading within a page.