Was ist der Barrierefreiheitsbaum?
Jede Webseite hat einen DOM-Baum, den der Browser aus Ihrem HTML erstellt. Aus diesem DOM konstruiert der Browser auch einen Barrierefreiheitsbaum; eine parallele Struktur, die nur auf die Informationen reduziert ist, die assistive Technologien benotigen. Dazu gehoren Elementrollen, zugängliche Namen, Zustande und Beziehungen. Screenreader und andere Tools verwenden ausschlieslich diesen Baum, um die Seite den Benutzern zu präsentieren.
HTML-AAM: Wie Elemente Rollen Zugeordnet Werden
Die HTML Accessibility API Mappings-Spezifikation definiert, wie jedes HTML-Element einer Barrierefreiheitsrolle zugeordnet wird. Zum Beispiel wird header zu banner, nav wird zu navigation und button behalt seine Button-Rolle. Generische Elemente wie div und span werden der Rolle generic zugeordnet, die assistiven Technologien nichts über den Zweck oder die Funktion des Elements mitteilt.
Das Problem mit Div Soup
Wenn Entwickler div und span für alles verwenden, anstatt semantische Elemente, ist der resultierende Barrierefreiheitsbaum flach und bedeutungslos. Screenreader-Benutzer können nicht zwischen Landmarks springen, Überschriften finden oder Listen navigieren. Das visuelle Erscheinungsbild mag identisch sein, aber die zugrunde liegende Struktur bietet keine Informationen für Benutzer assistiver Technologie, die darauf angewiesen sind.
Best Practices für Semantisches Markup
Verwenden Sie native HTML-Elemente, die implizite ARIA-Rollen tragen, wann immer möglich. Reservieren Sie ARIA-Attribute für Falle, in denen kein natives Element existiert. Stellen Sie sicher, dass alle Landmarks zugängliche Namen haben, alle Bilder beschreibenden Alt-Text haben und alle Formularsteuerelemente zugehorige Labels haben. Testen Sie mit echten Screenreadern zusätzlich zu automatisierten Tools, um Probleme zu erkennen, die statische Analyse nicht erkennen kann.
