ARIA

ARIAARIA (Accessible Rich Internet Applications) ist ein Standard, der Rollen und Attribute bereitstellt, um Webinhalte für assistive Technologien zugänglicher zu machen, wenn natives HTML allein nicht ausreicht.Zum Glossareintrag → ergänzt HTMLHyperText Markup Language (HTML) ist die Auszeichnungssprache für Webseiten. Mit ihr werden Struktur und Inhalt einer Seite definiert, etwa Überschriften, Absätze, Links und Bilder.Zum Glossareintrag → um Rollen und Attribute (etwa role oder aria-label), die assistiven Technologien zusätzliche Informationen liefern. Es ist vor allem bei komplexen Komponenten nützlich, für die es kein passendes natives Element gibt, zum Beispiel:

• Tabs,
• Modals und Dialoge,
• Accordions und dynamische Menüs.

Die erste Regel von ARIA lautet aber: Wenn ein natives HTML-Element die benötigte Bedeutung und das Verhalten bereits mitbringt, soll dieses genutzt werden, statt es mit ARIA nachzubauen. Kurz: erst natives HTML, dann ARIA.

Viele ARIA-Angaben sind zudem redundant. Ein <nav> hat seine Rolle bereits implizit, ein zusätzliches role="navigation" ist meist überflüssig. Wird ARIA eingesetzt, müssen auch Tastaturbedienung und Fokusmanagement korrekt umgesetzt sein.

Die erste ARIA-Regel #

Native HTML-Semantik hat Vorrang. Ein echtes <button>, <nav> oder <dialog> bringt Tastaturverhalten und Rollen gratis mit; ARIA-Attribute kaschieren nur Markup, das das falsche Element gewählt hat. Falsch eingesetztes ARIA ist schlechter als keines, weil es Verhalten ankündigt, das nicht existiert.

Wo ARIA SEO und KI-Lesbarkeit hilft #

Attribute wie aria-label geben textlosen Bedienelementen einen zugänglichen Namen — denselben Namen nutzen Crawler, um Icon-Links zu verstehen (ein Logo-Link mit Label «RankScan» zählt als AnkertextDer Ankertext ist der klickbare, sichtbare Text eines Links. Er gibt Nutzern und Suchmaschinen Hinweise darauf, worum es auf der verlinkten Zielseite geht.Zum Glossareintrag →). Landmark-RollenLandmark-Elemente sind semantische HTML-Bereiche wie , , und , die einer Seite klare Orientierungspunkte geben, besonders für Screenreader.Zum Glossareintrag → und Labels helfen maschinellen Lesern zudem, eine Seite zu segmentieren — das nützt assistiven Technologien und der Inhalts-Extraktion gleichermassen.