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
<h1> Types of Music </h1>
<p> Classical, jazz, pop, rock, and funk are types of music. </p>
<h2> Periods of Classical Music </h2>
<p> Classical music is divided into different periods and has a rich history.</p>
<h3 style="font-size: 120%;"> Baroque Period - 1600 to 1750 </h3>
<p> Music in the Baroque period emphasized ornamentation and excess. Music compositions became more flowery and numerous musical methods were invented, such as the fugue, concertos, symphony, and the usage of major and minor keys. Some notable composers were Bach, Handel, and Vivaldi.</p>
<h4 style="font-size: 120%;"> Classical Period - 1750 to 1830</h4>
<p> The Classical period was notable for its stately elegance; music composed in the style of sonatas and string quartets become popular. Instruments developed more into their modern counterparts, espeically brass instruments. Some well-known composers in the Classical period were Haydn, Mozart, Schubert, and Paganini.</p>
<h5 style="font-size: 120%;">Romantic Period - 1830 to 1900</h5>
<p> Music shifted from the elegant compositions of the Classical period to more moodier and passionate pieces in the Romantic period. These compositions were emotionally evocative, dramatic, and stirring; for example, numerous pieces were composed for opera and ballet. Some renowned composers were Tchaikovsky, Brahms, and Chopin. </p>
<h6 style="font-size: 120%;">20th Century - 1900 to 2000</h6>
<p> Classical music in this period was heavily inspired by historical events of conflict and resolution which happened in the beginning of the 20th century. Within this time period, the Impressionist and Minimalist periods of art were becoming more widespread, and the music accomodated by becoming more abstract. At the end of the time period, technology causes rapid expansion into the possibilities of new forms of music, with the synthesizer becoming more widely used. Some famous composers are Satie, Holst, and Stravinsky.</p>
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 |
