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, zugangliche Namen, Zustande und Beziehungen. Screenreader und andere Tools verwenden ausschlieslich diesen Baum, um die Seite den Benutzern zu prasentieren.
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 uber den Zweck oder die Funktion des Elements mitteilt.
Das Problem mit Div Soup
Wenn Entwickler div und span fur alles verwenden, anstatt semantische Elemente, ist der resultierende Barrierefreiheitsbaum flach und bedeutungslos. Screenreader-Benutzer konnen nicht zwischen Landmarks springen, Uberschriften finden oder Listen navigieren. Das visuelle Erscheinungsbild mag identisch sein, aber die zugrunde liegende Struktur bietet keine Informationen fur Benutzer assistiver Technologie, die darauf angewiesen sind.
Best Practices fur Semantisches Markup
Verwenden Sie native HTML-Elemente, die implizite ARIA-Rollen tragen, wann immer moglich. Reservieren Sie ARIA-Attribute fur Falle, in denen kein natives Element existiert. Stellen Sie sicher, dass alle Landmarks zugangliche Namen haben, alle Bilder beschreibenden Alt-Text haben und alle Formularsteuerelemente zugehorige Labels haben. Testen Sie mit echten Screenreadern zusatzlich zu automatisierten Tools, um Probleme zu erkennen, die statische Analyse nicht erkennen kann.
