Using H2 elements

The most constant (and infuriating mistake) for many users who rely on mark-up for accessibility is the common practice by designers of using multiple h2 elements.

• In this article the <> around the mark up has been removed so it does not get applied to the text.

Although, with more designers adopting Web 2.0 principles, the idea that a document structure only has one main heading h1 has ‘sunk in’ (with a co-sponsoring dramatic drop in designers using h1 purely to change the text size) h2 elements are still used, even on the most accessible of pages, as general and multiple mark-up to indicate not a second heading but  any subheadings on the page or to simply make a title bigger. A webpage with several divided areas might have several h2 elements as a title.

Quite simply, this is a basic misunderstanding between the structural mark-up and semantics. A second heading (mark-up) is the second heading of the document content e.g:

h1 A New Look at Web Accessibility /h1
h2 How correct use of mark-up aids understanding of content. /h2

• Remind yourself of  why Web 2.0 is important by watching the video below:

[youtube]6gmP4nk0EOE[/youtube]

Instead Most designers are using h2 as general ”secondary” heading e.g.

h1 This Look at Common Web Design /h1

h2 The Use of Html/h2
p Some writing on html /p
h2 The Advantages of PHP /h2
p Some Writing on php /p
h2 Accessibility and the use of Headings /h2
p Some writing on this subject/p

If it is used multiply on a page an h2 becomes simply a secondary heading or a subheading – all equal. This confuses the user whose browser of assistive technology uses mark-up to aid document comprehension. These elements become irrelevant and the user is unable to gain any indication or item priority or document structure or navigation from their use. It is also confusing for the designer. If the all h2 are equal, where and why do we use h3 or h4..?

To keep a document structure clean and its visual design separate use h2 only if it really is a second heading. For lots of secondary headings (i.e separate titles to areas) use other methods mainly, CSS colour, size or capitalisation and hidden navigational aids or (where accurate and appropriate) the title=”" tag.

A well-worded, textual title or CSS hidden navigational element used to identify page areas and navigation can be invaluable to everyone from those using screen-readers or even those using mobile phone that have a non-standard mobile browser.