13. Content Structure
Accessibility Requirements
- WCAG SC 2.4.6 Headings and Labels – Headings and labels describe topic or purpose.
- WCAG SC 1.3.1 Info and Relationships – Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text.
Test Method Rationale
- Visual headings must be programmatically determinable, represent the content structure, and describe the content that follows the headings.
- Visual lists must be programmatically determinable according to their types (ordered, unordered, description).
Limitations, Assumptions, or Exceptions
- A page with only one heading on the page does not have a heading level structure and would not be tested for heading structure.
- Pages can have more than one heading level 1 or no heading level 1.
- The heading level 1 on a page is not required to match the page title.
- The order of heading levels may not always be in sequence but may be valid as it relates to the visual structure/importance communicated by visible headings on the page. For example, an
<h2>
heading may be used for a navigation structure that precedes an<h1>
title on a page. Similarly,<h1>
may be followed by<h3>
without<h2>
between them. - Not all lists need markup. For instance, sentences that contain comma-separated lists may not need list markup (H48: Using ol, ul and dl for lists or groups of links).
13.1 Test Procedure for Descriptive Headings
Baseline Test ID: 13.1-HeadingDescriptive
Identify Content
Visually apparent headings, which denote sections of content. Headings are often in a larger, bolded font separated from paragraphs by extra spacing (though not always). Note the hierarchy and structure of each heading with respect to other headings on the page or screen.
Test Instructions
- Check that each heading describes the topic or purpose of its content. [SC 2.4.6]
Test Results
If any of the above checks fail, then Baseline Test 13.1-HeadingDescriptive fails.
13.2 Test Procedure for Visual Headings Programmatic
Baseline Test ID: 13.2-VisHeadingProg
Identify Content
Visually apparent headings, which denote sections of content. Headings are often in a larger, bolded font separated from paragraphs by extra spacing (though not always). Note the hierarchy and structure of each heading with respect to other headings on the page.
Test Instructions
- Check that all visual headings are programmatically determinable and that programmatic heading levels logically match the visual heading presentation within the heading structure [SC 1.3.1]:
- The most important heading(s) should have the highest priority level. For example,
<h1>
is a higher level than<h2>
, which is higher than<h3>
. - Headings with an equal or higher level start a new section; headings with a lower level start new subsections that are part of the higher leveled section.
- HTML or ARIA programmatically identify each heading. When both are used, heading levels must match.
- The most important heading(s) should have the highest priority level. For example,
Test Results
If the above check fails, then Baseline Test 13.2-VisHeadingProg fails.
13.3 Test Procedure for Programmatic Headings Visual
Baseline Test ID: 13.3-ProgHeadingVisual
Identify Content
Programmatically determined headings: <h1>
to <h6>
or ARIA role="heading"
.
Test Instructions
- Check that each programmatically determinable heading is also serving as a visual heading on the page. Content that is not a visual heading cannot have a role of heading (for example, heading markup should not be used for emphasis on an element that is not a heading for content after it). [SC 1.3.1]
Test Results
If the above check fails, then Baseline Test 13.3-ProgHeadingVisual fails.
13.4 Test Procedure for Visually Apparent Lists
Baseline Test ID: 13.4-List
Identify Content
Visually apparent lists. For each list, determine if it appears to be ordered, unordered, or a description list.
- Ordered lists
<ol>
are numbered sequentially and, if necessary, hierarchically (e.g., 1, 2, 2a, 2ai, etc.) and are used where sequence or the ability to reference specific items by number/letter is important. - Unordered lists
<ul>
are not numbered and are used where sequence or the ability to reference specific items by number/letter is not important. - Description lists
<dl>
are used to group terms with their descriptions.
Test Instructions
- For each visually apparent list:
- Check that content that has the visual appearance of a list (with or without bullets) that has no special order or sequence is marked as an unordered list. [SC 1.3.1]
- Check that content that has the visual appearance of a numbered list is marked as an ordered list. [SC 1.3.1]
- Check that content is marked as a description list when terms and their descriptions are presented in the form of a list. [SC 1.3.1]
Test Results
If the above check fails, Baseline Test 13.4-List fails.
Advisory: Tips for streamlined test processes
WCAG 2.0 Techniques
The following sufficient techniques and/or common failures were considered when developing this test procedure for this baseline requirement:
- ARIA12: Using role=”heading” and aria-level=”#” to identify heading levels
- H42: Using <h1> to <h6> to identify headings
- G130: Providing descriptive headings
- G115: Using semantic elements to mark up structure AND H49: Using semantic markup to mark emphasized or special text
- G117: Using text to convey information that is conveyed by variations in presentation of text
- H48: Using ol, ul and dl for lists or groups of links