Content is structured with proper headings and list elements.

When authoring web content it is important to use proper HTML headings to create a semantically meaningful document structure, organizing topics and subtopics so their relationships are easily determined through the sequence of headings.

Headings should be arranged in sequence, without skipping levels. That is, an H1 should always be followed by an H2, or another H1, but not followed by an H3 or H4, etc. Generally, a document should have one H1 for the main title, followed by H2 for the main topics, and H3 for subtopics within each of the main topics. The following sequence of headings provides a proper semantic structure:

For screen reader users a proper heading structure can provide an overview of the topics and subtopics on a page to help in deciding which content to read. Headings also provide screen reader users with an additional means to navigate a web page. A screen reader can list all the headings on a page, and if a user so chooses, can jump to any one of the headings and begin reading from there. Without proper headings, a user may be forced to read through all the content to find a relevant section, without the option to jump directly to that section.

The visual appearance of headings should not be created using typical paragraph text styled to look large and bold. Though for a sighted person this may provide the visual appearance of structure, for screen reader users this text is not semantically different from other paragraph text. And large, bold text cannot be listed with a screen reader’s list headings feature and cannot be used for navigating through the content.

Likewise, HTML heading markup should not be used to create large, bold text to highlight an important statement. Using a heading for this purpose upsets the semantic structure of a document and will often lead to confusion or difficulty understanding when a heading appears where one is not expected.

A common accessibility error occurs when web content developers choose headings based on their size. For instance, an H2 may appear too large, so the author opts for an H3, which is slightly smaller and perhaps fits the overall design of a document. As a result, the document structure is upset. Instead use an H2 as expected and style it to appear smaller to fit the document design.

Structure is also provided in web content when lists are formatted with proper HTML list elements, as opposed to creating a series of short paragraphs with an asterisk or a number at the start of each. When proper list markup is used, screen readers will announce the list, and the number of items in the list. While navigating through the list, they will often announce the position of a focused list item within the full list (e.g., “item 4 of 7”). These list structures help users comprehend. Without them it can be more difficult to understand a series of items as a list and to recall them afterwards.