Headings & Page Structure

Individuals who are blind or visually impaired often choose to browse content by headings with a screen reader. This provides an efficient way to scan a page and determine what is most important.

Best practices

• Follow a logical outline in organizing the content on your page and use heading levels to differentiate the main points and subpoints of your material. H1 should be reserved for the page title and H2 to H6 should be arranged hierarchically without skipping heading levels. Choose headings based on the appropriate level, not because of how they look.
• Avoid using bold or underlined text instead of a heading style.  Assistive devices don’t recognize bold text as a heading. Underlined text may be confused with links.
• Avoid using all capital letters as headings. Screen readers associate strings of capital letters as acronyms. This means they read them out letter by letter instead of reading them as a word.  
• Don’t use empty headings ( <H3></H3>) for spacing or formatting.

Page titles

Page titles should be descriptive and should make the page purpose and content clear. 

The non-descriptive page title does not give users any information about the content they are about to view. “About” is vague and could refer to many different topics. 

List styles

Use bulleted (unordered) or numbered (ordered) list styles when creating lists. Using HTML list structures (<ul>, <ol>, ,<li>) allows screen readers to understand content structure and hierarchical organization.

Manually added numbers or asterisks as a list of content will not be recognized by screen readers.

Reference: 1.3.1 Info and Relationships, 2.4.1 Bypass blocks