Das Prüfverfahren zur BITV


Sie sind hier: BITV-Test > Liste der Erfolgskriterien > Prüfkriterium 1.1.1a (1 von 49)


zum WCAG-Test wechseln


Blättern: zum nächsten Prüfschritt zum letzten Prüfschritt

Prüfschritt 1.1.1a
Alternativtexte für Bedienelemente

Technische Angaben

Version bis 10.07.2017 | Aktuell
BITV-Bedingung 1.1.1 Nicht-Text-Inhalte
WCAG-Erfolgskriterium 1.1.1 Nicht-Text-Inhalte
Bewertungsalternativen ja / eher erfüllt / teilweise erfüllt / eher nicht erfüllt / nein / nicht anwendbar
Gewichtung hohes Gewicht (3 Punkte)
Bezieht sich auf einzelne Webseite
Prüfschritt erfüllt Grafische Bedienelemente haben sinnvolle Alternativtexte.
Prüfschritt nicht anwendbar Grafische Bedienelemente sind nicht vorhanden.

Was wird geprüft?

Grafische Bedienelemente müssen mit Alternativtexten versehen werden. Alternativtexte für verlinkte Grafiken (Menüs, Logos) oder Teaserbilder sollen das Ziel des Links bezeichnen. Alternativtexte für grafische Schaltflächen (Buttons) sollen die Aktion bezeichnen, die der Button auslöst. Wenn Image maps eingesetzt werden, haben deren Bereiche (area) sinnvolle Alternativtexte.

Thema dieses Prüfschritts sind auch Textlinks, die per CSS durch Hintergrundbilder ersetzt werden sowie Textalternativen für Icon Fonts und SVGs

Warum wird das geprüft?

Für blinde Benutzer oder für Benutzer, die für schnellere Zugriffszeiten das Laden von Grafiken abschalten, sind Grafiken nicht zugänglich. Der Alternativtext (oder der via CSS durch ein Hintergrundbild ersetzte Text)Die Textalternative tritt dann an die Stelle der Grafik, ersie soll siedie Grafik ersetzen.

Icon Fonts sind Schriftarten, die Symbole statt Buchstaben beinhalten. Sie werden per CSS eingebunden und werden entweder von assistiven Technologien nicht ausgegeben oder es wird ein Unicode-Äquivalent wiedergegeben, was die Bedeutung im Kontext nicht vermittelt.

Wie wird geprüft?

1. Anwendbarkeit des Prüfschritts

Der Prüfschritt ist anwendbar, wenn Grafiken, Icon Fonts oder SVGs als Bedienelemente (Menüs, Logos, Teaserbilder oder Schaltflächen) eingesetzt werden.

2. Prüfung

2.1. Anzeige der Alternativtexte von Grafiken

  1. Die Seite im Internet Explorer aufrufen.
  2. Bedienelemente feststellen (zum Beispiel horizontale oder vertikale Navigationsleisten, Logo, Banner, Teaserbilder, grafische Schaltflächen).
  3. In der Web Accessibility Toolbar die Funktionen Images > Show Images oder Images > List Images nutzen und prüfen, ob die Bedienelemente mit äquivalenten Alternativtexten versehen sind (siehe 2.4).
  4. Mit der Funktion Images > Show Image Maps kann geprüft werden, ob die Seite Image maps enthält. Ist dies der Fall, weiter mit 2.2.

2.2. Anzeige von Image maps

Falls Image maps eingesetzt werden:

  • Mit der Funktion Images > Show Image Maps [new window] der Web Accessibility Toolbar prüfen, ob für jeden Link (area-Element der Image map, aktiver Bereich) und für das Gesamtbild der Image map ein gleichwertiger Alternativtext vorhanden ist (siehe 2.46).

Der Alternativtext für die gesamte Image map sollte in der Regel die Image map beschreiben, die Alternativtexte für die aktiven Bereiche (area-Elemente) sollten die Linkziele bezeichnen.

2.3. Textalternativen für Hintergrundgrafiken

Hintergrundgrafiken haben kein alt-Attribut, auf diese Weise kann also keine Textalternative hinterlegt werden.

