Bei einem Seminar wurde ich gefragt, wie auf einer Webseite der Alternativtext für das Logo formuliert wird, wenn es mit der Startseite verlinkt ist. Wie ausführlich oder kurz sollte es sein, damit die Anwenderinnen und Anwender von Screenreadern den optimalen Nutzen daraus ziehen?
Im Kern geht es um die Frage, ob im Alternativtext des Logos auch „Logo“ steht und etwas wie „Link zur Startseite“. Und nutzt es etwas, den Link noch um title= zu ergänzen?
Grundsätzlich gilt bei Wort-Bildmarken, dass der Alternativtext den Text des Bildes wiederholt. Und für das grafische Element, dass es nicht beschrieben sondern bestenfalls ersetzt wird („Wappen“). Werden Bilder von einem Link umschlossen, gelten sie als funktionale Bilder, deren Funktion im Alternativtext zu benennen ist („drucken“).
Hier die zu prüfende Struktur in HTML:
a href="[URL]"
title="[Text]">
img src="[Pfad]"
alt="[Alternativtext]"
title="[Text]">
/a>
Ein Test mit dem Screenreader NVDA ergibt, dass title im Link nicht vorgelesen wird. Diese Information erscheint nur in einem Desktop-Browser. Vorgelesen wird:
– der Alternativtext des Bildes,
– dann die URL der Startseite und
– dann ein title-Text des Bildes.
Zwei Philosophien
Am besten sehen wir uns dazu die Webseiten von Institutionen an, die sich mit Barrierefreiheit intensiv beschäftigen: Dabei zeigen sich zwei unterschiedliche Philosophien: Der Bundesbeauftragte für die Belange von Menschen mit Behinderungen und der BITV-Test sind ausführlich. W3.org, WebAIM und die Hersteller von Screenreadern bevorzugen Minimalismus.
Für Sie bedeutet das, sich an den Bedürfnissen Ihrer Zielgruppe zu orientieren.
Die nachfolgenden Code-Blöcke wurden im Interesse besserer Lesbarkeit vereinfacht dargestellt.
behindertenbeauftragter.de
a href="[...]node.html"
title="Zur Startseite">
img src="[...].svg"
alt="Logo: Beauftragter der Bundesregierung für die Belange
von Menschen mit Behinderungen (Link zur Startseite)" />
/a>
Der Behindertenbeauftragte der Bundesregierung ergänzt den Link um einen title „Zur Startseite“, der nur im Desktop-Browser angezeigt wird. Der Alternativtext, der vorgelesen wird, beginnt mit „Logo:“ und endet mit „(Link zur Startseite)“.
BITV-Test
a href="/start.html"
title="BIK - BITV-Test - Zur Startseite wechseln">
img src="[...]"
alt="Logo BIK - BITV-Test"
title="BIK - BITV-Test - Zur Startseite wechseln">
/a>
Der bitvtest.de ergänzt den Link um einen title, der den Logo-Text und das Link-Ziel benennt. Der ist inhaltsgleich mit dem title des Logos. Der Alternativtext beginnt mit „Logo“ und endet mit „Zur Startseite wechseln“. Der Screenreader liest folglich „Logo BIK – BITV-Test https://www.bitvtest.de/start.html BIK – BITV-Test – Zur Startseite wechseln“. Ganz schön ausführlich und redundant.
Konvention: weniger ist mehr
Die nachfolgenden Organisationen und Hersteller von Screenreadern nutzen kurze Texte. Sie sind überzeugt: Bei einer zur Startseite verlinkten Grafik mit dem Namen der Website handelt es sich um eine Konvention, die nicht mehr erklärt werden müsse.
World Wide Web Consortium (W3C)
a href="https://www.w3.org/">
svg role="img" aria-label="W3C">/svg>
/a>
W3.org ist die internationale Organisation, die festlegt, wie HTML funktioniert und auch Barrierefreiheit im Internet. Ihr Logo wird nicht als Bild sondern als Vektorgrafik eingebunden. Daher informieren sie Screenreader mit dem aria-label="W3C". Mehr nicht.
WebAIM
a href="/">
img src="[...].png"
alt="WebAIM - Web Accessibility In Mind">
/a>
WebAIM.org zeichnet für das Prüfwerkzeug WAVE verantwortlich. Der Alternativtext gibt nur das wieder, was auch das Logo aussagt.
Screenreader NVDA
a href="/">
img src="[...].png"
alt="NV Access Empowering lives through non-visual
access to technology">
/a>
Screenreader JAWS
a href="https://www.freedomscientific.com">
img src="[].png"
alt="Freedom Scientific"/>
/a>
Screenreader Dolphin
a href="/en-gb/">
img
src="[...].png"
alt="Dolphin Computer Access Logo">
/a>
Weiterführend
- W3C-Erläuterung „Image used alone as a linked logo“. Danke an @alexlehner42.
- WebAIM-Erläuterung: Link-zu-home + Logo = Konvention, die nicht mehr erklärt werden muss.