Was ist der Unterschied zwischen ARIA und semantischem HTML?
Kurz und einfach erklärt
Gutes HTML sagt selbst, was ein Teil ist. Ein Knopf ist dann ein Knopf. Eine Überschrift ist eine Überschrift. Das Programm zum Vorlesen erkennt das von allein.
ARIA ist eine Ergänzung für schwierige Teile, etwa Reiter oder Menüs. ARIA gibt nur Bedeutung dazu. Die Bedienung muss man selbst bauen.
Die Regel lautet: Kein ARIA, wenn ein normales Element reicht.
Semantisches HTML transportiert Bedeutung direkt über native Elemente: Eine <button> ist für den Screenreader ein Button, eine <nav> eine Navigation, eine <h2> eine Überschrift der zweiten Ebene. Diese Elemente bringen Rolle, Zustand und Tastaturverhalten von Haus aus mit, ganz ohne Zusatzcode.
ARIA (Accessible Rich Internet Applications) ist eine Ergänzung für Fälle, in denen natives HTML nicht ausreicht, etwa bei komplexen Widgets wie Tabs, Akkordeons, Dropdowns oder Live-Regionen. ARIA fügt nur Semantik hinzu, ändert aber kein Verhalten: Eine mit role="button" ausgezeichnete <div> muss Tastaturbedienung und Fokus weiterhin selbst implementieren.
Die erste Regel von ARIA lautet daher: Kein ARIA verwenden, wenn ein natives Element die Aufgabe erfüllt (Quelle: W3C WAI). Wie wir das in der Praxis umsetzen, zeigen wir bei der barrierefreien Webentwicklung.