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!).

4 Gedanken zu “ARIA schlägt HTML – Aria-label bei verlinkten Grafiken

  1. Hallo Jan,

    ist ja schon ein paar Tage alt der Beitrag.
    Ich bin gerade durch ein neu übernommenes Projekt auf diese ARIA Bereich aufmehrsam geworden.
    Hier wird SEO-Texte in den nicht sichtbaren Bereich verschoben und die Entwicklerin meint, das wäre in Ordnung.
    Ich als SEO finde dies jedoch bedenklich.
    Was meinst Du dazu? Darf mann durch dieses DIV Text „wegschieben:

    .blindhelper {
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;

    Gruß Christian

    1. Gut ist das nicht. Wenn der Inhalt aus dem Viewport geschoben wird, dann ist das im Screenreader alles lesbar. Man könnte den Inhalt zusätzlich mit aria-hidden=“true“ kennzeichnen, damit er von Screenreadern nicht gelesen wird. Das geht aber solange gut, bis in diesem aus dem Viewport geschobenen Bereich ein Link oder ein anderes fokussierbares Element steht – das darf man im professionellen Umfeld einfach nicht machen. Siehe dazu die vierte Regel auf
      http://www.w3.org/TR/using-aria/#4thrule

    1. Hi Achim,

      ja, das ist schon richtig. Hier ging es aber um das Beispiel eines Links. aria-label muss für bestimmte Sachen eingesetzt werden. Dazu zählen nicht eindeutige Seitenregionen und Komponenten ohne Namen und ohne Beschriftung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.