Zum Hauptinhalt springen

A11y-Nugget: Die Region <section>

Eine Region, die wichtig genug ist, dass Nutzer direkt dorthin navigieren können sollen, sollte mit der Region <section> gekennzeichnet werden. Ein <section>-Element wird nur dann zu einer anspringbaren Seitenregion, wenn es mit einem aria-labelledby- oder aria-label-Attribut bezeichnet wird (genau wie das <form>-Element).

SECTION

Das HTML <section>-Element steht für Abschnitte des Inhalts. Sections haben i.d.R. eine Überschrift (der Validator wünscht Überschriften explizit und sagt bei fehlender Überschrift: <section> lacks heading) und können Kapitel oder die Beschreibung eines Produkts sein. Wenn ein HTML-Objekt für CSS und Javascript gebraucht wird, ist weiterhin ein div-Tag angebracht.

Ein guter Anhaltspunkt, wo section und wo ein div-Element eingesetzt werden sollte, ist eine Zusammenfassung des Inhalts der Webseite: Wenn Inhalte in einer Liste einen eigenen Punkt haben, ist ein <section>-Tag die bessere Wahl als ein <div>-Tag.
Oder noch einfacher: Wenn man, wie der Validator wünscht, eine Überschrift drüber setzen kann, dann kann ein Bereich in ein <section>-Element gesetzt werden.

Anders als <article> ist <section> ein Bereich, der nicht unbedingt allein stehen könnte. Der Standard hat die Grenze zwischen <article> und <section> nur hauchzart am »self-contained« ausgemacht: Das erklärt, warum wir mit diesen beiden Begriffen immer wieder ins Schlingern kommen. Theoretisch können <article>-Tags innerhalb von <section>-Tags stehen. Diese Struktur wird vom Validator ebenfalls als korrekt anerkannt.

Quelle: HTML article, section, header, nav

Mehr Info und html techniques (englisch)
ARIA Landmarks Example beim W3C