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.
ARIA 1.2: To ensure elements with a role of heading are organized into a logical outline, authors must use the aria-level attribute to indicate the proper nesting level. (This is a change from ARIA 1.1 where the default aria-level was 2.)
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).
A test for Visually Apparent Lists should not include navigation menus. While programmatic lists are often used to create navigation menus, menus may also be created using other techniques.

13.A Test Procedure for Descriptive Headings

Baseline Test ID: 13.A-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.A-HeadingDescriptive fails.

13.B Test Procedure for Visual Headings Programmatic

Baseline Test ID: 13.B-VisHeadingProg

Identify Content

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]:
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>.
2. 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.
3. HTML or ARIA programmatically identify each heading.
  1. H42: each heading is marked with <h1> to <h6>.
  2. ARIA12: each heading is marked with role="heading" and aria-level="#".
  3. When both techniques are used, ARIA takes precedence and the heading level is indicated by aria-level.

Test Results

If the above check fails, then Baseline Test 13.B-VisHeadingProg fails.

13.C Test Procedure for Programmatic Headings Visual

Baseline Test ID: 13.C-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.C-ProgHeadingVisual fails.

13.D Test Procedure for Visually Apparent Lists

Baseline Test ID: 13.D-List

Identify Content

Visually apparent lists, which appear as a grouping of items typically one below the other. Exclude navigation menus. Determine the type of list:

An unordered list is not numbered and is used where sequence or the ability to reference specific items by number/letter is not important. List items have the same visual marking or may have no marking.
An ordered lists is numbered sequentially and, if necessary, hierarchically (e.g., 1, 2, 2a, 2ai, etc.) and is used where sequence or the ability to reference specific items by a unique number/letter is important.
A description list is used to group term(s) with their description(s). These are common in a glossary.

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 programmatically an unordered list <ul>, and each item in the list is programmatically a list item <li>. [SC 1.3.1]
Check that content that has the visual appearance of a numbered list is programmatically an ordered list <ol>, and each item in the list is programmatically a list item <li>. [SC 1.3.1]
Check that content has a visual appearance of a description list is programmatically a description list <dl>, each term is programmatically a description term <dt> and each description is programmatically a definition description <dd>. [SC 1.3.1]

Test Results

If any of the above checks fail, Baseline Test 13.D-List fails.

Advisory: Tips for streamlined test processes

There is not a test to check that programmatic lists are visually apparent lists.

WCAG 2.2 Techniques

The following sufficient techniques and/or common failures were considered when developing this test procedure for this baseline requirement:

Section 508 ICT Testing Baseline