Header Tags

Accessibility Requirement #1
Last Updated: January 5, 2007
Author: Donald F. Evans

Table of Contents

  1. Priority
  2. Description
  3. More Info
  4. Coding/Best Practices
  5. Testing/QA
  6. Search Engine Optimization (SEO)
  7. W3C Guidelines

Priority:

Required


Short Discription:

Every page MUST include HTML Header tags (<h1>, <h2> etc) to enable efficient navigation to the main areas of content.


More Info:

HTML H tags are an integral component to enable people who are blind or visually impaired to quickly skim, and navigate to the most important content on your page. Without H tags, the screen reader user is forced to review the page linearly by pressing the up/down arrow keys to read each line, or tab between links to find desired content. This can be a laborious process, particularly on AOL pages that contain a large amount of navigation in addition to the page-specific content.

With properly placed HTML H tags on the page, the screen reader user can easily use his/her H key to move from one content title/area to the next.

Imagine you are looking at a page of news articles. As a sighted person, you can easily scan the page and read each title to decide if you want to read more or skip to the next title. In a similiar manner, the screen reader uses the H key to quickly move from one title to the next. If the person wants to read more, s/he can then use the arrow down key to have the screen reader begin reading the text news article.

When a screen reader user lands on an HTML page, the screen reader announces how many H tags it found on that page. A page with no H tags is like a "Not Welcome" sign greeting our blind users. We should always include H tags. Consider it an easy way to make your page more accessible.

Using H tags can in most cases replace the need to provide skip links.

HTML H tags are also used by search engines to rank content. An H1 would be ranked higher then an H2.

In the example below, it is easy to see where the H tags should go. Almost every place you see a bold font in large and dark letters, is a title to an area of content and contains an H tag. I would probably add H tags to the titles "News" and "Sport" which seem to be curiously missing. "Learning English" and "Country Profiles" might benefit from an H tag as well.


Screen shot showing the BBC's Web site with H tags visable


Coding:

Best Practices:
Using the H Tag to Assist Screen Reader Navigation
Using CSS to Hide Audible Text Off The Screen


Testing:

  • Using the AIS Toolbar to Test for H Tags.

    Screen Shot shows the AIS Toolbar revealing the H tags on the BBC's home page.

  • Using Jaws to Test for H Tags.

    If for some reason the AIS toolbar does not work with your web page. You can always use the Jaws Insert+F6 keys to bring up a list of H tags, or you can simply use the Jaws H key to move from one H tag to the next.
    Screen Shot shows the Jaws Header list pop up window pointed at the BBC's home page.

  • Example: BBC Home Page

    This page shows very good use of H tag placement. Notice every place there is a title, there is an H tag.
    Screen Shot shows good use of H tags on the BBC's Home Page.


    SEO:

    Meaningful HTML elements are used for headers (<h1> to <h3>) and paragraphs (<p>), lists of links are organized using the list (<li>) element, tables (<table>) for layout avoided


    W3C:

    HTML Techniques for Web Content Accessibility Guidelines 1.0
    Use header elements to convey document structure and use them according to specification.

    Back to top