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.

Sample

  • Incorrect code

    <b>WCAG Success Criteria</b>
  • Correct code

    <h3>WCAG Success Criteria</h3>

WCAG Success Criteria

WCAG Sufficient Techniques

Testing Method

  • Install the WAVE toolbar for Firefox
  • Open Firefox
  • On the WAVE toolbar, click on 'Outline'
  • This will perform a quick accessibility check of the page. Problems are highlighted in red. Things needing manual checking are shown as a question mark list of page headings <h1> - <h6> will be displayed.
  • Is there a list of headings for the page?
  • Is the list of headings an accurate reflection of the page contents?
  • Tip: Click on 'Reset Page' to remove the errors and alerts
  • Tip: Try making changes to the code with Firebug and then retesting the page

Practice Exercise 1

  • What should be the headings for the page that you are currently viewing?
  • What headings are used? Check using the WAVE toolbar by clicking on 'Outline'.
  • Tip: Click on 'Reset Page' to restore the usual appearance of the page

Practice Exercise 2

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

Contact Us

For assistance or to report accessibility problems please contact:

Andrew Normand
Web Accessibility Lead
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867