Visual Headings - multiple visual headings with element levels AND role=heading BUT aria-level is not defined

Test Case Summary

Test Case ID

TC13.2-1.c-fail-3

Test Case Description

Visual headings are assigned programmatic heading structure by HTML element tag <h#> and by ARIA attributes role="heading" but h1 does not have aria-level="#". If using HTML and ARIA together, the HTML level and aria level must match.

The code sample provides matched heading levels for all except h1. When an aria-level is not defined, then level 2 is the default level, which creates a level conflict with the h1 heading. A successful test should identify a FAIL 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: 1.c

Test Case Detail

Expected Baseline Result

FAIL

The “Types of Music” heading in the code sample has mismatched heading levels (HTML heading level is “1”. ARIA heading level is not specified and defaults to “2”.)

Test Data

Single-Page URL

https://section508coordinators.github.io/baselinealignment/testfiles/TF13/13.2-1.c-fail-3.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.	Visual headings found.
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.	Fail: The “Types of Music” heading has mismatched heading levels. HTML heading level is 1. ARIA heading level defaults to 2.
Result	If the above check fails, then Baseline Test 13.2-VisHeadingProg fails.	FAIL; 13.2-1.c fails