HTML H Tag

A screen reader like Jaws and some browsers like Firefox allow the use of the H key to navigate the page. The user simply presses the H key and focus is moved to the next H tag on the page. Jaws will read the contents of the H tag, and if the user is interested in this content, s/he can simply use the arrow down key to begin reading the content below the H tag on the page. This is similiar to the way we used skip navs in the past, but is much better and replaces the need for skip links. So you can imagine that H tags are used to wrap around the titles of main areas of content.

When: H tags are needed on every page. When a screen reader user hits a web page, the first thing s/he hears is the number of H tags on the page. H tags are used by screen reader users to quickly navigate to the pages main areas of content, and when hearing that H tags are located on the page, the user immediately knows that the page is screen reader friendly. Also, remember, that all major search engines index on H tags, making your page much easier to find.

So, the question soon becomes, “How many H tags do I need, and where should they be placed?” You need enough to make navigation easy. Realize, the screen reader user can press the H key and move from one H tag to the next, or s/he can bring the H tags up into a popup window that lists all the H tags on a page to make it easy to navigate to any H tag on the page. So the key is to create enough of them to make it useful, but not so many as to make it cluttered.
Where: H tags should be wrapped around all the titles of main content on the page. This example from the BBC is very good. Notice how the titles are very visual. They are bolded text, or they are have blue background colors and white text. It is easy for the visual person to take one glance at the page and know where the main areas of content are. It is our job it make it just as easy for a screen reader user or search engine. Can you see some places where H tags could be added? I would think “Explore”, “News”, “Sport”, “Don’t Miss”, “Learning English”, “Country Profiles”, and “BBC Services” could all use H tags.

screen shot showing placement of H tags

How: H tags are very simple. They take the form of:

Code:


    <H1>Title of Content</H1>

The number of the H tags is not really all that important. It is more important to have them then to worry about the proper numbering. Having said that, the W3C requires that an H2 tag be preceeded with an H1 tag, and an H3 tag should be preceded by an H2 and an H1 tag. In our world of agregated content, it is not always possible for us to do this, but if you can, it is helpful.

H tags can be formated with CSS:

Code:


    <style type="text/css">
      h1,h2,h3,h4,h5,h6{
      font-family: arial, 'sans serif';
      color:saddlebrown;
      font-size: 100%;
      margin-top: 0pt;
      margin-bottom: 0pt;
      margin-left: 0pt;
      margin-right: 0pt;
      display: inline;
    }
    </style>

We generally do not use H tags around links. The SR user can get to this places on the page by using the Links List window in JAWS.

You can use H tags around an image that is being used to denote a title if the image has an adaquate ALT attribute.

Example 1:

Top News of the Day

‘Mrs. Anthrax’ Out of Prison.

Sports News

For Lions Fans, Enough is Enough.

Business News

Feel Trapped By Your Job?

Entertainment News

The Holiday Duet You Have to Hear.

Code:


<h1>Top News of the Day</h1>
<p>'Mrs. Anthrax' Out of Prison.<p>
<h2>Sports News</h2>
<p>For Lions Fans, Enough is Enough.<p>
<h2>Business News</h2>
<p>Feel Trapped By Your Job?<p>
<h2>Entertainment News</h2>
<p>The Holiday Duet You Have to Hear.<p>

Works With

Using H Tags
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

Comments are closed.