Support scanning and understanding

Structure the page content and presentation to support scanning. Make the substance and purpose of the content and functionality readily apparent, and help people quickly find the information they are seeking. Pay close attention to the sequence of your content. People who use screen reader software will benefit from content that makes sense when read linearly.

Structure the page for scanning and logical sequence:

  • Avoid extended blocks of unbroken text. Use headings and lists to break up content into chunks that are easy to scan. Headings and chunked content allow people to find what they are seeking without requiring them to read through content that is irrelevant.
  • Write descriptive headings and labels. Clear headings and labels are essential in communicating the structure and relationships of page content and functionality.
  • Pay attention to content sequence. Ensure that the order of the content follows a logical sequence.

Testing

  • View pages with stylesheets turned off to review the content without layout and design (see Tools for example of tools to help you do this). Or listen to the page being read out by a screen reader. Is the content broken up with headings and lists? Does the content sequence make logical sense?

Resources

✎ Technique: Writing headings

The most important part of any page is its content, which is made up of paragraph text and sometimes supplementary media like images or video. Headings are used to group and label sections of content, giving visual structure to the page and providing a means of navigation to screen-reader users.

Examples

Think of headings as labels that identify the content that follows. Like the text you put in links, heading text should be descriptive and make sense out of context. This is because JAWS, NVDA, and other screen reader users can use their screen reader's functions to access a collated list of headings on the page and jump directly to a selected heading. For example, in JAWS, this is possible by pressing INSERT + F6.

Bad example

Imagine you have a page with two headings for two confectionery products you sell. You should avoid cryptic whimsical headings like the following, because they offer no information about the content and mean nothing when decontextualized.


<h2>Yum yum!</h2>
<p><!-- description of first chocolate product --></p>
<h2>Yes please!</h2>
<p><!-- description of second chocolate product --></p>

Good example

In this modified example, we've kept the whimsy but provided helpful descriptions as well:


<h2>Yum yum! Dark chocolate brownies</h2>
<p><!-- description of first chocolate product --></p>
<h2>Yes please! Green candy floss</h2>
<p><!-- description of second chocolate product --></p>

Video: The NVDA heading elements list