ARIA

Accessible Rich Internet Applications (ARIA) ist eine Sammlung von Rollen und Attributen, die Möglichkeiten definieren, Webinhalte und Webanwendungen (insbesondere solche, die mit JavaScript entwickelt wurden) für Menschen mit Behinderungen zugänglicher zu machen.

Es ergänzt HTML, sodass Interaktionen und Widgets, die häufig in Anwendungen verwendet werden, unterstützenden Technologien übermittelt werden können, wenn es ansonsten keinen Mechanismus gibt. Beispielsweise ermöglicht ARIA zugängliche JavaScript-Widgets, Formulareingabehinweise und Fehlermeldungen, Live-Inhaltsaktualisierungen und mehr.

Die erste Regel der ARIA-Nutzung lautet: "Wenn Sie ein natives HTML-Element oder Attribut verwenden können, das die benötigte Semantik und das gewünschte Verhalten bereits integriert hat, anstatt ein Element umzuwidmen und eine ARIA-Rolle, einen Zustand oder eine 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 wird 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 minimalen und maximalen Werte für den Fortschrittsbalken an, und das Attribut aria-valuenow beschreibt den aktuellen Zustand und muss daher mit JavaScript aktualisiert werden.

Zusätzlich zur 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 Nutzer nicht unterstützender Technologien verfügbar sind, müssen auch für unterstützende Technologien verfügbar gemacht werden. Ebenso sollten keine Funktionen enthalten sein, die nur für Benutzer unterstützender Technologien zugänglich sind und nicht für diejenigen, die keine unterstützenden Technologien nutzen. Der oben erwähnte Fortschrittsbalken muss gestylt werden, um wie ein Fortschrittsbalken auszusehen.

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

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