Falls eine Hintergrundgrafik aber einen im HTML-Dokument tatsächlich vorhandenen Textlink ersetzt (CSS-Bildersetzungsverfahren), dann gilt dieser Textlink als Textalternative für die Hintergrundgrafik. Voraussetzung ist allerdings, dass ein geeignetes Bildersetzungsverfahren verwendet wurde (nicht display:none).

Grundeinstellung in Firefox
  1. Firefox aufrufen und im Menü Extras den Dialog Einstellungen... aufrufen. Den Reiter Inhalt wählen und im Bereich Schriftarten & Farben die Option Farben... wählen.
  2. Im Dialog Farben im Bereich Text und Hintergrund als Hintergrundfarbe eine Farbe wählen, die normalerweise eher selten für die Seitengestaltung verwendet wird (gut geeignet sind z.B. helle Rosa- oder Grüntöne). Im Select Ausgewählte Farben anstatt Farben der Seite verwenden die Option Immer wählen.
  3. Die Dialogfenster mit "OK" schließen.
Prüfung
  1. Seite in Firefox aufrufen.
  2. Prüfen, ob grafische Bedienelemente verschwinden. Das passiert, wenn sie als Hintergrundbilder eingebunden sind.
  3. Falls nicht redundante grafische Bedienelemente als Hintergrundbilder eingebunden sind: Prüfen, ob das Hintergrundbild einen tatsächlich im HTML-Dokument vorhandenen Textlink ersetzt. Wenn ein leeres a-Element ohne eingeschlossenen Text durch ein Hintergrundbild ersetzt wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.
  4. Falls Textlinks durch Hintergrundbilder ersetzt werden: Prüfen, welches Verfahren für die Bildersetzung verwendet wurde. Wenn display:none verwendet wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.
  5. Falls ein geeignetes Bildersetzungsverfahren verwendet wurde: Prüfen, ob der Textlink eine äquivalente Textalternative für das Hintergrundbild darstellt (siehe 2.46).

2.4 Textalternativen für Icon Fonts:

Beim Einsatz von Icon Fonts ist es nicht möglich, mittels alt-Attribut eine Textalternative zu hinterlegen.

Falls ein Bedienelement aus einem solchen Icon sowie einem HTML-Text besteht, der den Zweck des Bedienelements wiedergibt, dann gilt dieser Text als Alternative für das Icon. Es ist sinnvoll, das Icon selbst mit einer geeigneten Technik für Screenreader zu verstecken (z.B. aria-hidden="true"). Handelt es sich dabei um ein informationstragendes Icon ohne visuell sichtbaren Text (Stand-alone-Icon), so sollte eine Textalternative vorhanden sein. Dies kann beispielsweise Text sein, der mit einem geeigneten Verfahren versteckt ist (nicht display:none) oder der über ein aria-label bereitgestellt wird.

Prüfung
  1. Seite in Firefox aufrufen.
  2. Bedienelemente feststellen.
  3. Mit Firebug oder dem Seiteninspektor des Browsers prüfen, ob mit der CSS-Eigenschaft content für die Pseudoelemente :before oder :after Inhalt (Font Icons) eingebunden wird.
  4. Falls nicht redundante Icons eingebunden sind: Prüfen, ob eine HTML-Textalternative vorhanden ist. Ein leeres a-Element ohne eingeschlossenen Text, ist wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.
  5. Falls HTML-Textalternativen vorhanden sind, die nicht am Bildschirm sichtbar sind: Prüfen, welches Verfahren verwendet wurde, um diese zu verstecken. Wenn display:none verwendet wird, ist dies wie ein nicht vorhandenes oder leeres alt-Attribut zu werten.
  6. Falls ein geeignete CSS-Technik verwendet wurde: Prüfen, ob der Textlink eine äquivalente Textalternative für das Icon darstellt (siehe 2.4.6).
  7. Falls keine HTML-Textalternative vorhanden ist, prüfen, ob die Textalternative über ein title-Attribut oder aria-label bereitgestellt wird.
  8. Falls für die Icons Text ausgegeben wird (z.B. content: "k"), prüfen, ob das Icon mit einer geeigneten Technik für Screenreader versteckt wird (z.B. aria-hidden="true").

2.5 Textalternativen für Inline SVGs:

