Headings
Summary
Visual styling of text and layout is used in graphical designs to make it easier for users to
identify groups of information in web resources and to identify headings and sub-headings of
structured documents. For people using speech and text technologies like refreshable Braille
displays, the groupings and structure also need to be represented in markup using
html headings (h2-h6).
Benefits to People with Disabilities
- Many types of browsers and assitive technologies allow people to navigate web content using headeers
Other Benefits
Related Accessibility Requirements
- Section 508
- § 1194.22 (o) A method shall be provided that permits users to skip repetitive navigation links.
- Web Content Accessibility Guidelines (WCAG 1.0)
- 3.5 Use header elements to convey document structure and use them according to specification. [Priority 2]
HTML Markup Details
h1- Use
h1as a unique title for a web resource - There should be only one
h1on a web resource -
h2-h6 - Use
h2-h6elements as sub-headings to identify major and minor sections - Use headings in numerical order;
for example,
h3should be used underh2andh4should be used underh3
Example Code
<body>
...
<h1>Document title</h1>
<h2>Section 1 title</h2>
<h3>Sub-section 1.A title</h3>
<p>Section content ...</p>
<h3>Sub-section 1.B title</h3>
<p>Section content ...</p>
<h3>Sub-section 1.C title</h3>
<p>Section content ...</p>
<h2>Section 2 title</h2>
<h3>Sub-section 2.A title</h3>
<p>Section content ...</p>
<h3>Sub-section 2.B title</h3>
<p>Section content ...</p>
</body>