Barrierefreiheit in freier Wildbahn: Pro Helvetia, ein Schweizer Beispiel

Problem

«Das verlinkte Seiten-Logo muss einen Alternativtext aufweisen, welcher der Doppelfunktion des Logos gerecht wird (Vermittlung der Absenderinformation und Hinweis aufs Ziel der Verlinkung).»

Das Logo von Pro Helvetia hatte als Alternativtext die Worte «Logo von Pro Helvetia» und war verlinkt auf die Startseite. Für sich genommen ist das beides nicht falsch – kombiniert aber ein Fehler. Screenreader lesen dann vor: «Link, Logo von Pro Helvetia». Hier könnte man denken, der Link würde zu einer Bilddatei des Logos führen.

<a href="[…]">
  <img alt="Logo von Pro Helvetia" />
</a>Code-Sprache: HTML, XML (xml)

Lösung

Im Review wurde vorgeschlagen, den alt-Text «… zurück zur Startseite» zu ergänzen.

<a href="[…]">
  <img alt="Logo von Pro Helvetia, zurück zur Startseite" />
</a>Code-Sprache: HTML, XML (xml)

An dieser Lösung gibt es nichts auszusetzen. Wir haben uns für eine andere entschieden, die ebenso funktioniert: Wir setzen das Attribut aria-label für das Anker-Element, mit den Worten «Zurück zur Startseite von Pro Helvetia», und lassen das alt-Attribut bewusst leer. Wenn es aria-label gibt, werden Screenreader den Alternativtext ohnehin ignorieren.

<a href="[…]" aria-label="Zurück zur Startseite von Pro Helvetia">
  <img alt="" />
</a>Code-Sprache: HTML, XML (xml)

Lehre

Bilder brauchen Alternativtexte und Links brauchen Link-Texte. Verlinkte Bilder können als Link-Texte fungieren.

Problem

«Die häufig gesuchten Begriffe sind visuell gruppiert mit der Überschrift ‹Vorschläge› versehen, diese ist jedoch nicht als legend zur fieldset formatiert.»

Im Such-Dialog gibt es eine Auswahl beliebter Suchbegriffe mit der Überschrift «Vorschläge». Im HTML war das aber nur ein p vor einer ul, ohne semantischen Zusammenhang.

<div class="[…]">
  <p class="[…]">
    Vorschläge
  </p>
  <ul class="[…]">	
    <li>[…]</li>   
    <li>[…]</li> 
    <li>[…]</li> 	
  </ul> 
</div>Code-Sprache: HTML, XML (xml)

Lösung