Prüfung
  1. Seite in Firefox aufrufen.
  2. Bedienelemente feststellen.
  3. Mit Firebug oder dem Seiteninspektor des Browsers prüfen, ob es sich um ein direkt in HTML eingebundene SVG handelt (Inline SVG).
  4. Prüfen, ob eine Textalternative vorhanden ist
  5. Prüfen, ob ein title-Element (für längere Beschreibungen das desc-Element) vorhanden ist und die dort hinterlegte Textalternative das Bild in angemessener Weise ersetzt (siehe 2.6). Das title- bzw. desc-Element sollte das erste Kindelement des Elternelements sein.
  6. Da SVG noch nicht ausreichend von allen Screenreader-Browser-Kombinationen unterstützt werden, prüfen, ob die Zugänglichkeit über WAI ARIA (role="img") gewährleistet ist: Mit Firebug oder dem Seiteninspektor des Browsers prüfen, ob im svg-Element mittels aria-labelledby auf das title-Element verwiesen wird.
  7. Wenn kein title- oder desc-Element eingesetzt wird, prüfen, ob über aria-label auf dem umschließenden Link eine Textalternative bereitgestellt wird.

2.4.6. Gleichwertige (äquivalente) Alternativtexte:

Entscheidend ist: die Seite soll benutzbar sein, wenn Grafiken, oder Bilder oder Objekte durch die entsprechenden Alternativtexte oder Textalternativen ersetzt sind.

In der Regel bedeutet das:

  • Bei Schriftgrafiken soll der Alternativtext den Text der Schriftgrafik wiederholen.
  • Bei Symbolen soll der Alternativtext das Symbol nicht beschreiben, sondern ersetzen. Also zum Beispiel Alternativtext "Kontakt" für einen Briefkasten, der als Symbol für die Kontakt-Seite verwendet wird.
  • Bei Objekten, die nicht angezeigt werden können, sollen der Alternativtext (ganz gleich ob Fallback-Text des Objekts oder skriptgeneriert) eine kurze Beschreibung oder Identifizierung bieten. Zusätzlich ist es sinnvoll, dass ein Skript auswertet, ob das Objekt wegen deaktiviertem JavaScript und/oder deaktiviertem Plugin nicht angezeigt werden kann, und eine entsprechende Meldung generiert. In diesem Fall ist es auch ausreichend, wenn das Objekt etwa durch eine Überschrift im unmittelbaren Kontext identifiziert wird.
  • Bei verlinkten Abbildungen gibt es folgende Möglichkeiten:
    • Beschreibung des abgebildeten Gegenstandes in den Alternativtext (wenn der abgebildete Gegenstand wichtig ist und daraus das Linkziel hervorgeht, zum Beispiel Logo)
    • Ziel des Links in den Alternativtext (nur wenn der abgebildete Gegenstand unwichtig ist, zum Beispiel Illustration)
    • Beschreibung des abgebildeten Gegenstandes und Ziel des Links in den Alternativtext (wenn beides wichtig ist). Generell gilt: Alternativtexte sollen kurz sein. Ausführliche Beschreibungen von Abbildungen sollen nicht im Alternativtext, sondern im Kontext der Abbildung zur Verfügung gestellt werden.

3. Hinweise

3.1. Alternativtexte für redundant verlinkte Abbildungen

Wenn eine Abbildung und ein danebenstehender Textlink auf dasselbe Ziel verweisen, muss geprüft werden, ob Abbildung und Text in den selben Link eingeschlossen sind.

Wenn Abbildung und Text innerhalb des selben Links stehen, soll der Alternativtext der Abbildung nicht den Text des Links wiederholen. Je nach Inhalt der Abbildung kann das alt-Attribut dann leer bleiben oder den abgebildeten Inhalt beschreiben, während der Linktext Zweck oder Ziel des Links beschreibt. Dies ist Gegenstand der Prüfkriterien 1.1.1b "Alternativtexte für Grafiken und Objekte" und 1.1.1c "Leere alt-Attribute für Layoutgrafiken".

Wenn Abbildung und Text zwei unabhängige Links auf dasselbe Ziel sind, dann kann das alt-Attribut dagegen nicht leer bleiben. Denn gängige Screenreader verlassen sich nicht darauf, daß leere alt-Attribute sachgerecht eingesetzt werden, sie behandeln bei Bedienelementen leere wie fehlende alt-Attribute und lesen den Dateinamen der Grafik / die URL der Zieldatei vor.

