Eine Seitenstruktur mit Semantik und WAI-ARIA
Für gewöhnlich nutzen wir das Internet auf eine sehr visuelle Art. Der Browser rendert die Elemente des Quelltexts in der Hypertext-Markup-Language (HTML) samt eingebetteter Ressourcen zu einer interaktiven, visuellen Darstellung mitten in die Bedienoberfläche. Davon merken die Anwender*innen wenig – oder nur, wenn sich die Seitenladezeit in die Länge zieht. Für Menschen mit einer Sehbehinderung fällt die visuelle Darstellung mitunter aber ganz weg. Sie nutzen Hilfstechnologien wie Screenreader, die den Inhalt akustisch vorlesen oder Braillezeilen, die den Inhalt in Blindenschrift fühlbar machen.
Dafür muss jedoch der Quelltext verständlich sein. Im besten Fall leitet sich die visuelle Struktur weitestgehend aus der HTML-Struktur ab: So müssen die HTML-Elemente eine logische Reihenfolge besitzen, damit sie beispielsweise entsprechend logisch vorgelesen werden können. Einleitende Überschriften, idealerweise mit verschiedenen Hierarchie-Ebenen (<h1>, <h2>, <h3> …), führen durch die Inhalte. Bilder und Grafiken sind alternativ beschrieben, damit der Kontext, wenn sie nicht geladen oder dargestellt werden können, trotzdem verständlich ist.
HTML5 ging noch einige Schritte weiter. Mit neuen HTML-Elementen kann der Quelltext weitaus semantischer gekennzeichnet werden – so wurde beispielsweise aus den Container-Elementen <div id="header"> ein schlichtes <header> für den Kopfbereich und aus <div id="navigation"> ein klares <nav> für eine Navigation. Davon sehen die Anwender*innen im Browser gar nichts, auf das Aussehen haben diese Elemente nicht die geringste Auswirkung. Im Gegenteil: Stattdessen hat jetzt nahezu jedes HTML-Element eine festgelegte Bedeutung, die sich nicht optisch herleitet, sondern allein aus der Verwendung der Tags.
Durch diese neue Semantik können Suchmaschinen besser schlussfolgern, welche Inhalte relevant sind. Auch Hilfstechnologien sind viel besser in der Lage, den Kontext der Elemente zu erfassen, um ihn umso verständlicher selbst wieder aufbereiten zu können. Hinsichtlich der Barrierefreiheit sind die Elemente, die mit HTML5 gekommen sind, ein starker Fortschritt.
Mit der Spezifikation WAI-ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) wurden die Möglichkeiten zur semantischen Auszeichnung abermals erweitert. Bedeutsam sind unter anderem die »Landmark Roles«. Als Orientierungspunkte erleichtern sie die Navigation für Anwender*innen, die sich mittels Tastatur oder Screenreader durch die Webseite navigieren. Manche Hilfstechnologien strukturieren die Webseite beispielsweise nach den Überschriften, zu denen Anwender*innen direkt springen können. Mit den semantischen HTML5-Tags und den Landmark Roles wird das Navigationskonzept viel präziser.
Bei der semantischen Auszeichnung gilt immer: Was dabei mit HTML5 erledigt werden kann, sollte mit HTML5 erledigt werden. In speziellen Fällen kommt man aber die Grenzen – beispielsweise bei Interaktivität. Deshalb gibt es weitere ARIA-Attribute, um die die Elemente erweitert werden können. Ausklappbare Inhalte können über diese Weise mit aria-expanded direkt im Inhalt mit den Werten true oder false gekennzeichnet werden.
Die ARIA-Attribute müssen in vielerlei Hinsicht mit Bedacht eingesetzt werden. Eine unsachgemäße Verwendung kann die Bedienung der Webseite für Menschen mit einer Behinderung sogar erschweren. Richtig eingesetzt bringen sie die Barrierefreiheit im Internet aber weit voran und machen die Webseite nicht nur visuell zugänglich, sondern auch akustisch oder taktil.
