Web Development
Web Developer Guidelines
Visual Design Recommendations

Checkpoint 10.6 - Core

All pages have correct HTML heading structure

WCAG 1.0 Priority 2

WCAG Guideline 3. Use markup and style sheets and do so properly.

HTML heading elements (<h1>-<h6>) allow for the content on web pages to be separated into logical, hierarchical sections which aid viewer understanding. Screen readers and other assistive technologies can navigate via these mechanisms to provide ease of navigation and better comprehension to their users. Deviating from this expected heading logic can cause confusion for users of assistive technologies and impact on the effectiveness of search engine robots.

Requirement

Ensure that the HTML heading elements used in the web page are used in their correct order and that no heading level in a sequence is skipped. Do not use any other HTML construct to replicate the visual look of a heading.

Recommendation

Heading elements (<h1>, <h2>, <h3>, <h4>, <h5>, <h6>) must be used in correct order. The first heading elements on a page must be <h1>, and code should not skip a heading level i.e. HTML code should go from <h1> to <h2> to <h3> and not directly from <h1> to <h3>.

Sections should be introduced with the HTML heading elements (<h1>-<h6>). Other markup may complement these elements to improve presentation, but visual presentation is not sufficient to identify document sections. For example, <h2> elements must be used to indicate a subsection of <h1>.

Heading elements must not be used to create font effects. To manipulate the presentation of heading levels use CSS stylesheets.

Checking Tool

  • Internet Explorer - AIS toolbar: Structure > Headings or Structure > Heading Structure
  • Firefox - Web Developer's Toolbar: Outline > Outline Headings

Information Source

The original source of this information is located on the W3C web site  (www.w3.org/TR/WCAG10-TECHS/#tech-use-markup)

 

Back to top