scriptingenabed

 

Skim headings

Page history last edited by alastc 1 yr ago

Summary

When using a screen reader, it is possible to skip to each heading in turn, effectively skimming a page. This strategy relies on there being headings defined in the source code.

 

Example

The BBC homepage has a good heading structure, the image below highlights the top few headings in the page.

Screen shot highlighting the headings on the BBC homepage.

Using the Firefox Web developers toolbar you can see the heading structure in the page by using the Information > View Document Outline option:

  1. H1: British Broadcasting Corporation (wrapped around the logo)
    1. H2: BBC Search
    2. H2: Customise Your Homepage
    3. H2: News
      1. H3: Top Stories
      2. H3: More Top Stories
      3. H3: Local news

 

NB: There are some headings that are hidden, for the benefit of screen readers and other assistive or mobile technologies.

 

Design implications

Primarily, this strategy can be supported by well structured HTML:

 

  • Headings need to be marked up correctly in the code.
  • The headings order and depth should make sense when reading just the headings.
  • Since headings designate sections and sub-sections, make sure you descend one at a time.  

 

Supporting Guidelines

The Web Content Accessibility Guidelines (version 2) cover this under 1.3.1 Info and Relationships.

The advice they give is using h1-h6 to identify headings.

 

Technology Specifics

In Jaws, the h key skips between headings, and each heading is announced with the text, followed by "heading level x".

Voiceover can skip headings with VO and h, it announces "Heading level x" followed by the heading text.

 

Comments (0)

You don't have permission to comment on this page.