3.2. Unterstützung von SVGs durch assistive Technologien

Da SVG noch nicht ausreichend in allen Screenreader-Browser-Kombinationen unterstützt werden, sollte derzeit die Rolle über WAI-ARIA vermittelt werden (siehe 4.1.2a).

4. Bewertung

Nicht voll erfüllt:

  • Der Alternativtext fehlt beim Link zum Seitenanfang oder bei einem anderen für die Benutzung der Seite weniger wichtigen Bedienelement.
  • Alternativtexte sind missverständlich, undeutlich oder extrem lang.

Nicht erfüllt:

  • Der Alternativtext für ein wichtiges Bedienelement fehlt oder er ist unbrauchbar.

Einordnung des Prüfschritts

Formulierung BITV 2.0

1.1.1 Nicht-Text-Inhalte

Für jeden Nicht-Text-Inhalt, der dem Nutzer oder der Nutzerin präsentiert wird, ist eine Text-Alternative bereitzustellen, die den Zweck dieses Inhalts erfüllt.

Text-Alternativen müssen in den folgenden Fällen nicht bereitgestellt werden:

  • Es handelt sich um ein Kontrollelement oder um ein Element, das Eingaben der Nutzerin oder des Nutzers akzeptiert, und es ist ein Bezeichner vorhanden, der seinen Zweck beschreibt.
  • Es handelt sich um zeitgesteuerte Medien und Text-Alternativen, die bereits mindestens eine beschreibende Erklärung des Nicht-Text-Inhalts enthalten.
  • Es handelt sich um Tests oder Übungen, die im Nicht-Text-Format präsentiert werden müssen, und Text-Alternativen, die bereits mindestens eine beschreibende Erklärung des Nicht-Text-Inhalts enthalten.
  • Es sollen bestimmte sensorische Erfahrungen bewirkt werden und Text-Alternativen, die bereits mindestens eine beschreibende Erklärung des Nicht-Text-Inhalts enthalten.
  • Es soll erreicht werden, dass kein Computer, sondern eine Person auf den Inhalt zugreift und der Nicht-Text-Inhalt durch Text-Alternativen erklärt und beschrieben wird und alternative CAPTCHAs mit unterschiedlichem Ausgabemodus für verschiedene Arten der sensorischen Wahrnehmung bereitgestellt wird.
  • Es handelt sich um rein dekorative Elemente oder um Elemente, die nur der visuellen Gestaltung dienen, oder der Nicht-Text-Inhalt ist für die Nutzerin oder den Nutzer nicht sichtbar und diese Elemente sind so eingerichtet, dass sie von assistiven Technologien ignoriert werden können.

Abgrenzung zu anderen Prüfkriterien

Verlinkte Grafiken sind stets in diesem Prüfschritt zu bewerten. Das gilt auch dann, wenn die Grafiken neben der Information über das Linkziel auch noch eine andere Information vermitteln sollen, wie zum Beispiel auf die Startseite verlinkte Logos.

Einzige Ausnahme: Grafik und danebenstehender Text sind ein zusammengehöriger Link. Der Alternativtext bezieht sich dann nur auf die Grafik, die Prüfkriterien 1.1.1b "Alternativtexte für Grafiken und Objekte" oder 1.1.1c "Leere alt-Attribute für Layoutgrafiken" sind anzuwenden.

  • Alternativtexte für grafische Überschriften: siehe Prüfschritt 1.1.1b "Alternativtexte für Grafiken und Objekte".
  • Bildersetzungsverfahren (zum Beispiel FIR): siehe auch Prüfschritt Prüfschritt 1.4.3c "Inhalte bei benutzerdefinierten Farben erkennbar".
  • CAPTCHAs werden im Prüfschritt 1.1.1d "Alternativen für CAPTCHAs" geprüft.
  • Textäquivalent (title-Attribut) für Frames: siehe Prüfschritt 2.4.1a "Inhaltsbereiche strukuriert".
  • Linktexte sind auch in Prüfschritt 2.4.4a "Aussagekräftige Linktexte" Thema. Dort geht es um die allgemeine Aussagekraft, in diesem Prüfschritt 1.1.1a geht es dagegen nur um die Gleichwertigkeit von Alternativtext und grafischem Link.
  • Die Ausgabe der entsprechenden Rolle von SVGs wird im Prüfschritt 4.1.2a "Name, Rolle von Bedienelementen verfügbar" geprüft (s.o. 3.2 Unterstützung von SVGs durch assistive Technologien).

