Barrierefreies Webdesign ein zugängliches und nutzbares Internet gestalten

Inhalte mit CSS? Aber bitte ohne Hintergrundgrafiken! veröffentlicht in 2012

Alternative Lösungen mit HTML

Wenn Grafiken per CSS eingebunden werden, dann muss meist eine textliche Entsprechung im HTML berücksichtigt werden. Nur wenn Grafiken rein dekorativ oder redundant zu anderen Inhalten sind, dürfen sie im HTML nicht berücksichtigt bleiben. Ein Link

<a href="doku.pdf" class="pdf">Dokumentation</a>

mit einem vorangestellten PDF-Icon wird im Screenreader nicht wahrgenommen werden können - und Screenreadernutzer sollten den Formatwechsel unbedingt erfahren! Im Prinzip gibt es drei Möglichkeiten, dieses Accessibility-Problem zu lösen:

In allen drei Fällen muss das HTML erweitert werden. Nur mit Text im HTML erhalten Screenreader Zugang zu den Informationen. In wenigen Ausnahmen kann man auf vorhandene Strukturen im HTML setzen.

Zusätzlicher Text

Eine mögliche Lösung für den Link zu einem PDF-Dokument ist die Berücksichtigung sichtbaren oder unsichtbaren Texts für die Angabe des Formatwechsels:

<a href="doku.pdf" class="pdf">Dokumentation<span class="zusatz">(PDF, 132KB)</span></a>

Solche Zusatztexte können auch Extern: nachträglich mit JavaScript zum Dokument hinzugefügt werden.

IMG statt CSS

Vor dem Hintergrund der Barrierefreiheit ist das Beispiel mit dem Zusatztext zugänglich. Etwas geschickter wäre die Verwendung einer Grafik im HTML mit entsprechendem Alternativtext:

<a href="doku.pdf">
  <span class="sprites-pdf">
    <img src="pdf.png" alt="PDF: " />
  </span>
  Dokumentation
  <span class="zusatz">(132KB)</span>
</a>

Wenn eine solche Lösung gewählt wird, dann empfiehlt es sich aus Gründen der Barrierefreiheit, die Information als Teil des Linktextes auszuspielen. Dann nämlich steht die Information auch für diejenigen Screenreadernutzer, die mit der Tabulatorentaste durch die Seite navigieren, direkt zur Verfügung.

Grafiken mit IMG können mit CSS Sprites gestaltet werden. Wenn es ein Fokus- und Mouse-Over-Effekt für das Symbol gibt, dann können beide Zustände in einer Grafik abgespeichert werden.

Mit den folgenden CSS-Anweisungen kann der Fokus- und Mouse-Over-Effekt umgesetzt werden:

.sprites-pdf {
  display: inline-block;
  width: 25px;
  height: 20px;
  overflow:hidden;
}
.sprites-pdf:focus>img, .sprites-pdf:hover>img {
  margin-left:-25px;
}

Während es in diesem Beispiel "nur" um ein optisches Signal handelt und somit der Alternativtext der Grafik unverändert bleiben kann, wird es Situationen geben, in denen auch der Alternativtext zu ändern sein wird. Für Fokus- und Mouse-Over-Effekte wird eine dynamische Anpassung des Alternativtextes nur mit JavaScript möglich sein.

Title-Attribut für Links

Das title-Attribut für Links wird in einigen Screenreadern theoretisch unterstützt, aber als Alternative zum Linktext. In den allermeisten Fällen wird der Linktext maßgeblich sein, so dass Screenreadernutzer title-Attribute von Links nicht erfahren. Insofern ist das title-Attribut keine gute Lösung, um zu vermitteln, dass es sich um ein Link zu einem PDF-Dokument handelt.

Hingegen wird das title-Attribut für Formularelemente in Screenreadern unterstützt. Wenn ein Steuerelement keine Beschriftung (meist das LABEL-Element, bei Schaltflächen das value-Attribut) aufweist, wird ersatzweise ein vorhandenes title-Attribut zur Identifikation des Steuerelements herangezogen.

Auch wenn Screenreader das title-Attribut bedingt unterstützen, so ist das Attribut im Allgemeinen abhängig von der Maus. Sehende Tastaturnutzer werden den Inhalt eines title-Attributs wahrscheinlich nicht erfahren, so dass unter dem Strich das title-Attribut nie eine barrierefreie Lösung ist.