ARIA

Die erste Regel von ARIA lautet: "Wenn Sie ein natives HTML-Element oder Attribut verwenden können, das die von Ihnen benötigte Semantik und das Verhalten bereits eingebaut hat, anstatt ein Element neu zu interpretieren und eine ARIA-Rolle, Zustand oder Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie das."

Hier ist das Markup für ein Fortschrittsbalken-Widget:

<div
  id="percent-loaded"
  role="progressbar"
  aria-valuenow="75"
  aria-valuemin="0"
  aria-valuemax="100"></div>

Dieser Fortschrittsbalken ist mit einem <div> erstellt, das keine Bedeutung hat. Wir fügen ARIA-Rollen und -Eigenschaften hinzu, um Bedeutung hinzuzufügen. In diesem Beispiel informiert das Attribut role="progressbar" den Browser, dass dieses Element tatsächlich ein JavaScript-gesteuertes Fortschrittsbalken-Widget ist. Die Attribute aria-valuemin und aria-valuemax geben die Minimal- und Maximalwerte für den Fortschrittsbalken an, und das Attribut aria-valuenow beschreibt den aktuellen Zustand und muss daher mit JavaScript aktualisiert werden.

Neben der direkten Platzierung im Markup können ARIA-Attribute dem Element hinzugefügt und dynamisch mit JavaScript-Code wie diesem aktualisiert werden:

// Find the progress bar <div> in the DOM.
const progressBar = document.getElementById("percent-loaded");

// Set its ARIA roles and states,
// so that assistive technologies know what kind of widget it is.
progressBar.setAttribute("role", "progressbar");
progressBar.setAttribute("aria-valuemin", 0);
progressBar.setAttribute("aria-valuemax", 100);

// Create a function that can be called at any time to update
// the value of the progress bar.
function updateProgress(percentComplete) {
  progressBar.setAttribute("aria-valuenow", percentComplete);
}

Alle Inhalte, die für Benutzer nicht-assistiver Technologien verfügbar sind, müssen auch für assistive Technologien verfügbar gemacht werden. Ebenso sollten keine Funktionen aufgenommen werden, die nur für Benutzer assistiver Technologien zugänglich sind und nicht für diejenigen, die keine solchen Technologien verwenden. Der oben genannte Fortschrittsbalken muss gestylt werden, damit er wie ein Fortschrittsbalken aussieht.

Es wäre viel einfacher gewesen, das native <progress>-Element zu verwenden:

<progress id="percent-loaded" value="75" max="100">75 %</progress>

Wie jede andere Webtechnologie gibt es unterschiedliche Grade der Unterstützung für ARIA. Die Unterstützung basiert auf dem verwendeten Betriebssystem und Browser sowie der Art der assistiven Technologien, die damit interagieren. Außerdem sind die Versionen des Betriebssystems, des Browsers und der assistiven Technologien Einflussfaktoren. Ältere Softwareversionen unterstützen möglicherweise bestimmte ARIA-Rollen nicht, haben nur teilweise Unterstützung oder melden deren Funktionalität falsch.

Es ist auch wichtig zu beachten, dass einige Menschen, die auf assistive Technologien angewiesen sind, zögern, ihre Software zu aktualisieren, aus Angst, die Fähigkeit zu verlieren, mit ihrem Computer und Browser zu interagieren. Aus diesem Grund ist es wichtig, semantische HTML-Elemente zu verwenden, wann immer dies möglich ist, da semantisches HTML weit bessere Unterstützung für assistive Technologien hat.

Es ist auch wichtig, Ihr erstelltes ARIA mit tatsächlichen assistiven Technologien zu testen. Dies liegt daran, dass Browser-Emulatoren und -Simulatoren für Tests auf vollständige Unterstützung nicht wirklich effektiv sind. Ebenso sind Proxy-Lösungen für assistive Technologien nicht ausreichend, um die Funktionalität vollständig zu garantieren.

Die ARIA-Referenz ist eine umfassende Liste von ARIA-Attributen und -Rollen, die auf MDN dokumentiert sind.

ARIA-Rollen

ARIA-Rollen können verwendet werden, um Elemente zu beschreiben, die in HTML nicht nativ existieren oder die existieren, aber noch keine breite Browserunterstützung haben.

ARIA-Zustände und -Eigenschaften (Attribute)

ARIA-Attribute ermöglichen die Modifizierung von Zuständen und Eigenschaften eines Elements, wie sie im Barrierefreiheitsbaum definiert sind.

Die ARIA-Leitfäden und Anleitungsseiten sind Ressourcen, die Ihnen helfen, die Zugänglichkeit von Webseitenfunktionen wie Tabellen, Formularen und Tastaturnavigation zu verbessern.

WAI-ARIA-Spezifikation

Die W3C-Spezifikation selbst.

WAI-ARIA-Autorenschaftspraktiken

Die offiziellen Best-Practice-Dokumente zur besten Vorgehensweise bei der Implementierung von ARIA in gemeinsamen Widgets und Interaktionen. Eine ausgezeichnete Ressource.

JavaScript-Widgets mit Tastaturnavigation schreiben

Eingebaute Elemente wie <input>, <button> usw. haben eingebaute Tastaturzugänglichkeit. Wenn Sie diese mit <div>s und ARIA „faken“, müssen Sie sicherstellen, dass Ihre Widgets tastaturzugänglich sind.

Live-Bereiche

Live-Bereiche geben Bildschirmlesern Vorschläge, wie Änderungen an den Inhalten einer Seite behandelt werden sollen.

Die folgenden Vorträge sind eine großartige Möglichkeit, ARIA zu verstehen:

ARIA, Accessibility APIs und codieren, als ob es Ihnen wichtig wäre! – Léonie Watson