Einordnung des Prüfschritts nach WCAG 2.0

Guideline

Success criterion

Techniques

General Techniques
HTML Techniques
ARIA Techniques
Failures

Quellen

W3C - Web Accessibility Tutorials

W3C - Scalable Vector Graphics (SVG) 1.1

Weitere Quellen zu SVGs

Fragen zu diesem Prüfschritt

Kann denn nicht das alt-Attribut leer gelassen werden, wenn stattdessen ein sinnvolles title-Attribut verwendet wird? Das wird in meinem Screenreader problemlos ausgegeben.

Es stimmt, dass neuere Screenreader bei Vorhandensein eines title-Attributs dieses anstelle eines fehlenden alt-Attributs ausgeben. Das trifft aber nicht auf alle gängigen Hilfsmittel zu. Deshalb verlangt der Test grundsätzlich die standardkonforme Umsetzung gemäß HTML 4.015.0 und WCAG 2.0:

  • Das alt-Attribut soll den Inhalt des Bildes ersetzen
  • Das title-Attribut ist für zusätzliche (nicht essenzielle) Informationen gedacht

Deshalb steht ja in der WCAG 2.0-Technik H33:

Because of the extensive user agent limitations in supporting access to the title attribute, authors should use caution in applying this technique. For this reason, it is preferred that the author use technique C7: Using CSS to hide a portion of the link text (CSS) or H30: Providing link text that describes the purpose of a link for anchor elements (HTML).

Ein weiterer Punkt, der die Wichtigkeit des alt-Attributs unterstreicht, ist die Nutzung mit abgeschalteten Bildern. Auch wenn Alternativtexte im Bereich der Bildumrisse in manchen Browsern nicht vollständig angezeigt werden, ist das immer noch besser als eine Nicht-Anzeige beim Einsatz von title.

Der Alternativtext beschreibt die Grafik, der title-Text beschreibt das Link-Ziel: Ist das ein geeigneter Lösungsansatz für grafische Links?

Vorgeschlagen wurde diese Lösung für Fälle, in denen die Grafik nicht einfach das Linkziel abbildet (Schriftgrafik) oder für das Linkziel steht, sondern zusätzlich eine eigenständige Aussagekraft hat (zum Beispiel bei aus Anreißertext und einer verlinkten Abbildung bestehenden Teasern).

Die Idee ist einleuchtend:

Der sehende Benutzer klickt auf das Bild, denn er vermutet, dass hinter dem Bild eine Seite steht. Der beschreibende Alternativtext ersetzt das Bild, der blinde Benutzer schließt wie der sehende Benutzer vom (beschriebenen) Bildinhalt auf das Linkziel. Wenn aus dem Bild / der Bildbeschreibung nicht hinreichend klar hervorgeht, wo es hinführt, kann der sehende wie der blinde Benutzer auf die ergänzenden Informationen im title-Attribut zugreifen.

In der Praxis funktioniert das aber nicht:

Sehende Benutzer orientieren sich nicht an den Inhalten des Bildes, sondern eher an der Position. Viele Teaser-Bilder sind vom Inhalt her ohnehin nicht geeignet, etwas über das Linkziel zu sagen, der Bezug zum Thema des Linkziels ist oft nur ansatzweise nachvollziehbar. Aber sie müssen auch gar nichts über das Linkziel sagen: Das Linkziel steht im Text daneben, es muss nicht aus dem Bild erraten werden. Geklickt wird auf das Bild, weil es vielleicht leichter zu treffen ist und der Benutzer weiß, dass Teaser-Bilder üblicherweise mit weiterführenden Informationen zum jeweiligen Textabschnitt verlinkt sind.

Für den blinden Benutzer ist der Zusammenhang von Bild und (darauf folgendem) Kontext dagegen normalerweise nicht klar. Er müsste also tatsächlich Vermutungen anstellen, wo ein Link hinführen könnte, der mit dem beschriebenen Bild verbunden ist. Und da das Bild die entsprechende Aussagekraft nicht hat, wäre er auf die Informationen im title-Attribut in der Regel angewiesen. Sie sind also für ihn nicht ergänzend.

