Webseiten benutzbar machen

Laura Kalbag legt mit Accessibility for Everyone ein wunderbares Buch zu Barrierefreiheit vor, in dem sie sowohl grundlegende Überlegungen ausführt als auch konkrete Beispiele zur Verbesserung von Webseiten gibt.

In den sieben Kapiteln des kurzen Buches beleuchtet sie die Frage was Barrierefreiheit bedeutet. Welche konkreten Auswirkungen einige Beeinträchtigungen auf die Nutzung von Webseiten haben. Wie sich Barrierefreiheit im gesamten Entwicklungsprozess planen lässt. Darüber hinaus thematisiert sie den Zusammenhang von Inhalt und Design und die Verbindung von Barrierefreiheit und HTML. In den letzten beiden Kapiteln spricht sie über Tests und deren Auswertung und gibt einen kurzen Einblick in Gesetze und Richtlinien zur Barrierefreiheit.

In ihrem Buch folgt sie dem Konzept des Universal Design und spricht davon wie wichtig es ist davon auszugehen, dass Menschen auf unterschiedlichste Weise im Netz unterwegs sind. Der Zweite Schwerpunkt des Buches ist die Betonung auf den Beitrag aller Beteiligten am Entstehungsprozess einer Webseite zur Barrierefreiheit derselben.

»Making our sites accessible starts with the understanding that people access the web differently, and continues with every member of the team ensuring their output is inclusive«

Universal Design

Der Wikipedia-Artikel zu Universal Design beginnt mit dem Hinweis, dass es sich bei Universal Design um ein internationales Design-Konzept handelt, nach dem »Produkte, Geräte, Umgebungen und Systeme derart gestaltet« sind, »dass sie für so viele Menschen wie möglich ohne weitere Anpassung oder Spezialisierung nutzbar sind.«

Kalbach folgt in Ihrem Buch Ronald L. Mace, der Universal Design in der Architektur etabliert hat. Sie überträgt das Konzept auf Webseiten und formuliert es folgendermaßen:

»Web accessibility is the degree to which a website is usable by as many people as possible.«

Daraus folgt die Notwendigkeit Barrierefreiheit von Anfang zu bedenken, und nicht zu einem späteren Zeitpunkt im Entwicklungsprozess einer Webseite darauf zurück zu kommen. Wie bereits erwähnt ist es daher auch die Aufgabe von allen Beteiligten die Webseite auf eine Art zu designen, die von so vielen Menschen wie möglich ohne weitere Anpassung oder Spezialisierung nutzbar ist.

Aufmerksamkeit auf vier Aspekte helfen nach Kalbag dabei eine Webseite gemäß Universal Design zugänglich zu designen:

  • visuell: achte auf gute Sichtbarkeit.
  • auditiv: achte auf gute Hörbarkeit.
  • motorisch: achte auf die Bedienbarkeit der Interaktionen.
  • kognitiv: achte auf Verständlichkeit.

Bei der Ausführung dieser vier Aspekte wird deutlich wie eng Barrierefreiheit mit guter Bedienbarkeit zusammenhängen: »Good accessibility is good usability.« Eine Webseite, die dem Universal Design Konzept folgt, ist demnach für alle besser zu bedienen, und somit insgesamt ein besseres Produkt.

Konkrete Beispiele

Browser verwenden die vorhandene Struktur des HTML um die Inhalte entsprechend darzustellen und zugänglich zu machen. Webseiten deren HTML semantisch und gut strukturiert ist, sind demnach automatisch barrierearm und auf unterschiedliche Weise auslesbar. Kalbag empfiehlt daher die HTML-Spezifikation gut zu kennen, und die Elemente in ihrer vorgesehenen Funktion zu verwenden. Ein guter Seitenaufbau lässt sich einfach verbessern, während es beinahe unmöglich ist eine schlechte Struktur barrierefrei zu bekommen.

Im folgenden fasse ich ein paar ihrer konkreten Beispiele zusammen, die dazu beitragen im Entstehungsprozess einer Webseite darauf zu achten, dass am Ende ein barrierefreies Produkt steht.

Die Navigation bietet den User_innen Orientierung und hilft bei der Einschätzung welche Inhalte auf der Webseite angeboten werden. Daher sollte sie eine knappe Zusammenfassung der Inhalte darstellen um ihre Funktion gut zu erfüllen.

Links mit Texten wie ›weiter‹ und ›hier klicken‹ sind unbedingt zu vermeiden, da diese bei der Sprachausgabe keinen Zusammenhang zum Ziel des Links bieten. Das Ziel sind sprechende Links, die eine Verbindung zum verlinkten Inhalt herstellen, und bei der Erstellung dabei helfen den eigenen Schreibstil zu verbessern.

Alternative Attribute von Bildern, und Beschreibungen für Infografiken und Diagramme sind wichtig und sollen eine verständliche Erklärung des Dargestellten enthalten. Ihre Anregung beim Schreiben der alternativen Texte daran zu denken den Inhalt am Telefon oder in einer E-Mail zu erklären finde ich hilfreich:

»It might help to think about how you would explain the contents of the media to someone over the phone, or via email.«

