Manche Seiten tragen technische Zusatz-Hinweise wie Konfetti: an jedem zweiten Element noch eine zusätzliche Beschriftung für Screenreader, gut gemeint, damit die Seite zugänglicher wird. Im Vorlese-Programm kommt dann oft das Gegenteil an, eine Seite voller doppelter Ansagen, die schwerer zu bedienen ist als eine ganz ohne diese Extras.
ARIA ist das Werkzeug, mit dem Deine Agentur einer Seite genau solche Zusatz-Hinweise mitgibt. Es ist nützlich, aber scharf. Als Betreiberin oder Betreiber musst Du keine Zeile davon selbst schreiben, Du musst nur erkennen, ob es sparsam und richtig eingesetzt wurde, und das geht ohne einen einzigen Blick in den Quelltext.
Was ARIA dem Nutzer überhaupt bringt
ARIA steht für Accessible Rich Internet Applications, übersetzt etwa „zugängliche, interaktive Web-Anwendungen". Dahinter steckt eine Reihe unsichtbarer Hinweise, die ein Screenreader vorliest, ein normaler Besucher aber nie zu Gesicht bekommt. Sie sagen der Vorlese-Software, womit ein Nutzer es gerade zu tun hat.
Ein blinder Besucher hört dadurch statt „Schaltfläche" jetzt „Suche öffnen, Schaltfläche". Er erfährt, ob ein Menü gerade auf- oder zugeklappt ist, noch bevor er es anklickt. Und wenn sich nach dem Absenden eines Formulars eine Meldung einblendet, wird sie ihm sofort vorgelesen, statt unbemerkt am Bildschirm zu erscheinen. Wie solche Live-Regions Statusmeldungen automatisch hörbar machen, vertieft der eigene Beitrag dazu.
Der Gewinn ist also Orientierung. Gut gesetztes ARIA macht aus einer stummen Bedienfläche eine, die sich selbst erklärt. Schlecht gesetztes tut das Gegenteil und führt den Nutzer in die Irre, weil es ihm etwas verspricht, das nicht stimmt.
Warum sauberes HTML fast immer reicht
Die wichtigste Regel kommt überraschend: In den meisten Fällen braucht eine Seite gar kein ARIA. Eine Standard-Webseite mit Text, Bildern, einer Navigation und einem Kontaktformular kommt mit sauberem, semantischem Aufbau erstaunlich weit. Die Bedeutung steckt dann schon in den richtigen Bausteinen, ohne dass etwas nachgereicht werden muss.
Genau dort liegt das Fundament. Wer die Bereiche einer Seite von vornherein korrekt benennt, liefert dem Screenreader die Orientierung gratis mit. Dazu gehört auch, die Sprache der Seite per lang-Attribut auszuzeichnen, damit der Screenreader sie korrekt vorliest. Wie das aussieht, beschreibt der Beitrag zu semantischem HTML, das vorliest.
ARIA setzt erst dann ein, wenn diese soliden Bausteine an ihre Grenze stoßen. Es ist eine Verfeinerung obendrauf, kein Ersatz für ordentliche Arbeit darunter. Eine Agentur, die zuerst nach ARIA greift und das Fundament überspringt, hat die Reihenfolge verdreht.
Wo ARIA in der Praxis spürbar wird
Nötig wird die Verfeinerung bei selbstgebauten Bedien-Elementen, die es als fertigen Baustein nicht gibt. Dort, wo eine normale Seite endet und etwas Interaktives beginnt, schließt ARIA die Lücke zwischen dem, was Du siehst, und dem, was die Software ansagen kann.
- Aufklapp-Menüs: Der Screenreader sagt an, ob das Menü gerade offen oder geschlossen ist.
- Tab-Systeme: Der Nutzer hört, welcher Reiter aktiv ist und wie viele es gibt.
- Dialog-Fenster: Ein eingeblendetes Fenster wird als solches angekündigt, statt sich klammheimlich über den Inhalt zu legen.
- Live-Meldungen: Eine Fehlermeldung im Formular oder ein „gespeichert"-Hinweis wird sofort vorgelesen.
Der Klassiker ist der Icon-Knopf ohne Text. Optisch genügt das Lupen-Symbol, jeder sehende Besucher versteht es. Der Screenreader liest aber nur „Schaltfläche" vor, ohne zu verraten, wofür. Hier gibt ARIA dem Knopf einen Namen, sodass er sich als das vorliest, was er tut. Wie Du solche Zusatzinfos und kurzen Hilfetexte so beschriftest, dass sie für alle Besucher ankommen, zeigt Dir der Beitrag zu barrierefreien Tooltips und Hilfetexten.
Auch barrierefreie Formulare profitieren spürbar. Erscheint eine Fehlermeldung erst nach dem Absenden, sorgt eine solche Live-Ansage dafür, dass ein blinder Nutzer sie wahrnimmt, statt ratlos vor einem stillen Formular zu sitzen.
Woran Du gutes und schlechtes ARIA erkennst
Du musst kein Wort Programmierung lesen, um die Qualität zu beurteilen. Der ehrlichste Test sitzt direkt auf Deinem Rechner: Schalte den eingebauten Screenreader ein. Auf dem Mac heißt er VoiceOver, unter Windows liefert das kostenlose NVDA dasselbe Erlebnis. Bedien Deine Seite einmal nur mit der Tastatur und dem Ohr.
Gut gesetztes ARIA fällt dabei gar nicht auf, weil alles stimmig vorgelesen wird. Schlecht gesetztes hörst Du sofort: Eine Ansage kommt doppelt, ein Knopf nennt sich „eingeklappt", obwohl das Menü sichtbar offen steht, oder ein Bedien-Element bleibt stumm und lässt sich gar nicht ansteuern.
Drei Warnzeichen mit dem Ohr lohnen sich besonders. Verdoppelte Ansagen deuten auf überflüssige Zusatz-Hinweise hin. Ein Zustand, der nicht zur Sichtbarkeit passt, verrät einen Hinweis, der nie aktualisiert wird. Und ein Element, das der Screenreader komplett überspringt, ist meist fälschlich ausgeblendet worden.
Welches Werkzeug Dir die Bewertung abnimmt
Neben dem Hörtest gibt es Prüf-Werkzeuge, die im Browser laufen und Dir eine verständliche Liste ausgeben, statt Code. Sie melden in Klartext, wenn ein Hinweis doppelt vergeben oder am falschen Ort gelandet ist, und ersparen Dir das Raten.
Die kostenlose Erweiterung WAVE und der in Chrome eingebaute Lighthouse-Bericht sind ein guter Einstieg, ebenso die axe-Prüfung. Sie färben problematische Stellen direkt auf der Seite ein und schreiben in normaler Sprache dazu, was nicht stimmt. Welche dieser Werkzeuge wofür taugen, ordnet der Beitrag zum Testen der Barrierefreiheit ein.
Ein realistischer Ablauf: erst der Hörtest für den Gesamteindruck, dann ein automatisches Werkzeug für die Detail-Liste. Die Maschine findet jede überflüssige Markierung, Dein Ohr findet, was sich tatsächlich schlecht bedient. Beides zusammen ergibt ein ehrliches Bild.
Was Du Deiner Agentur sagen solltest
Damit ARIA richtig eingesetzt wird, brauchst Du nur eine klare Ansage an Deinen Dienstleister: Bitte zuerst mit den passenden Bausteinen bauen und Zusatz-Hinweise nur dort ergänzen, wo eine Bedeutung sonst verloren geht. Sparsam, aber gepflegt, schlägt viel und nachlässig.
Drei Fragen helfen Dir im Gespräch weiter. Lässt sich jedes Bedien-Element allein mit der Tastatur erreichen und auslösen? Werden Zustände wie „Menü offen" auch dann angesagt, wenn sie sich ändern? Und ist die Seite mit einem Screenreader gegengehört worden, nicht nur am Bildschirm geprüft?
Diese Anforderungen gehören am besten schriftlich ins Angebot, nicht erst in die Nachbesserung. Sie fügen sich in die größeren Grundlagen der Barrierefreiheit ein: Erst die robuste Bauweise, dann die Verfeinerung an den wenigen Stellen, an denen es wirklich kompliziert wird.
Fazit — weniger, aber richtig
ARIA ist kein Etikett, das eine Seite barrierefrei stempelt, sobald man es oft genug verteilt. Jeder Zusatz-Hinweis ist ein Versprechen an die Vorlese-Software, und ein falsches Versprechen wiegt schwerer als ein fehlendes. Deshalb gilt: lieber wenig und gepflegt als viel und verwahrlost.
Du brauchst dafür keine Code-Kenntnisse. Hör Deine Seite einmal mit dem Screenreader ab, lass ein Prüf-Werkzeug drüberlaufen und gib Deiner Agentur die richtige Reihenfolge mit auf den Weg. So wird aus gut gemeint auch gut gemacht.