Alternativtext ohne alt-Attribut Stand der Screenreader-Unterstützung in 2016

Das Gesicht der Mona Lisa mit Sprechblasentext: aria-labelledby > aria-label > alt > title

Nach dem Entwurf der HTML Accessibility API Mappings 1.0 (Stand: 14.12.2016) sollen Browser den Alternativtext bzw. den „accessible name“ einer Grafik anhand der folgenden Attribute berechnen:

  • Der „accessible name“ setzt sich aus den Texten zusammen, die mit dem aria-labelledby-Attribut referenziert werden.
  • Ist kein aria-labelledby-Attribut vorhanden, bestimmt ein aria-label-Attribut den Alternativtext.
  • Ist weder ein aria-labelledby- noch ein aria-label-Attribut vorhanden, bestimmt ein alt-Attribut den Alternativtext.
  • Ist weder ein aria-labelledby- noch ein aria-label- noch ein alt-Attribut vorhanden, bestimmt ein title-Attribut den Alternativtext.
  • Alternativtexte sind für Screenreader wichtig. In der Regel identifiziert ein Screenreader eine Grafik (z.B. mit „Grafik“ oder „Bild“) und fügt den Alternativtext hinzu, so dass eine Grafik beispielsweise mit „Grafik [Alternativtext]“ an den Nutzer übermittelt wird. Die anderen Attribute werden im Gegensatz zum alt-Attribut erst in jüngerer Zeit als Technik für den Alternativtext vom W3C empfohlen – was auch daran zu erkennen ist, dass der einleitend verlinkte Webstandard derzeit nur ein Entwurf ist. Dennoch unterstützen Browser bereits heute die alternativen Techniken für die Vergabe eines Alternativtextes.

    Wo kein alt-Attribut ist

    Mit diesem Beitrag soll keinesfalls vom alt-Attribut abgeraten werden. Im Gegenteil: Auf Webseiten ist fast ausnahmslos das alt-Attribut Pflicht für eine Grafik. Dennoch kann es in Einzelfällen dazu kommen, dass der Alternativtext mit einer der drei anderen Techniken gesetzt werden muss.

    Wenn Grafiken ein alt-Attribut mit Text besitzen, dann erfahren vor allem Screenreader-Nutzer den Inhalt des alt-Attributs. Darüber hinaus zeigen Browser den Inhalt des alt-Attributs dann, wenn die Anzeige von Grafiken im Browser deaktiviert ist oder wenn eine Grafik nicht verfügbar ist. Für die anderen drei Attribute gilt:

    • aria-labelledby referenziert einen anderen (meist sichtbaren) Text auf der Seite. Mit aria-labelledby=“id1“ kann ein Text
      <span id=“id1“>Text, der den Inhalt der Grafik wiedergibt</span>
      als Alternativtext für die Grafik herangezogen werden.
    • Mit aria-label=“Alternativtext“ anstelle des alt-Attributs ist für Grafiken nichts gewonnen. Das Attribut funktioniert im Prinzip wie ein alt-Attribut, nur wird der Text nicht im Browser angezeigt, wenn Grafiken nicht angezeigt werden.
    • Das title-Attribut bewirkt einen Tooltip für Mausnutzer. Weil das Attribut schon immer problematisch für Tastatur- und Touch-Screen-Nutzer war, sollte das title-Attribut nicht genutzt werden. Screenreader sollen aber nach den HTML Accessibility API Mappings 1.0 den Inhalt des title-Attributs als Fallback für einen fehlenden Alternativtext heranziehen; außerdem, wenn ein Alternativtext vorhanden ist, sollen Screenreader den Inhalt des title-Attributs als Beschreibung für die Grafik heranziehen.

    Damit eine Webseite HTML-konform werden kann, ist ein alt-Attribut für jede Grafik erforderlich. Lediglich wenn eine Grafik zusammen mit einer Bildunterschrift (<figcaption>) in einem gruppierenden <figure>-Element steht, ist das alt-Attribut für die Konformität nicht notwendig. Wenn die Bildunterschrift ergänzt werden muss, um die Inhalte der Grafik zu transportieren, dann kann aber das alt-Attribut dennoch für die Grafik eingesetzt werden:

    <figure>
    <img src="bild.png">
    <figcaption>Bildunterschrift</figcaption>
    </figure>

    Bei solchen Grafiken mit Bildunterschrift kann der Alternativtext für die Grafik ersatzweise auch mit einem aria-labelledby-, aria-label- oder title-Attribut zugewiesen werden (falls erforderlich). Normalerweise gibt es aber keinen Grund, auf das alt-Attribut zu verzichten, wenn die Grafik einen Alternativtext benötigt.

    Eine weitere Situation, in der ein Alternativtext ohne alt-Attribut zugewiesen werden muss, ist wenn irgendwelche Inhalte einer Webseite die Rolle einer Grafik erhalten; in diesem Fall kann kein alt-Attribut zugewiesen werden:

    <p>Bewertung: <span role="img" aria-label="4 von 5 Sternen">★★★★☆</span></p>

    Anmerkung: Wer die vier schwarzen Sterne in einer Sprachausgabe liest, darf nicht überrascht sein, wenn nur drei Sterne ausgegeben werden. Screenreader haben Voreinstellungen, um sich wiederholende Zeichen zu unterdrücken. Eine häufige Einstellung ist, dass wenn mehr als drei Zeichen aufeinander folgen, das Zeichen nur drei Mal über die Sprachausgabe geschickt werden.

    Der Browser sollte das <span>-Element im Accessibility-Tree des Betriebssystems als Grafik ablegen und benötigt entsprechend ein Alternativtext („accessible name“), was mit einem der Attribute aria-labelledby, aria-label oder title für das <span>-Element erfolgt.

    Testszenarien

    Es werden zwei Testseiten in verschiedenen Browsern und Screenreadern geprüft:

    1. Auf der ersten Testseite wird eine Grafik in einem <figure>-Element gezeigt, und der Alternativtext („accessible name“)wird mit den aria-labelledby-, aria-label bzw. title-Attribut zugewiesen. Die drei Situationen werden jeweils durch eine zweite Grafik ergänzt, die mit einem Alternativtext in einem alt-Attribut erweitert wird.

      Die erwarteten Ergebnisse sind:

      1. Die jeweils erste Grafik (ohne alt-Attribut) wird als Grafik und vor allem mit dem „accessible name“ identifiziert.
      2. Die jeweils zweite Grafik (zusätzlich mit einem Text in einem alt-Attribut) wird als Grafik identifiziert. Dann gibt es zwei Fälle:
        • Im Fall von aria-labelledby und aria-label wird der Alternativtext durch die ARIA-Attribute bestimmt und das alt-Attribut wird ignoriert.
        • Im Fall des title-Attributs wird der Alternativtext durch das alt-Attribut bestimmt (das title-Attribut wird derzeit in keinem der getesteten Screenreader als Beschreibung für die Grafik herangezogen).
    2. Auf der zweiten Testseite wird das Beispiel oben mit den fünf Sternen dreimal angezeigt mit jeweils einem aria-labelledby-, einem aria-label- und einem title-Attribut.

      Das erwartete Ergebnis ist, dass die Grafiken als Grafik und jeweils mit dem „accessible name“ identifiziert werden.

    Getestete Browser und Screenreader

    Auf Windows 10 wurden die folgenden Browser getestet:

    • Internet Explorer 11,
    • Microsoft Edge 38.14,
    • Firefox 48 und
    • Chrome 54

    Folgende Screenreader wurden getestet:

    • JAWS 17,
    • Cobra 11.1,
    • Window Eyes 9.5.3.0,
    • NVDA 2016.3,
    • Narrator unter Win10 und
    • ChromeVox 53 (nur auf Chrome).

    Darüber hinaus wurde Safari mit VoiceOver auf iOS 10.1 getestet.

    Ergebnisse

    Berechnung des Namens einer Grafik
    Attribute Internet Explorer Chrome Firefox Safari Edge
    Jaws 17 WindowEyes NVDA Cobra Narrator Jaws 17 WindowEyes NVDA chromeVox Cobra Narrator Jaws 17 WindowEyes NVDA Cobra Narrator Voiceover Narrator NVDA
    IMG mit aria-labelledby und Ohne alt Ja Ja Ja Nein Ja Ja Nein Ja Teilweise Ja Nein Ja Ja Ja Nein Ja Ja Nein Nein
    IMG mit aria-labelledby und mit alt=“Alternativtext“ Ja Ja Ja Nein Ja Ja Nein Ja Teilweise Ja Ja Ja Ja Ja Nein Ja Ja Nein Nein
    IMG mit aria-label und ohne alt Ja Ja Ja Ja Ja Ja Nein Ja Teilweise Ja Ja Ja Ja Ja Ja Ja Ja Nein Nein
    IMG mit aria-label und alt=“Alternativtext“ Ja Ja Ja Nein Ja Ja Nein Ja Teilweise Ja Ja Ja Ja Ja Nein Ja Ja Nein Nein
    IMG mit title und ohne alt Ja Ja Ja Ja Ja Ja Nein Ja Teilweise Ja Nein Ja Ja Ja Ja Ja Ja Nein Nein
    IMG mit title und alt=“Alternativtext“ Ja Ja Ja Ja Ja Ja Nein Ja Teilweise Ja Ja Ja Ja Ja Ja Ja Ja Nein Nein
    role=“img“ mit aria-labelledby Ja Nein Ja Ja Ja Ja Nein Ja Nein Ja Ja Ja Nein Ja Ja Ja Ja Nein Nein
    role=“img“ mit aria-label Ja Nein Ja Ja Ja Ja Nein Ja Nein Ja Ja Ja Nein Ja Ja Ja Ja Nein Nein
    role=“img“ mit title Nein Nein Nein Ja Ja Ja Nein Ja Nein Ja Ja Ja Nein Ja Ja Ja Ja Nein Nein

    Hinweise:

    • Bei den mit Teilweise gekennzeichneten Ergebnissen wurde der richtige Text herangezogen, aber die Grafik wurde nicht identifiziert.
    • Cobra hat Schwierigkeiten mit aria-labelledby und identifizierte zwar Grafiken, aber als Text wurde der Dateiname ausgegeben. Ist ein alt-Attribut vorhanden, wird dieser immer herangezogen.
    • Bei Window Eyes mit Chrome wird die Grafik vollständig ignoriert. Mit role=“img“ kommt Window Eyes nicht klar und ignoriert den Inhalt.
    • Mit Edge wurden die Grafiken zwar identifiziert, aber ohne Alternativtext.

    Schlussfolgerungen

    Window Eyes und Cobra schneiden in diesem Test nicht sehr gut ab. Da Cobra in Deutschland ein gängiger Screenreader ist (und z.B. in großen Organisationen immer wieder standardmäßig an Blindenarbeitsplätzen eingesetzt wird), sind die Techniken zur Bestimmung eines Alternativtexts für eine Grafik mit aria-labelledby und aria-label noch nicht zu empfehlen. Der Alternativtext muss nach wie vor mit einem alt-Attribut bestimmt werden. Die Formulierung der Alternativtexte sollte in Ergänzung zu vorhandenen Bildunterschriften vorgenommen werden (und nicht etwa eine Wiederholung der Bildunterschrift sein).

    Für Inhalte mit role=“img“ kann aria-labelledby und aria-label für den Alternativtext schon jetzt eingesetzt werden. Die fehlende Unterstützung durch Window Eyes bleibt dabei ein Makel, allerdings scheint dieser Screenreader in Deutschland kaum genutzt zu werden; zuverlässige Zahlen zu Marktanteilen von Screenreadern in Deutschland gibt es leider nicht.

    Das title-Attribut wird zwar immer besser als Alternativtext für Grafiken unterstützt, dennoch gibt es Einschränkung sowohl was die Unterstützung in Browsern als auch die Barrierefreiheit für Tastaturnutzer und Touch-Screen-Nutzer angeht. Deshalb wird vom title-Attribut generell abgeraten; es gehören bestenfalls unterstützende Informationen im title-Attribut.

    3 Reaktionen auf “Alternativtext ohne alt-Attribut – Stand der Screenreader-Unterstützung in 2016”

    1. Fritz

      Hallo Jan,
      gibt es bereits einen Validator, der die Ausnahme „figcaption“ kennt?

      Antworten

    Hinterlasse eine Antwort