Hinzu kommt: Das title-Attribut wird von gängigen Screenreadern unterschiedlich behandelt und schlecht unterstützt. Nach wie vor werden von JAWS die Inhalte von alt-Attribut und title-Attribut nur alternativ vorgelesen.

Das title-Attribut ist für ergänzende Informationen vorgesehen. Die Information über das Linkziel ist in aller Regel keine ergänzende Information, denn sie geht aus dem Bildinhalt nicht hervor. Der Alternativtext muss daher das Linkziel beschreiben.

Sollte im alt-Attribut und im title-Attribut eines Bildes derselbe Inhalt stehen?

Der Alternativtext soll das Bild ersetzen. Sehr häufig bedeutet das: der Alternativtext sagt, was abgebildet ist.

Das title-Attribut ist dagegen für ergänzende Informationen zum Bild vorgesehen. Es kann zum Beispiel verwendet werden, um zu sagen, von welcher Quelle das Bild stammt. Dort stehen also Informationen, die man dem Bild nicht entnehmen kann.

Eigentlich also ein klarer Fall: Die Aufgaben der Attribute sind unterschiedlich, entsprechend sollten sie normalerweise nicht denselben Inhalt haben. Es gibt aber eine wichtige Ausnahme:

Häufig werden Symbole oder Zeichen als Bedienelemente verwendet. Die Bedeutung solcher Bilder kann undeutlich sein. Der Benutzer sieht nicht genau, was abgebildet ist oder er versteht nicht, wofür das Bild stehen soll. Für diesen Besucher ist eine ergänzende Beschriftung nützlich. Sie steht am besten als Text neben dem Bild, denn dann ist sie auch für Tastaturnutzer sichtbar. Aber auch das title-Attribut kann verwendet werden, denn die Beschriftung ist (für den sehenden Benutzer) ergänzend.

Das ist also ein Fall, in dem es Sinn machen kann, dass der Alternativtext und das title-Attribut dieselbe Information bereitstellen:

Für blinde Benutzer ersetzt der Alternativtext das Bild. Und zwar am besten, indem er die für blinde Benutzer unbrauchbare Bildform umgeht, also das Bild durch die Bezeichnung des Linkziels oder der auszulösenden Aktion ersetzt.

Für sehende Benutzer stellt das title-Attribut die Bedeutung des Bildes klar. Es bezeichnet das Ziel des Links oder die Aktion, die ausgelöst wird.

Alternativtext und title-Attribut liefern für unterschiedliche Benutzergruppen die selbe Information, für die einen als Ersatz und für die anderen als Ergänzung zum Bild. Mit dem unguten Begleiteffekt, dass der blinde Benutzer (je nach Hilfsmittel und Benutzereinstellung) unter Umständen zwei Mal dasselbe hört.

Ideal ist diese Lösung sicher nicht, einerseits, weil die ergänzende Information im title-Attribut nicht für jeden zugänglich ist und andererseits, weil dieselbe Information zwei Mal geliefert wird. Die zweifache Angabe von Linkzielen im Alternativtext und im title-Attribut wird aber im BITV-Test nicht negativ bewertet, wenn sie im Kontext hilfreich ist.

Screenreader zeigen den Dateinamen der Bilddatei an, wenn kein Alternativtext zur Verfügung steht. So kann das Fehlen des Alternativtextes kompensiert werden. Soll man das bei der Prüfung berücksichtigen?

Nein, die Dateinamen sollen bei der Prüfung nicht berücksichtigt werden. Denn dieser Zugangsweg ist nicht verlässlich. Nicht alle Browser oder Screenreader zeigen Dateinamen an, auch ist die Eignung des Dateinamens als Navigationshilfe eher zufällig.

Allgemein gesagt: Gute Nutzbarkeit mit speziellen Hilfsmitteln gewährleistet nicht ein positives Ergebnis des BITV-Tests. Der Webauftritt wird positiv bewertet, wenn er das Seine zur Sicherung der Zugänglichkeit beisteuert. Das Hilfsmittel ist dagegen gut, wenn es auch mit schlechten Webauftritten klar kommt. Es sorgt dafür, dass auch Webauftritte, die nicht barrierefrei sind, irgendwie genutzt werden können.

Soll im Alternativtext stehen, dass es sich um ein Navigationselement handelt?

