Ohne Hürden

Teil 4: WCAG 2.0 - Neue Standards für Barrierefreiheit

Wichtig ist immer der Hintergedanke, der Text soll das Bild mittels Erklärung zumindest soweit möglich ersetzen. Natürlich ist eine ausführliche Beschreibung darin nicht möglich und sinnvoll. Hierfür kann longdesc eingesetzt werden (H45).

Das Attribut enthält einen Link auf eine Webseite, die dann eine Erklärung für die umfangreiche Grafik enthält oder referenziert auf eine Stelle in der Seite, die die umfangreiche Beschreibung bietet.

Die entsprechenden Wünsche nach einer ausführlichen Beschreibung finden sich übrigens auch in einigen technischen Richtlinien im allgemeinen G-Sektor der technischen Dokumentation. Das title-Attribut ist dagegen grundsätzlich eher für hilfreiche Hinweise gedacht (H89). Ein Beispiel kann ein Ausfüllvorschlag für ein Formularfeld sein.

Ebenso klar ist die Empfehlung, für Bilder, die nicht für Screenreader et cetera gedacht sind (zum Beispiel die eigentlich nicht mehr empfohlenen Platzhalter) ein leeres alt-Attribut und kein title-Attribut zu verwenden (H67):

<img src="bild.png" width="20"
height="20" alt="" />

Formularelemente

In Sachen Barrierefreiheit ist es besonders wichtig, dass beispielsweise Beschriftungen und Formularelemente miteinander in eindeutiger Beziehung stehen (H44). Dazu gibt es zwei Möglichkeiten: das <label>-Tag umschließt das Formularelement. Diese Variante wird aber nicht empfohlen, da sie mit einigen Screenreadern Probleme macht. Die zweite Variante verwendet die ID eines Formularelements und das for-Attribut im <label>-Tag:

<label for="name">Name:</label><input type="text" name="name"
id="name" />

Allein diese Maßnahme führt in Sachen Barrierefreiheit schon weiter. Sie ist im technischen Dokument insgesamt vier Erfolgskriterien zugeordnet. Außerdem gibt es explizit auch noch einen technischen Hinweis auf Misserfolg (F17), wenn die Zuordnung nicht passt, weil zum Beispiel eine ID fehlt.Ein weiteres wichtiges Thema ist die Bedienung von Formularelementen per Tastatur. Dazu zählt die Tab-Tasten-Reihenfolge. Die Grundlage bildet Richtlinie 2.4.3. H4 fordert eine logische Tab-Reihenfolge zwischen den einzelnen Elementen. Standardmäßig ist die Reihenfolge nach Vorkommen im HTML-Fluss. Gesteuert werden kann die Reihenfolge über das Attribut tabindex.

WCAG 2.0 - Neue Standards für Barrierefreiheit

© Archiv

Unterschiede: Die Kontrastunterschiede zweier Farben können Sie online berechnen lassen.

Ein weiteres wichtiges Thema ist die Bedienung von Formularelementen per Tastatur. Dazu zählt die Tab-Tasten-Reihenfolge. Die Grundlage bildet Richtlinie 2.4.3. H4 fordert eine logische Tab-Reihenfolge zwischen den einzelnen Elementen. Standardmäßig ist die Reihenfolge nach Vorkommen im HTML-Fluss. Gesteuert werden kann die Reihenfolge über das Attribut tabindex.

Kontrast

Im Bereich Kontrast vor allem bei Text und Hintergrundfarbe hat sich in der WCAG 2.0 die Berechnungsmethode geändert. In zwei allgemeinen Regeln G17 und G18 wird diese Berechnungsmethode dargestellt.

Außerdem ist sie auch im Standard-Dokument dargelegt (). Sie müssen nun aber nicht selbst zum Taschenrechner greifen. Unter [ext:http://juicystudio.com/services/luminositycontrastratio.php]/ext] finden Sie beispielsweise eine Online-Berechnung.

Fazit

Die WCAG 2.0 sind - trotz aller teils berechtigter Kritik - eine sinnvolle Weiterentwicklung. Mit dem zwar umfangreichen, aber immer logischen Aufbau sollte sich kein Webdesigner davor fürchten, mal einen Blick in die WCAG-Dokumente zu werfen. Und die technischen Anweisungen enthalten konkrete Empfehlungen zur Umsetzung.

Mehr zum Thema

HTML5: Quick Reference Guide
Ratgeber: "HTML5"

Die wichtigsten Tags auf einen Blick: In unserem praktischen Arbeitsblatt finden Sie einen wertvollen Begleiter für die Umstellung Ihrer Webprojekte…
internet, webdesign, google, content, ranking, seo, suchmaschine
Ratgeber: Urheberrecht

Einzigartige Inhalte bieten Lesern Mehrwert und sind ein wichtiges Qualitätsmerkmal. Ärgerlich, wenn sich jemand durch Kopieren an fremden Ergebnissen…
Die besten HTML5-Tipps
Neue Tipps & Tricks für blitz.io

Wer die Leistung einer Applikation ermitteln möchte, braucht keine Skripte zu schreiben, sondern kann einen der zahlreichen Online-Dienste einspannen.…
image.jpg
Ratgeber: Webentwicklung

Die clientseitige Javascript-Entwicklung bietet fast keine Entwicklungsumgebungen und auch keine vernünftigen Werkzeuge zur Fehlersuche. Eine der…
internet, webdesign, meteor, webapplikationen
Ratgeber

Mit Meteor sollen Entwickler in kurzer Zeit Umgebungen für Webapplikationen erstellen können, ohne sich um lästige Details kümmern zu müssen. Wir…