Tear Down This Wall: HTML_CodeSniffer überprüft Websites auf Barrierefreiheit

Kein Beitragsbild

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010...

Barrierefreiheit ist eine große gesellschaftliche Aufgabe, die in den letzten Jahren an Priorität gewonnen hat. Auch für Websites wird ein mindestens barrierearmer Zugang immer wichtiger. Der HTML_CodeSniffer ist ein Tool, welches dabei hilft, eine Website auf das Vorhandensein etwaiger Barrieren zu überprüfen. Das Tool lässt sich bequem per Bookmarklet auf jede Website anwenden und gibt einen Bericht mit Fehlern und Warnungen aus.


HTML_CodeSniffer

Barrierefreiheit gemäß WCAG und Section 508

Die „Web Content Accessibility Guidelines“ (WCAG) beinhalten Richtlinien für barrierefreie Webinhalte und stellen eine Empfehlung der „Web Accessibility Initiative“ (WAI) des W3C dar. Sie sind 2008 in der Version 2.0 verabschiedet worden. Die WCAG-Richtlinien besitzen unterschiedliche Konformitäten (A, AA und AAA), wobei A die niedrigste und AAA den höchsten Grad der Einhaltung der Richtlinien darstellt. Websites, welche die AAA-Konformität besitzen, erfüllen alle Richtlinien und weisen somit ein Höchstmaß an Barrierefreiheit auf.

Ein Beispiel: Bei der Richtlinie für „zeitbasierte Medien“ müssen Alternativen zu Audio- und Videoinhalten bereitgestellt werden. Während es bei Stufe A genügt, Untertitel zu integrieren, ist es für Stufe AA erforderlich, zusätzlich eine Audiodeskription zu hinterlegen. Bei Stufe AAA muss zudem eine Übersetzung in Gebärdensprache zur Verfügung gestellt werden.

Der HTML_CodeSniffer überprüft ein HTML-Dokument anhand der WCAG-Richtlinien. Dabei lässt sich die entsprechende Konformitätsstufe auswählen. Nach der Überprüfung gibt das Tool die Anzahl der Fehler, Warnungen und Hinweise aus. In einem ausführlichen Bericht liest man anschließend für jeden Fehler und jede Warnung nach, was nicht WCAG-konform ist.

Wer den HTML_CodeSniffer mal an einigen Webdokumenten ausprobiert, wird schnell feststellen, dass kaum eine Website alle Richtlinien erfüllt. Selbst die Übereinstimmung mit der kleinesten Stufe A ist eher selten gewährleistet. Wer also ein Maximum an Barrierefreiheit gewährleisten will, muss ordentlich nachbessern, selbst für das Minimum sind teils unfangreiche Nacharbeiten erforderlich.

Neben den WCAG-Richtlinien überprüft der HTML_CodeSniffer Inhalte auch auf der Grundlage der Section 508, einem Abschnitt des US-Behindertengleichstellungsgesetzes. Dieses stellt verbindliche Regeln für US-Bundesbehörden auf.

Überprüfung per Bookmarklet und per Direkteingabe

Der einfachste Weg, den HTML_CodeSniffer einzusetzen, ist die Verwendung als Bookmarklet. So kann jede aufgerufene Website per Klick geprüft werden. Alternativ besteht die Möglichkeit, HTML-Quelltext per Formular einzugeben und überprüfen zu lassen.

E-Book Effektives Online Marketing von Andreas Hecht

E-Book: Effektives Online Marketing

Entdecke die Power des perfekten Online-Marketings für deine Website. Du erfährst neue Techniken, die deine Website automatisch besser ranken lassen und die dir nach und nach einen Expertenstatus verleihen werden. [...]


HTML_CodeSniffer auf Wikipedia angewendet

Auch bei direkter Eingabe des zu untersuchenden HTML-Codes werden Fehler, Warnungen und Hinweise sowie ein ausführlicher Bericht ausgegeben. Interessant ist die Direkteingabe wohl eher dann, wenn man lediglich bestimmte HTML-Auszeichnungen auf ihre Konformität hin überprüfen möchte; also in der Phase der Entwicklung einer Website.

Fazit: Der HTML_CodeSniffer ist ein sehr gutes Werkzeug, das Webdokumente sehr ausführlich testet und auf fehlende Barrierefreiheit hinweist. Und es zeigt, wie viel Arbeit ein barrierefreier Webauftritt macht. Möglicherweise kann das Tool Überzeugungsarbeit beim Kunden leisten, sind diese doch erfahrungsgemäß eher selten bereit, für Leistungen zu bezahlen, die man “nicht sehen” kann. Die Verwendung des HTML_CodeSniffer ist übrigens kostenlos.

(dpe)

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Sortiert nach:   neueste | älteste | beste Bewertung
Peter Müller
Dr. Web Crew

Ich hatte das Bookmarklet schon gebookmarked, es aber bis zu eurem Artikel wieder vergessen. Dabei ist es wirklich ein tolles Tool. Optisch als auch technisch.

Und dann habe ich mir gerade mal den Spaß gemacht, den HTML Sniffer einmal mit Zeldman-Artikel über das neue ALA5.0-Design bekannt zu machen. Für die ALA-Macher ist das ein eher blamables Ergebnis.

wpDiscuz