ARIA

Accessible Rich Internet Applications (ARIA) ist eine Sammlung von Rollen und Attributen, die Möglichkeiten definieren, um 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, an unterstützende Technologien übergeben werden können, wenn es sonst keinen Mechanismus gibt. Zum Beispiel ermöglicht ARIA zugängliche JavaScript-Widgets, Formularhinweise und Fehlermeldungen, Live-Inhaltsaktualisierungen und mehr.

Die erste Regel der ARIA lautet: "Wenn Sie ein natives HTML-Element oder Attribut mit den Semantiken und dem Verhalten, die Sie benötigen, bereits verwenden können, anstatt ein Element umzuwidmen und eine ARIA-Rolle, einen Zustand oder eine Eigenschaft hinzuzufügen, um es zugänglich zu machen, dann tun Sie dies."

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 zu verleihen. In diesem Beispiel informiert das Attribut role="progressbar" den Browser darüber, dass dieses Element tatsächlich ein JavaScript-basiertes Fortschrittsbalken-Widget ist. Die Attribute aria-valuemin und aria-valuemax spezifizieren die minimalen und maximalen Werte des Fortschrittsbalkens, 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 mithilfe von 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 ohne unterstützende Technologien verfügbar sind, müssen auch für unterstützende Technologien zugänglich gemacht werden. Ebenso sollten keine Funktionen ausschließlich für Benutzer von unterstützenden Technologien enthalten sein, die nicht auch für diejenigen zugänglich sind, die keine unterstützenden Technologien nutzen. Der oben genannte Fortschrittsbalken muss gestylt werden, damit er wie ein Fortschrittsbalken aussieht.

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

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