Wie K. Probiesch im PHP Magazin 6/2012 berichtet, ist eine Behinderung oft ein Grund für verstärkte Nutzung des WWW. Dies war für mich eine recht unerwartete Erkenntnis. Dennoch sehr schlüssig: Für Behinderte gilt das Gleiche, wie für uns – das Web bietet den schnellsten Zugriff auf Informationen. Kurze Wege geht man lieber als lange – auch wenn diese umsonst wären.
Einige Gruppen von Behinderten brauchen für eine uneingeschränkte Nutzung etwas Unterstützung von den Anbietern der Web-Inhalte. Das trifft insbesondere auf die Blinden und die Sehbehinderten zu. Sie sehen unsere Webseiten manchmal ganz anders als wir: Die Farben nur schwach, den Text verschwommen (weil zu klein) oder nehmen nur einen Kauderwelsch von Links und Texten wahr. Diesen Menschen kann man mit ein wenig mehr Aufwand durchaus gerecht werden.
Die Pflicht ruft
Verpflichtet dazu sind lediglich öffentliche Stellen (Bund, Länder und Gemeinden) – was sich indirekt aus dem Grundgesetz ergibt und in Bundes- (BITV) und Landesgesetzgebung niederschlägt. Auch die Auftragnehmer der EU werden nach Mandat 376 zur Einhaltung der Europäischen Norm „EN 301 549“ vor allem im Bezug auf Informationsdienste und Software verpflichtet. Privatunternehmen, die kein Monopol haben, können nicht zur Einhaltung der WCAG-Richtlinien verpflichtet werden, lassen aber ihre Kunden im Stich bzw. lassen sich mögliche Einnahmen entgehen.
Dateitypen
Für Online-Informationsdienste sind vor allem 2 Formate von Bedeutung: HTML und PDF. (Audiovisuelle Medien, die meist nur eine ergänzende-/Nebenrolle spielen, lassen wir bei unserer Betrachtung weg.)
Die PDF-Dateien haben einen eigenen Standard (PDF U/A), der von der rein technischen Beschreibung abhebt und weitere Anforderungen stellt. Es verfolgt die vier Grundprinzipien der Accessibility: wahrnehmbar, bedienbar, verständlich und robust. Wahrnehmbarkeit umfasst alles, was mit der Möglichkeit der Wahrnehmung von Objekten zu tun hat (z.B. ein Verbot vom Platzierung hell gefärbter Textpassagen über dunklen Bildern – werden die Bilder ausgeblendet, reicht der Kontrast zum weißen Hintergrund meist nicht aus, um den Text lesen zu können.) Die Bedienbarkeit hat mit Aktionen des Benutzers zu tun: z.B. Wird eine PDF nicht mit Hilfe von Heading-Tags in Abschnitte unterteilt, ist der direkte Zugriff auf einen bestimmten Teil nicht möglich. Die Verständlichkeit ist dann gegeben, wenn der Wortschatz konsistent und nachvollziehbar verwendet wird. Robust ist eine PDF-Datei dann, wenn sie so beschaffen ist, dass es unabhängig vom Reader, Auflösung, Betriebssystem oder Screenreader-Software zum gleichen Ergebnis beim Benutzer kommt.
HTML
Im Falle von HTML ist die Sache etwas diffiziler: Jedes Element einer Webseite kann unterschiedlichen Zwecken dienen oder verschiedene Zustände haben. Damit die Screenreader-Software weiß, was in einem DOM (Document Object Model) was ist, wurde die Zwischenschicht „Accessible Rich Internet Applications“ (WAI-ARIA oder kurz ARIA) eingeführt. Sie beschreibt eine optimale (technische wie nichttechnische) Umsetzung der vier Grundprinzipien und unterteilt sie in drei „Güteklassen“: A, AA und AAA (wobei AA erst nach Erfüllung von A und AAA nach Erfüllung von AA und A gegeben ist). Die erste und für die Orientierung wichtigste ARIA-Eigenschaft ist die Rolle, die ein Element im HTML-Orchester spielt. Fehlt diese Angabe, könnten alle Elemente das Saxophon oder aber das Klavier sein (um beim Bild des Orchesters zu bleiben). Man erfährt es erst, wenn man hineingehört hat. Kennt man die Aufgabe eines DOM-Astes im Voraus, kann man Banner und Suchformulare überspringen, wenn lediglich die Navigation von Interesse ist. Viele Rollen müssen um zusätzliche Attribute ergänzt werden, um ihre Auswirkung auf die Ansicht bzw. den Inhalt des Dokumentes verstehen zu können.
Die Sache mit den Rollen ist recht komplex und das Diagramm, das es zu erklären versucht, kann einem ganz schön viel Angst einjagen. Aber keine Angst, wir kommen dem roten Faden schon auf die Spur! Zunächst einmal gibt es die grobe Gliederung.
Aie abstrakten Rollen
- Command (Interaktionen)
- Composite (Gruppierung)
- Input (Eingabeelemente)
- Landmark (Inhalttypen)
- Range (eingeschränkte Eingabeelemente)
- Roletype (oberste abstrakte Ebene)
- Section (Abschnitt-Elemente)
- Sectionhead (Abschnitt-Überschriften)
- Select (Auswahl-[Input]-Elemente)
- Structure (Grobgliederung in Abschnitte)
- Widget (interaktive [Eingabe/Steuerungs]-Elemente)
- Window (Fensterartige Elemene wie Dialoge oder Warnungen)
Die „Landmarks“
Am interessantesten sind die Landmarks, weil sie die Einordnung in „Streicher“, „Bläser“ und „Schlagzeuger“ beinhalten. Das gleiche (wenn auch nicht vollständig) kann die HTML5-Semantik erreichen:
- article (entspricht in HTML5 dem Element article) – ein einzelner Eintrag, der aus mehreren Sätzen bestehen kann und eine Einheit ergibt. z.B. Blogbeitrag, Kommentar, Wortmeldung im Forum
- banner (entspricht in HTML5 dem Element header) – Logo, Seitenslogan, Banner-Bild und alles, was nahezu statisch in der Kopfzeile auftaucht
- complementary (entspricht in HTML5 dem Element aside) – ergänzende Informationen zum Inhlat wie Tags/Tagclouds, Kategorien, Adressdaten der Ansprechpartner (Inhalte im Bezug auf den Inhalt)
- contentinfo (entspricht in HTML5 dem Element footer) – ergänzende Informationen zur Seite/Artikel wie Autor, Veröffentlichungsdatum, Version (eher wie Metadaten) oder Fußnoten, Impressum, Kontakt, Disclaimer etc.
- form (entspricht in HTML dem Element form) – Formulare, die aus mehreren Eigabeelementen und/oder Hyperlinks bestehen
- main (entspricht in HTML5 dem Element main) – der eigentliche Inhalt wie Artikeltext, Ergebnisliste einer Suche etc.
- navigation (entspricht in HTML5 dem Element nav) – Bereich der Navigation innerhalb des Web-Angebots
- search (kann dem HTML-Element form entsprechen) – Bereich der Suche innerhalb des Webauftritts. Dient eine „form“ nur dieser suche, ist die in dieser Kategorie richtig. Ansonsten gehört sie in aria-role=form.
- application (kann dem HTML-Element form entsprechen) – ein besonders interaktiver Bereich, in dem mit Ausnahme der Tabulator-Taste jeder Tastendruck ohne zusätzliche Kombinationstaste wie STRG oder ALT zur Eingabe wird. Anders ausgedrückt: Dieser Bereich wird nicht wie eine Webseite, sondern wie ein Programm behandelt.
Nach der 80-20-Regel (auch als Paretoprinzip bekannt) erreichen man mit 20% Aufwand 80% Erfolg. So auch hier: Durch die Beachtung dieser ARIA-Rollen haben wir 80% der Accessibility-Probleme auf üblichen Webseiten beseitigt. Weitere Rollen eher „technische“ Strukturen oder einzelne Widgets und richten sich eher an Programmierer, die Schieberegler oder Auswahllisten verwenden wollen.
Strukturen
Interessant sind natürlich auch die ARIA-Rollen, die die Struktur einer Webanwendung beschreiben. Die Grenze ist fließend, so dass auch übliche Webseiten einige Elemente übernehmen können. Da wären
- columnheader
- rowheader
- rowgroup
- row
die sich mit den HTML-Elementen caption, thead, tbody, tfoot etc wunderbar ergänzen. Aber auch Listen sind mit zwei Rollen vertreten:
- list und
- litsitem.
Natürlich könnte man ul oder ol mit demselben Ergebnis einsetzen. Diese Rollen kann man allen HTML- und SVG-Elementen zuordnen, was den Einsatzgebiet deutlich erweitert. Gleiches trifft auf die Rolle img zu, die jedoch einen Container mit Bildern umfassen kann.
Zwischenergebnis
Der richtige Einsatz von HTML- und insbesondere HTML5-Elementen macht es nicht nur den Suchmaschinen, sondern auch Anderssehenden einfach nachzuvollziehen, was wo zu finden ist. Reichen diese Elemente nicht aus oder kann man sie nicht einsetzen (wie im SVG), bietet ARIA mit dem Konzept der Rollen eine gute technische Grundlage für eine Sehbehindertenumszung.
Qui bono?
Informationen gut nutzbar Aufbereiten heißt, sie unabhängig von „Einsatzgebiet“ zu konzipieren und umsetzen. Die Kenntnis der Technik ist nicht unbedingt nötig. Das Verständnis der Bedürfnisse hingegen umso mehr. Von einer gelungenen Umsetzung profitieren auf direktem Wege Blinde und Sehbehinderte. Indirekt kommt es allen zugute, denn auch die Suchmaschinen wollen uns Ergebnisse aus den relevanten Teilen von Webseiten präsentieren…
Empfehlenswerte Quellen zu diesem Thema sind:
Mozillas Accessibility-Abteilung
Barierefreies Webdesign|Die Landmarks
Ergänzen von Landmarks Schritt für Schritt
Ein kurzer Video-Ritt durch die ARIA-Landschaft. Dummy-fähig!
Ein tieferer Einblick in ARIA-Landmarks