HTML and XHTML
This technique relates to Success Criterion 1.3.1: Info and Relationships (Sufficient as a way to meet an unwritten technique).
The objective of this technique is to use HTML and XHTML heading markup to provide semantic code for headings in the content. Heading markup will allow assistive technologies to present the heading status of text to a user. A screen reader can recognize the code and announce the text as a heading with its level, beep or provide some other auditory indicator. Screen readers are also able to navigate heading markup which can be an effective way for screen reader users to more quickly find the content of interest. Assistive technologies that alter the authored visual display will also be able to provide an appropriate alternate visual display for headings that can be identified by heading markup.
Example 1: Hierarchical Heading Organization
In the following example, headings are used in a hierarchical layout with
h3 as a subsection of
h2, which is a subsection of
<h1>Plant Foods that Humans Eat</h1> <p>There are an abundant number of plants that humans eat...</p> <h2>Fruit</h2> <p> A fruit is a structure of a plant that contains its seeds...</p> <h3>Apple</h3> <p>The apple is the pomaceous fruit of the apple tree...</p> <h3>Orange</h3> <p>The orange is a hybrid of ancient cultivated origin...</p> <h3>Banana</h3> <p>Banana is the common name for herbaceous plants ...</p> <h2>Vegetables</h2> <p>A vegetable is an edible plant or part of a plant other than a sweet fruit ...</p> <h3>Broccoli</h3> <p>Broccoli is a plant of the mustard/cabbage family ... </p> <h3>Brussels sprouts</h3> <p>The Brussels sprout of the Brassicaceae family, is a Cultivar group of wild cabbage ...</p> <h3>Green beans</h3> <p>Green beans have been bred for the fleshiness, flavor, or sweetness of their pods...</p>
Example 2: Headings in a 3-column layout
In this example, the main content of the page is in the middle column of a 3-column
page. The title of the main content matches the title of the page, and is marked as
h1, even though it is not the first thing on the page. The content in
the first and third columns is less important, and marked with
It is important to note that the example code below is not intended to prescribe what level of heading should be used for a particular section of the web page. In the example, the layout could be presented with the first heading in each column at the same logical level (such as an h1), or as found in the example, where the logical level reflects its importance in relation to the main content.
<head> <title>Stock Market Up Today</title> </head> <body> <!-- left nav --> <div class="left-nav"> <h2>Site Navigation</h2> <!-- content here --> </div> <!-- main contents --> <div class="main"> <h1>Stock Market up today</h1> <!-- article text here --> </div> <!-- right panel --> <div class="left-nav"> <h2>Related links</h2> <!-- content here --> </div> </body>
Resources are for information purposes only, no endorsement implied.
- Check that heading markup is used when content is a heading and the heading markup indicates the appropriate heading level for the content.
- Check that heading markup is not used when content is not a heading.
- Checks #1 and #2 are true.