Observation Details

The heading structure should work as an outline of the complete page content, with the main heading describing the page as a whole, and subsequent headings describe the content until another heading of same heading level is reached. This means, a heading level 2 must describe purpose of all content, including sub-heading levels and their content, until the next heading level 2 is reached.

The programmatically determinable heading structure, using HTML heading elements is as follows:

h1 Apple Watch für Kinder
  h2 Immer in Verbindung mit der Apple Watch und Smart Connect M
    h3 Vorteile für Ihre Kids
  h2 Sorgenfreier dank der Apple Watch für Kinder
    h3 Vorteile für die Erwachsenen
  h2 Passend für Apple Watch Nutzer
    h3 Ihre Vorteile mit Smart Connect M
  h2 Jetzt Apple Watch SE mit Smart Connect M bestellen
  h2 Unser Tipp für Mobilfunkkunden
  h2 Die Apple Watch für Kinder – auch für alle
    h3 Weitere Angebote für Ihre Apple Watch
  h2 Häufig gestellte Fragen zur Apple Watch für Kinder

To determine the accuracy of a heading's wording, a heading can be looked at in hierarchy up to the main heading. E.g. the first heading level 3, put in hierarchy context, is as follows:

h1 Apple Watch für Kinder

h2 Immer in Verbindung mit der Apple Watch und Smart Connect M

h3 Vorteile für Ihre Kids

p Eine neue Apple Watch oder ggf. auch das Vorgängermodell von Mama oder Papa kann jetzt ganz einfach und unkompliziert von Kindern genutzt werden. Die Eltern nach der Schule anrufen, die Großeltern über die gute Note per Nachricht informieren oder endlich ein eigenes Memoji an Freunde versenden – das alles und noch vieles mehr – ist mit der Apple Watch für Kinder jetzt möglich. Außerdem kann man mit den überarbeiteten Aktivitätsringen mit der Watch Bewegungsminuten spielend tracken, damit Bewegung noch mehr Spaß macht.

Observations, shown at the example heading above:

  • Heading hierarchy implies purpose "Vorteile für Kids, die mit der Apple Watch und Smart Connect M immer in Verbindung sind"

    • While not specifically for children, the content shows "Vorteile", so the <h3> is more or less accurately describing content purpose

    • The <h2> however does not add to this purpose at all

    • Also, usually, a heading element, followed by another heading element directly, without any content between, is a good indication of unnecessary heading hierarchy

To demonstrate this, it often is useful to look at the page outline one hierarchy level at a time, evaluating if headings level 2 accurately split the page into useful sections.

h1 Apple Watch für Kinder
  h2 Immer in Verbindung mit der Apple Watch und Smart Connect M
  h2 Sorgenfreier dank der Apple Watch für Kinder
  h2 Passend für Apple Watch Nutzer
  h2 Jetzt Apple Watch SE mit Smart Connect M bestellen
  h2 Unser Tipp für Mobilfunkkunden
  h2 Die Apple Watch für Kinder – auch für alle
  h2 Häufig gestellte Fragen zur Apple Watch für Kinder

Observations for heading structure in general:

  • "Immer in Verbindung mit der Apple Watch und Smart Connect M"

    • Expected content: Apple Watch tariff Smart Connect M

    • Actual content: Generic text content about Apple Watch "Vorteile"

    • → not accurate

  • "Sorgenfreier dank der Apple Watch für Kinder"

    • Expected content: Security features, privacy features, parenting features, ...

    • Actual content: "in Verbindung bleiben", app and contact management as administrator, location access

    • → accurate

  • "Passend für Apple Watch Nutzer"

    • Expected content: ?

    • Actual content: "Vorteile" of Smart Connect M tariff

    • → factually accurate, but wording does not hint on any specific content at all

  • "Jetzt Apple Watch SE mit Smart Connect M bestellen"

    • Expected content: Watch + tariff offer details and possibility to buy

    • → accurate

  • "Unser Tipp für Mobilfunkkunden"

    • Expected content: Current customer offer for Apple Watch

    • Actual content: Offer for tariff as "Zweitkarte"

    • → arguably not accurate

  • "Die Apple Watch für Kinder – auch für alle"

    • Expected content: ?

    • Actual content: Apple Watch features also useful for the elderly; MultiSIM offer

    • → not accurate; wording does not hint on actual content

  • "Häufig gestellte Fragen zur Apple Watch für Kinder"

    • Expected content: FAQ about Apple Watch für Kinder

    • Actual content: "Vorteile der Apple Watch für Kinder", Difference between "Apple Watch Familienkonfiguration" and "Apple Watch für Kinder", Tariff for Apple Watch für Kinder

    • Observations:

      • "Vorteile" duplicates page content

      • "Unterschied Familienkonfiguration": Wording "Familienkonfiguration" was not used before (except in URL path); If "Familienkonfiguration" and "Apple Watch für Kinder" is not the same, the URL path, the page title, and the page's main heading do not match

      • "Tarif" duplicates page content

    • → factually accurate, but not adding any information that is not already present on page

These observations can be done for each subsequent heading level as well.

Remediation Notes

HTML heading elements are the main way to navigate a page's structure. While sighted users also always benefit from accurate headings and heading structure, users of assistive technology often completely rely on them. Thus, headings must accurately describe their following content(s' purpose). A user of assistive technology may navigate a page by receiving a list of headings, starting with one hierarchy level at a time, as demonstrated in the observation details.

Headings that lead the users to have no expectations might result in the user not consuming the section's content at all. Headings that lead users to have specific expectations not being met by actual content might result in the user not consuming the section's content at all, expecting the content is not useful for them, or in the user consuming the section's content, expecting specific information, but not finding it.

To ensure accurate heading structure, it is important to look at the page outline one hierarchy level at a time, thinking about it like a magazine or newspaper. When the sports section (heading level 2) is of no interest to the user, but the local news section (heading level 2) is, the user might not even look at the sports section. If the sports section now holds local, sports-related news, the user might've wanted to consume, but didn't.

Splitting a given page into accurate, useful sections (heading level 2) first will ensure proper grouping of content. Example:

h1 Apple Watch für Kinder
  h2 Vorteile
  h2 Angebote
  h2 Häufig gestellte Fragen

Expanding on that, adding a third hierarchy level:

h1 Apple Watch für die ganze Familie
  h2 Vorteile
    h3 Für Kids
    h3 Für Eltern
    h3 Für ältere Familienmitglieder
  h2 Angebote
    h3 Der passende Tarif – Smart Connect M
    h3 Apple Watch SE mit Tarif im Bundle
    h3 Tipp für bestehende Mobilfunkkunden
    h3 Apple Watch mit bestehendem Tarif nutzen
  h2 Häufig gestellte Fragen
    h3 ...