Das mit dem Section Element

Zwei Artikel, die am exakt gleichen Tag veröffentlicht wurden

1. Bruce Lawson auf Smashing Magazine: Warum Sie HTML5 <article> anstelle von <section> wählen sollten
2. Adam Laki auf Pine: Der Unterschied zwischen den Elementen <section> und <div>

Sie vergleichen leicht unterschiedliche Dinge, aber beide beinhalten das <section>-Element.

Ich finde es ziemlich klar, wann man nach einem <div> greift: Wenn man möchte, dass dieses Element im Wesentlichen bedeutungslos ist. Man verwendet es nur für Styling-Zwecke.

Ich denke immer an RSS, wenn ich an <article> denke: Würde dieser kleine Informationsbrocken als Eintrag sinnvoll sein (was nicht unbedingt der gesamte Inhalt des Artikels sein muss)? Wenn ja, verwenden Sie <article>; wenn nicht, dann nicht.

Bruce hat eine Standardantwort

[…] denken Sie an <article> nicht nur als Zeitungsartikel oder Blogbeitrag, sondern als Kleidungsstück – eine eigenständige Einheit, die in einem anderen Kontext wiederverwendet werden kann. So ist Ihre Hose ein Artikel, und Sie können sie mit einem anderen Outfit tragen; Ihr Hemd ist ein Artikel und kann mit einer anderen Hose getragen werden; Ihre knielangen Lackleder-Stiletto-Stiefel sind ein Artikel.

Noch wichtiger ist, dass es eine tatsächliche Funktionalität hat. Bruce erwähnt, dass Apple WatchOS es speziell verwendet, um Inhalte auf Seiten zu finden.

Aber <section> ist nebulöser. Früher sollte man sich Abschnitte als Orte vorstellen, an denen die Überschriften <h1>–<h6> zurückgesetzt würden, aber das kam nie zustande, weil es etwas namens „HTML5 Outlining“ erforderte, das von null Browsern unterstützt wird.

Sollen wir <section> überhaupt verwenden? Laut Bruce manchmal! Das Design von Smashing Magazine für Artikel hat eine Zusammenfassung am Anfang des Artikels. Visuell ist das ziemlich klar, aber für Nutzer von Screenreadern weniger. Die Lösung war, die Zusammenfassung in ein Element mit einem aria-label zu verpacken, um dies deutlich zu machen. Aber man sollte aria-label nicht verwenden, es sei denn, dieses Element hat auch eine role. Man könnte einem <div> eine Rolle zuweisen, aber <section> hat bereits eine gute Standardrolle, also

<section aria-label="quick summary">
  Summary text
</section>

Adams Artikel (Entschuldigung, Adam) ist in den Punkten sehr vage.

Der Hauptunterschied liegt im Semantischen. Wenn Sie einen Teil Ihrer Website oder Anwendung haben, der seine eigene Logik hat, müssen Sie das <section>-Tag verwenden, um ihn zu deklarieren…

… verwenden Sie <section>, wenn es logisch korrekt ist, einen Teil Ihrer Website oder App für assistive Technologien lesbar zu machen. Das ist ein ausgezeichneter Ansatz, wenn Sie die Screenreader im Hinterkopf behalten.

Sie erhalten also automatisch ein role="region" für Abschnitte, aber ich bin mir nicht sicher, ob das für Screenreader ohne Label etwas nützt. In einem kurzen Test (Chrome für Desktop mit aktiviertem VoiceOver) war ein <section> ohne aria-label einfach nicht im Bereich „Landmarks“ des Web Rotors vorhanden, aber es erschien, sobald es ein aria-label hatte.

Der Punkt ist: Verwenden Sie nicht einfach <section> und gehen Sie davon aus, dass Sie etwas Gutes für die Barrierefreiheit tun. Sein Zweck ist ziemlich begrenzt und nur nützlich für die Festlegung von Landmarks. Selbst dann helfen Sie nicht viel. Leonie Watson in den Kommentaren

Wenn die Wahl zwischen einer visuell versteckten Überschrift und einem Section-Element mit einem zugänglichen Namen besteht, gibt es ein paar Dinge zu beachten, bevor man entscheidet, welcher Ansatz der richtige ist.

Wenn ein Section-Element einen zugänglichen Namen hat, wird es zu einem navigierbaren Landmark-Element, sodass ein Screenreader-Nutzer die Tastenkombination seines Screenreaders verwenden kann, um von einem zum nächsten zu navigieren – genau wie bei Überschriften.

Laut der aktuellsten WebAIM Screen Reader User Survey bevorzugen jedoch 68 % der Screenreader-Nutzer die Navigation per Überschriften im Vergleich zu 2,9 %, die Landmarks bevorzugen.

Aus strenger Barrierefreiheits-Sicht könnte man die Überschrift wahrscheinlich weglassen, aber aus Usability-Sicht möchte man die Überschrift unbedingt beibehalten – zumindest bis mehr Screenreader-Nutzer eine Präferenz für die Verwendung von Landmarks zur Navigation durch Inhalte äußern.