Headings

Problem

  • 64% of screen reader users use headings to navigate the page, whereas only 8.5% read through the page.
  • If headings are not included in the page, users are forced to listen to the entire contents of the page.

Tips for Creating Better Headings

The following guidelines should be borne in mind when adding headings to web pages:

  • Headings should be short and concise
  • Headings should only be used when followed by content
  • By reading the headings alone users should get a good idea of the page contents
  • Headings should be mainly used for page specific content, rather than content which appears on every page
  • Heading tags should not be used to change font size or add emphasis.
  • Appearance and presentation of text should be controlled via CSS rather than heading tags
  • Heading levels can't be skipped i.e. you can't jump from <h1> to <h3>
  • The contents of <h1> tag is of moderate importance to search engines
  • Keywords in <h2> - <h6> tags are of low importance to search engines, but are of key importance to screen reader users
  • Identification of structural elements of web pages, such as banners, menus and footers, are best achieved via the use of WAI-ARIA Landmarks

Testing Method

3 minute introduction to HeadingsMap

Practice Exercise

  1. Examine the headings on this page
  2. Use HeadingsMap to check the headings
  3. Use the code editor to fix the headings

Sample

  • Incorrect code
  • <p><b>Application Form</b></p>
  • Correct code
  • <h2>Application Form</h2>

WCAG Success Criteria

WCAG Sufficient Techniques