Visual Headings - heading levels do not matching visual hierarchy
Test Case Summary
Test Case ID
TC13.2-1.a-fail-2
Test Case Description
Visually apparent 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.
The code sample provides visual headings that appear to be at three levels. Programmatically, the third level headings are <h3> to <h6> with style attributes that set all of them to the same font size to make them appear to be at the same level. 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.a
Test Case Detail
Expected Baseline Result
FAIL
The headings in the code samples do not match the visual hierarchy.
Test Data
Single-Page URL
Embedded Code
Code
Test Case Instruction
| Test Instruction | Instruction Detail | Expected Test Case Result |
|---|---|---|
| 13.2-IC | 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 apparent 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>. |
Fail: the visual headings are programmatically determinable, but the programmatic heading levels do not match the visual heading presentation. |
| Result | If the above check fails, then Baseline Test 13.2-VisHeadingProg fails. | FAIL; 13.2-1 fails |