Einfach div und p ersetzen durch fieldset und legend. Zwischen diesen beiden Elementen gibt es einen klaren semantischen Zusammenhang. (Quelle: https://www.w3.org/WAI/tutorials/forms/grouping/)

<fieldset class="search-suggestions">
  <legend class="search-form__label">
    Vorschläge
  </legend>
  <ul class="search-suggestions__list">	
    <li>[…]</li>
    <li>[…]</li>
    <li>[…]</li> 	
  </ul> 
</fieldset>Code-Sprache: HTML, XML (xml)

Lehre

p beschriftet nichts. legend beschriftet fieldset.

Das ist eine tolle Überleitung zur Semantik von HTML-Elementen, dem Inhalt unseres nächsten Beispiels.

Problem

«Die Newsletter-Anmeldung und der Footer-Inhalt sind visuell klar abgetrennt, aber semantisch der letzten vorausgehenden Überschrift untergeordnet, zu der sie nicht gehören.»

Auf der Startseite gab es eine allgemeine h1, dann eine h2 für den News-Bereich «What’s on» und darunter mehrere h3 für die einzelnen Beiträge. Die letzte h3 «Bleiben Sie auf dem Laufenden.» gehörte jedoch gar nicht zu den News, sondern bezog sich eigentlich auf das Newsletter-Formular – war also hierarchisch falsch eingeordnet.

<h1>Herzlich willkommen bei Pro Helvetia.</h1>
  <h2>What's on</h2>
    <h3>Pavillon of …</h3>
    <h3>Illustration …</h3>
    <h3>How do cross …</h3>
    <h3>Annual report …</h3>
    <h3>Sélection …</h3>
    <h3>She Got Game …</h3>
    <h3>Rewilding the …</h3>
    <h3>Interview with …</h3>
    <h3>Bleiben Sie auf dem Laufenden.</h3>Code-Sprache: HTML, XML (xml)

Lösung

Im Block Editor konnten wir ganz einfach die Überschrift von h3 auf h2 ändern. Dort konnten wir auch einstellen, dass sie weiterhin genauso aussieht wie vorher, trotz veränderter Hierarchie.

<h1>Herzlich willkommen bei Pro Helvetia.</h1>
  <h2>What's on</h2>
    <h3>Pavillon of …</h3>
    <h3>Illustration …</h3>
    <h3>How do cross …</h3>
    <h3>Annual report …</h3>
    <h3>Sélection …</h3>
    <h3>She Got Game …</h3>
    <h3>Rewilding the …</h3>
    <h3>Interview with …</h3>
  <h2>Bleiben Sie auf dem Laufenden.</h2>Code-Sprache: HTML, XML (xml)

Lehre

Denkt immer daran, eure Überschriften im Kontext der gesamten Seite zu prüfen. Trennt die visuelle Ansicht von der strukturellen Hierarchie.

Problem

«Der Schalter zum Auslösen der Suche ist mit ‹Absenden› beschriftet, was nicht sinnvoll ist.»

Im Such-Dialog gibt es einen Such-Button, der durch das bekannte Icon einer Lupe hervorgehoben ist. Aber der versteckte Screenreader-Text lautete lediglich «Absenden». Ohne also das Icon zu sehen, blieb unklar, was dieser Button tun würde.

<button type="submit">
  <span class="screen-reader-text">Absenden</span>
  <svg>[…]</svg>
</button>Code-Sprache: HTML, XML (xml)

Lösung

Änderung des Textes zu «Suchen» – oder «Finden».

<button type="submit">
  <span class="screen-reader-text">Suchen</span>
  <svg>[…]</svg>
</button>Code-Sprache: HTML, XML (xml)

Lehre

Beschriftet eure interaktiven Elemente mit Worten, die beschreiben, was sie tatsächlich tun. Achtet auf alles Versteckte.

Dies ist eine klassische Situation, in der wir natürlich nicht mit Absicht einen unklaren Text verwendet haben. Aber weil es sich um einen verstecken Text handelte, war es sehr einfach, ihn während der Entwicklung der Website zu übersehen.

Problem

«Bei Anwenden des Filters werden die Ergebnisse gefiltert und visuell wird die Trefferzahl angezeigt. Davon erfahren Screenreader-Anwender:innen nichts.»

Wenn wir nach Förderungen von Pro Helvetia filtern, wird die Anzahl der Suchergebnisse dynamisch aktualisiert. Visuell ist das leicht zu erkennen, aber für Nutzer:innen von Screenreadern ist es schwierig, von diesen Veränderungen zu erfahren.

Theoretisch wäre dieses Problem wesentlich komplexer zu lösen als die vorherigen, da es auf JavaScript basiert. Aber wie eingangs erwähnt, ist es eine kluge Entscheidung hinsichtlich Accessibility, sich für WordPress als CMS zu entscheiden.

Lösung

Wir mussten nur das Paket @wordpress/a11y importieren, eines von vielen bestehenden WordPress–JavaScript-Modulen. Dadurch entsteht ganz einfach eine sogenannte «Live-Region», die automatisch Inhalte an Screenreader sendet. Wir müssen lediglich die Funktion speak() aufrufen.

import { speak } from '@wordpress/a11y';

speak(
  sprintf(
    _n(
      '%s result found.',
      '%s results found.', 
      results.length,  
      'ph-one-factsheets'
    ),
    results.length
  )
);Code-Sprache: JavaScript (javascript)

Lehre

Wenn ihr dynamische Änderungen per JavaScript vornehmt, informiert auch Screenreader darüber. In komplexen Situationen sucht nach vorgefertigten Hilfsmitteln.