Nein, das ist nicht erforderlich. Denn Screenreader oder Textbrowser stellen den Bezug des Alternativtextes zum Link ohnehin her. Wenn im Alternativtext steht, dass es sich um ein Navigationselement handelt, liefert der Screenreader diese Information also zwei Mal.

Im BITV-Test wird ein entsprechender Vorsatz im Alternativtext jedoch nicht negativ bewertet, er ist für die Bewertung nicht relevant.

Sollte der Alternativtext für grafische Bedienelemente auch sagen, was abgebildet ist?

Manchmal ergibt sich das von selbst, wie bei Schriftgrafiken: das Linkziel ist abgebildet, die Beschreibung des abgebildeten Gegenstandes sagt zugleich auch, wohin der Link führt.

Schwieriger ist es bei Symbolen. Dem visuell orientierten Besucher ist vielleicht klar, für welches Linkziel das abgebildete Symbol steht. Für einen blinden Besucher ist der Weg über das Symbol aber weniger vertraut, er ist auf jeden Fall umständlich.

In solchen Fällen, wenn die Abbildung nicht hinreichend klar über das Linkziel Auskunft gibt, sollte man sich fragen: Ist es wichtig, zu wissen, was da abgebildet ist, soll dem sehenden Besucher da etwas gezeigt werden? Oder hat die Abbildung eigentlich nur die Aufgabe, das Linkziel zu vermitteln?

Ein Beispiel für den ersten Fall: das Logo einer Website ist auf die Startseite verlinkt. Es dient also als Bedienelement, der Alternativtext muss das Ziel des Links angeben. Das Logo ist aber auch selbst wichtig, es soll dem Besucher gezeigt werden. Der Alternativtext muss also auch sagen, was abgebildet ist.

Ein Beispiel für den zweiten Fall: ein Briefumschlag verweist auf die Kontaktseite des Webangebotes. In diesem Fall kommt es nur (oder jedenfalls hauptsächlich) auf die Vermittlung des Linkziels an. Der Alternativtext muss also nicht sagen, was abgebildet ist, er kann sich auf die Angabe des Linkziels beschränken.

Für die Bewertung im BITV-Test gilt: Das Ziel des Links muss immer angegeben werden. Manchmal reicht dafür die Bezeichnung des abgebildeten Gegenstandes aus, andernfalls muss das Linkziel ausdrücklich angegeben werden. Zusätzliche Angaben zum abgebildeten Gegenstand sind nur erforderlich, wenn die Abbildung etwas zeigen soll, also einen weitergehenden Informationsgehalt hat.

Links oben ist das Firmenlogo abgebildet, es ist außerdem mit der Startseite verlinkt. Welcher Alternativtext ist angemessen?

Der Alternativtext in diesem Fall hat zwei Aufgaben: Er soll für das Logo stehen und er soll das Linkziel vertreten. Auf dieser Grundlage kann man verschieden argumentieren:

Das Bild zeigt das Logo der Firma. Das ist auch seine vorrangige Aufgabe. Auch für einen blinden Benutzer ist es gut, zu wissen, dass die Firma ihr Logo auf der Seite zeigt. Zusätzliche Informationen zum Ziel des Links sind überflüssig. Wo soll das Logo von Müllermilch schon hinführen? Also sollte "Logo: Müllermilch" im Alternativtext stehen.

Das Bild hat zwei Funktionen. Es zeigt das Logo der Firma und es dient als Link auf die Startseite des Webauftritts. Der sehende Benutzer hat damit kein Problem, er wundert sich nicht, wenn er das Bild anklickt und auf der Startseite von Müllermilch landet. Ebenso der blinde Benutzer. Ein grafischer Link namens Müllermilch? Der zeigt und verweist wohl auf Müllermilch. Also kurz und knapp: "Müllermilch" in den Alternativtext!

Das Bild hat zwei Funktionen. Es zeigt das Logo der Firma und es dient als Link auf die Startseite des Webauftritts. Für beides soll auch der Alternativtext stehen: "Logo: Müllermilch - zur Startseite".

Alle drei Alternativen unterstützen den blinden Besucher. Im BITV-Test gelten daher alle drei Alternativen als angemessen.

Blättern: zum nächsten Prüfschritt zum letzten Prüfschritt