Heading Overview

Overview

When a web resource is graphically rendered, the text and layout are styled to visually structure information that the web resource presents, making it easier for sighted users to identify logical units of information, headings, and sub-headings. Representation of such structure in HTML markup using headings (h2-h6) is important in facilitating navigation of people who use assistive technologies such as refreshable Braille displays. Without headings, web resources will be one long paragraph to screen reader users, and locating and understanding information will be difficult.

Benefits to People with Disabilities

1. Keyboard users, including people with physical disabilities and screen reader users, can use keyboard heading navigation commands to efficiently navigate the content of web resources.
2. Screen reader users can easily locate and identify the main sections and sub sections of web resources.

Benefits to All Users

1. Web resources are more usable as the styling of headers is more consistent and identifying them on web resources is easier.
2. Users get better search results of web resources since search engines weight heading content more than paragraph content.
3. Using headings structures web resources for more accessibility for users of wider range of technologies.

Benefits to Developers

1. It is easier to style headings consistenly across web resources using CSS.
2. The more web developers separate structure from styling, the easier it is for them to create and update resources.
3. The ranking of web resources improves when heading content provides meaningful information about the content of the web resource because search engines weight heading content more than paragraph content.

HTML Markup Details

h1 element

The h1 element should contain the title for the web resource and may contain the title of the website.

The page should contain at least one and no more than two h1 elements.

h2-h6 elements

The h2-h6 elements should identify major and minor sections of the web resource.

Headings should be properly nested following the heading levels represented by the numerical values of the heading elements.

• h2 should be used as sub-heading after a h1
• h3 should be used as sub-heading after a h2
• h4 should be used as sub-heading after a h3
• h5 should be used as sub-heading after a h4
• h6 should be used as sub-heading after a h5

Related Accessibility Requirements

Illinois Information Technology Accessibility Standards

1.3 Provide meaningful page titles.

1.4 Use headings to introduce sections and sub-sections, and use them in the correct order.

9.2 Provide a means of skipping past repetitive navigation links.

Section 508

1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.

W3C Web Content Accessibility Guidelines 2.0

2.4.1 Bypass Blocks

2.4.2 Page Titled

2.4.8 Location

2.4.10 Section Headings

3.2.3 Consistent Navigation

3.2.4 Consistent Identification

W3C Web Content Accessibility Guidelines 1.0

3.1 When an appropriate markup language exists, use markup rather than images to convey information.

3.3 Use style sheets to control layout and presentation.

3.5 Use header elements to convey document structure and use them according to specification.

12.3 Divide large blocks of information into more manageable groups where natural and appropriate.

13.4 Use navigation mechanisms in a consistent manner.