Bezüglich der Strukturierung des Inhalts gab es mit dem Aufkommen von HTML5 eine Diskussion über die mehrfache Verwendung von Überschriften erster Ordnung (h1) in einem Dokument. Auch wenn das laut Spezifikation möglich ist, rät Kalbag diese nur für den Titel der Seite zu verwenden und damit die Hauptfunktion der Seite zu bezeichnen.

Für Formulare ist die Verknüpfung von label und input und erforderliche Felder mit einem entsprechenden Texthinweis im label zu versehen – und eben nicht mit dem zur Gewohnheit gewordenen Sternchen*. Dadurch bleibt die Benutzbarkeit offensichtlich und erfordert keine Vorerfahrung.

Um eine Webseite auch gut mit der Tastatur bedienen zu können helfen die tabindex Attribute. tabindex="0" weist die Tastatur-Navigation darauf hin das Element in der standardisierten Reihenfolge zu beachten. tabindex="-1" entfernt das Element aus der standardiesierten Reihenfolge. Daher ist die Verwendung von tabindex="-1" in Elementen die per Sprungmarken angesteuert werden hilfreich. Springt ein_e User_in zu einem Bereich mit tabindex="-1" wird diesem Bereich der programmatische Fokus zugewiesen, ein weiterer Tab findet dann zum entsprechend nächsten Element statt. Der Fokus bleibt nicht – wie ohne tabindex – an der ursprünglichen Stelle.

Im weiteren Verlauf des fünften Kapitels bespricht sie WAI-ARIA, was Web Accessibility Initiative—Accessible Rich Internet Applications bedeutet und als zusätzliche Ebene auf dem gut strukturierten HTML die Sprachausgabe der Inhalte unterstützt. Damit lassen sich Rollen, Bereiche, Status, Attribute und Live Regions definieren, die dann jeweils entsprechend besser zugänglich sind. Es bietet sich meiner Ansicht nach an über WAI-ARIA zu einem späteren Zeitpunkt nochmals zu schreiben.

Testen

Die aufmerksame Integration des Universal Design Konzepts in die Entwicklung einer Webseite sollte von regelmäßigen Tests begleitet werden.

»Regular testing will reassure you that you’re heading in the right direction, or give you new targets if the accessibility falls short.«

Neben den Tests durch eine breite Gruppe von User_innen empfiehlt sie das WebAIM’s WAVE web accessibility evaluation tool. Dabei handelt es sich um ein Webtool, mit dem die Barrierefreiheit einer Webseite überprüft werden kann. WAVE stellt die Webseite im Browser dar, und versieht sie an den entsprechenden Stellen mit Hinweisen auf Aspekte der Barrierefreiheit. Features, Warnungen und Fehler werden hervorgehoben, wodurch der testenden Person direkt weitere Einsichten bezüglich der Barrierefreiheit vermittelt werden.

Richtlinien

Im siebten Kapitel schriebt Kalbag über Gesetze und Richtlinien. Dabei erwähnt sie den Europäischer Rechtsakt zur Barrierefreiheit und die Web Content Accessibility Guidelines (WCAG) 2.0.

Die Web Content Accessibility Guidelines (WCAG) 2.0 enthalten drei Konformitätsstufen (A, AA und AAA), die darüber Aufschluss geben wie gründlich die Richtlinien umgesetzt werden. Die Richtlinien selbst sind durch vier Prinzipien strukturiert, welche mit den oben erwähnten Aspekten von Kalbag verwandt sind:

  • Prinzip 1: Wahrnehmbar – Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.
  • Prinzip 2: Bedienbar – Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.
  • Prinzip 3: Verständlich – Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.
  • Prinzip 4: Robust – Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.

Zusammenfassung

Am Ende des siebten Kapitels fasst sie ihr Anliegen der Integration von Barrierefreiheit in den gesamten Entstehungsprozess einer Website in drei Haltungen zusammen:

  • Aufmerksam sein.
  • Flexibel bleiben.
  • Auf die Bedürfnisse der User_innen achten.

Wenn alle Beteiligten auf Barrierefreiheit achten und ihre Aufgaben aufmerksam erledigen, sind wir auf einem guten Weg. In Anbetracht der stetigen Veränderung und der jeweiligen Anforderungen ist es wichtig flexibel zu bleiben und unterschiedliche Schwerpunkte zu setzten und schließlich empfiehlt sie Richtlinien als solche zu verstehen, und die Bedürfnisse der User_innen zu beachten.

Bevor sie eine Fülle von Ressourcen und weiterführende Links anführt, schließt sie ihre Ausführungen mit dieser ansteckenden Vision:

»We need to work together to make and keep the web open, affordable, and available to all. Accessibility is our way to ensure that nobody gets shut out.«

Wie bereits deutlich wurde halte ich Accessibility for Everyone von Laura Kalbag für ein sehr gelungenes Buch und empfehle es gerne weiter. Kalbag gelingt es sehr gut die Auswirkungen von Universal Design deutlich zu machen, darüber hinaus kombiniert sie gekonnt grundsätzliche Überlegungen mit konkreten Beispielen.

10 Reaktionen

Reagiere darauf

*