ARIA

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

Die erste Regel der ARIA-Verwendung lautet: "Wenn Sie ein natives HTML-Element oder Attribut mit den Semantik- und Verhaltensweisen verwenden können, die Sie benötigen, anstatt ein Element zweckzuentfremden 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 hinzuzufügen. In diesem Beispiel informiert das Attribut role="progressbar" den Browser darüber, dass es sich bei diesem Element tatsächlich um ein JavaScript-gesteuertes Fortschrittsbalken-Widget handelt. Die Attribute aria-valuemin und aria-valuemax geben die Minimal- und Maximalwerte des Fortschrittsbalkens an, und aria-valuenow beschreibt den aktuellen Stand und muss daher mit JavaScript aktualisiert werden.

Neben dem direkten Einfügen in das 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 ohne assistive Technologien zugänglich sind, müssen auch für assistive Technologien verfügbar gemacht werden. Ebenso sollten keine Funktionen enthalten sein, die sich ausschließlich an Benutzer von assistiven Technologien richten, die nicht auch für jene zugänglich sind, die keine assistiven Technologien verwenden. Der oben genannte 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>