ARIA schlägt HTML Aria-label bei verlinkten Grafiken

4 Platzhalter-Avatare

Webseiten berücksichtigen heute zunehmend Accessible Rich Internet Applications (ARIA). Eine Beobachtung der letzten Jahre ist aber der überflüssige Einsatz von ARIA-Attributen. Es beginnt bei redundanten Auszeichnungen wie <button role=“button“>, was im Prinzip harmlos ist, und endet bei <body role=“application“>, was in vielen Situationen dazu führt, dass eine Webseite von Screenreadern nicht mehr gelesen werden kann. Eine weitere Problematik, die in nachfolgenden Beitrag diskutiert wird, ist dass ARIA-Attribute zur Bezeichnung von Elementen vergleichbaren HTML-Techniken überlegen sind.

Situation

In einer Social-Media-Umgebung können Nutzer einen Avatar aus einer Liste von Avataren auswählen. Diese Grafiken besitzen alle einen Alternativtext der Form alt=“Avatar 123″. Die Avatare werden als Links in einer Liste bereitgestellt, wobei die Links eine (nur für Screenreader zugängliche) Anweisung mit aria-label erhalten:

<li>
<a aria-label="Diesen Avatar auswählen" href="/#123">
<img alt="Avatar 123" src="/avatare/123.png">
</a>
</li>

Problem

Wenn ein Screenreader die (gleichartigen) Links nacheinander fokussiert, lauten die Linktexte alle „Diesen Avatar auswählen“ und der Alternativtext wird ignoriert. Diese „Berechnung“ des Linktextes ist nach HTML-AAM auch korrekt.

In einem solchen Konstrukt, bei der ein <img> mit alt-Attribut verfügbar ist, bietet sich fast zwingend an, einen funktionalen Alternativtext einzusetzen:

<img alt="Avatar 123 auswählen" src="/avatare/123.png"/>

Und auf das aria-label-Attribut im Link zu verzichten.

Alternativ kann das aria-label-Attribut für den Link angepasst werden:

<a aria-label="Avatar 123 auswählen" href="/#123"> … </a>

In diesem Fall ist es egal, was im alt-Attribut der Grafik steht – der Text innerhalb des Links (einschließlich Alternativtext) wird bei der Berechnung des Linktextes überschrieben.

ARIA ist unscheinbar

Beim Einsatz von ARIA müssen zwei Aspekte besonders von der Webentwicklung berücksichtigt werden:

  1. ARIA beeinflusst weder die visuelle Gestaltung noch die Funktionalität im Browser. Vielmehr handelt es sich bei den ARIA-Attributen um Anweisungen an den Browser, wie der Accessibility-Tree des Betriebssystems zu befüllen ist. Entsprechend muss der korrekte (oder nicht korrekte) Einsatz im Accessibility-Tree oder mit einem Screenreader überprüft werden.
  2. Obwohl ARIA insbesondere bei Widgets erforderlich ist, so sind sehr viele ARIA-Techniken Reparaturtechniken für schlechten HTML-Code. Im Beispiel oben ist ARIA eigentlich völlig überflüssig, weil die Lösung mit einer HTML-Technik problemlos umgesetzt werden kann. Wenn hingegen die Grafik per CSS eingebunden wäre, könnte kein alt-Attribut eingesetzt werden; das wäre ein Punkt, an der das aria-label-Attribut in Frage kommt. Generell sind Lösungen mit HTML ausnahmslos zu bevorzugen (die erste Regel für den Einsatz von ARIA!).

Hinterlasse eine Antwort