Headings & Page Structure

Headings

Individuals who are blind or visually impaired often choose to browse a webpage by headings. This gives them a good idea of what is on the page and of what material on the page is most important. It is a far quicker process than reading a page line by line or even link by link. Individuals who can only use the keyboard for navigation can browse a webpage much faster if the page contains proper headings.

  • 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 is used as the page title and H2 to H4 should be arranged hierarchically without skipping heading levels. Choose headings based on the appropriate level, not because of how they look.
     

  • Don't use 'bold' instead of a heading.  Assistive devices don't recognize bold text as a heading. For example, if you use bold instead of a heading, a person using a screen reader won't be able to scan the page because the reader won't recognize the bold text as being headings.  
     
  • Don't underline text instead of making it a heading. The only time text should be underlined is if it is a link. If you underline text to emphasize it, it can cause confusion with users because the expected behavior of underlined text is for it to link to another page.
     
  • Don't use 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 sentence.  If it is appropriate to the site design for a section to display in all caps, that is something that the developer will build into the site.
     
  • Don't use large blocks of text. If you have a lot of large blocks of text on your site, consider breaking it up into smaller sections and adding appropriate headers.  Readers online tend to scan text more quickly than when reading a printed page, so dividing up large chunks of text can also help direct reader flow.

 

Proper Heading Structure

This is Your Main Heading (heading 2)

First Section Heading (heading 3)

  • sub heading (heading 4)
  • sub heading (heading 4)
  • sub heading (heading 4)

Second Section Heading (heading 3)

  • second sub heading (heading 4)
  • second sub heading (heading 4)
  • second sub heading (heading 4)

Page Titles

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

Correct: "About our Department's History"
Incorrect: "About"

The non-descriptive page title does not give users any information about the content of the page. "About" is vague and could refer to many different topics. 

List Styles

Use bulleted or numbered list styles to denote list structure. This also ensures consistent formatting and helps screen readers understand content structure and organization. Formatting lists provide screen readers with this information and helps visually impaired users navigate through your content more quickly. In order for a screen reader to recognize your list, you need to use the bullet points and numbers provided in your website's WYSIWYG. They will not recognize manually added numbers or asterisks as a list of content. 

Correct:

  • First Item
  • Second Item
  • Third Item

Incorrect:

* First Item
* Second Item
* Third Item