Accessibility Tips

Techniques for improving web site accessibility.

Headings

Problem

• 57% 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

• 1.3.1 Info and Relationships

WCAG Sufficient Techniques

• H42: Using h1-h6 to identify headings

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

Examples

• This page does not contain any headings

Practice Exercise

• Use Firebug to convert one of the bold tags into a heading tag on this page. Then try testing the page outline again using the WAVE toolbar. Can you see a difference?

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

Help

For assistance please contact Andrew Normand, Web Accessibility Program Leader
Email: anormand@unimelb.edu.au
Phone: +61 3 9035 4867