Visual Headings - with visually apparent headings with multiple heading levels identified using HTML

Test Case Summary

Test Case ID

TC13.2-all-pass-1

Test Case Description

Visually apparent headings are programmatically defined by HTML.

The code sample provides a depiction of visually apparent headings with multiple heading levels formed using native heading elements. 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 sample are identified with multiple heading levels using native heading elements.

Test Data

Single-Page URL

https://gsa.github.io/baselinealignment/testfiles/TF13/13.2-all-pass-1.html

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> Clssical music is divided into different periods and has a rich history.</p>
  <h3> 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>
  <h3> Classical Period - 1750 to 1830</h3>
  <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, Maozart, Schubert, and Paganini.</p>
  <h3>Romantic Period - 1830 to 1900</h3>
  <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>
  <h3>20th Century - 1900 to 2000</h3>
  <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 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.	Multiple 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.	Pass: all headings are programmatically identified by HTML `<h#>`.
Result	If the above check fails, then Baseline Test 13.2-VisHeadingProg fails.	PASS