Visual Headings - multiple visually apparent heading levels identified using ARIA and HTML

Test Case Summary

Test Case ID

TC13.2-all-pass-2

Test Case Description

Visually apparent headings are programmatically defined by ARIA.

The code sample provides a depiction of visually apparent headings with multiple heading levels formed using ARIA role="heading" aria-level="#". A successful test should identify a PASS against Baseline 13.2 Visual Headings.

Applicable ICT Baseline Test

13.2 Test Procedure for Visual Headings

Baseline Test ID: 13.2-VisHeadingProg

Test Instruction: All

Test Case Detail

Expected Baseline Result

PASS

The visually apparent headings in the code sample contain multiple heading levels created using ARIA role=heading and appropriate ARIA-level attributes

Test Data

Single-Page URL

https://section508coordinators.github.io/baselinealignment/testfiles/TF13/13.2-all-pass-2.html

Embedded Code

Code

Test Case Instruction

Test Instruction	Instruction Detail	Expected Test Case Result
IC-1	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.
13.2-1	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].
13.2-1.a	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>`.	Pass: The visual `<h1>` heading is higher than the visual `<h2>` heading, which is higher than the `<h3>` headings.
13.2-1.b	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.	Pass: the visual hierarchy of the headings is correct
13.2-1.c	HTML or ARIA programmatically identify each heading. When both are used, heading levels must match. H42: each heading is marked with `<h1>` to `<h6>`. ARIA12: each heading is marked with `role="heading"` and `aria-level="#"`. The default heading level is “2” when none is specified.	Pass: all headings are programmatically identified by ARIA.
Result	If the above check fails, then Baseline Test 13.2-VisHeadingProg fails.	PASS