Barrierefreiheit in den Workflow einbinden

Drei wichtige Regeln für eine kostengünstige und effiziente Umsetzung

Wie lässt sich barrierefreies Webdesign kostengünstig und effizient umsetzen? Drei Regeln sollten Agenturen beachten:

  1. Bedenken Sie Barrierefreiheit von Anfang an mit - bauen Sie gleich ohne Stufen, dann müssen nachträglich keine Rampen eingesetzt werden
  2. Binden Sie alle Beteiligten ein: Kundenberater, Projektmanager, Konzepter, Designer, Entwickler, und natürlich den Kunden. Nicht alle müssen zu Experten werden, aber für seinen Bereich sollte jeder zur Barrierefreiheit beitragen können. Wenn das Team gut zusammenarbeitet und alle wissen, worauf zu achten ist, erreichen Sie Ihr Ziel leichter und schneller.
  3. Integrieren Sie Barrierefreiheit in alle Arbeitsprozesse – denn sie spielt in jedem Schritt der Produktion eines Webauftritts eine Rolle

Barrierefreiheit ist Teamwork - von Anfang an

Schaffen Sie Bewusstsein im Team

Barrierefreiheit soll von Anfang an und von allen Beteiligten umgesetzt werden?
Falsche Vorstellungen in Bezug auf das Thema können dazu führen, dass die Anforderungen nicht konsequent berücksichtigt werden. Wer verstanden hat, warum Barrierefreiheit wichtig ist, welche Vorteile sie für alle Nutzer mitbringt, und dass Barrierefreiheit aufgrund der uns zur Verfügung stehenden Techniken nicht in der Kreativität einschränkt, wird die Aufgabe stärker annehmen und engagierter in die Umsetzung gehen. Dies spart Zeit und Kosten.
Wer weiß, wie Menschen mit Einschränkungen das Web nutzen, kann sich bei jedem Arbeitsschritt abseits von abstrakten Richtlinien in den Nutzer hineinversetzen und sich fragen: Ist das eingesetzte Modul auch für einen Screenreadernutzer verständlich und bedienbar? Oder kann ein motorisch eingeschränkter Nutzer, den Hilfe-Text eines Formulars auch per Tastatur einblenden, um nur zwei Beispiele zu nennen.

Die Anforderungen kennen und verstehen

Einer der wichtigsten Gründe, warum Barrierefreiheit nicht berücksichtigt wird, ist mangelndes Know-how. Vielfach gibt es nur eine vage Vorstellung von den Anforderungen. Je konkreter man weiß, worauf es ankommt, desto erfolgsversprechender ist die Umsetzung. Viele Aspekte von Barrierefreiheit können ohne großen Aufwand verwirklicht werden. In der Hauptsache geht es darum, Coding-Standards zu folgen und Usability-Aspekte zu berücksichtigen.
Mit mehr Aufwand verbunden sind in der Regel Websites mit vielen dynamischen, JavaScript-basierten Modulen, die angepasst werden müssen. Hier kann es Sinn machen, Erfahrungen und Best Practice Beispiele für zukünftige Projekte zu dokumentieren und zu sammeln.
Auch wenn jeder über Know-how verfügen sollte - zumindest für größere Agenturen gilt: Gibt es einen Barrierefreiheitsexperten in den einzelnen Abteilungen, wie z.B. Design, Entwicklung etc., so hat das den Vorteil, dass dieser bei Fragen hinzugezogen werden kann und er engagiert vorangeht.
Informationen zu barrierefreiem Webdesign finden Sie unter www.bik-für-alle.de und www.bitvtest.de.  Wir bieten außerdem zielgruppengerechte Seminare für Agenturen an.

Definieren Sie Rollen und Verantwortlichkeiten

Für Barrierefreiheit sind nicht nur Entwickler verantwortlich. Barrierefreiheit ist Teamwork, jeder sollte wissen wo seine Verantwortung liegt:

Kundenberater

Kundeninformation ist der erste Schritt. Ihre Kunden wissen oft noch nichts über Barrierefreiheit und  werden Sie womöglich nie danach gefragt haben. Das ist kein Wunder. Während Bundes- und Länderbehörden durch gesetzliche Vorgaben zu Barrierefreiheit verpflichtet sind, ist man in vielen Bereichen der Privatwirtschaft noch nicht mit dem Thema in Berührung gekommen. Die Webseiten-Anbieter wissen in vielen Fällen nicht, dass sie mögliche Kunden durch Zugangsschranken im Internetauftritt ausgrenzen. Erläutern Sie die Vorteile von Barrierefreiheit und stellen Sie dar, wer davon profitiert. Informieren Sie Ihren Kunden darüber, dass er Barrierefreiheit auch nach außen demonstrieren kann. Dafür eignet sich das BITV/WCAG-Prüfsiegel.

Kommunizieren Sie das Thema Barrierefreiheit auch während des Entwicklungsprozesses und erläutern Sie beispielsweise, warum Ihre Umsetzungsvorschläge Barrierefreiheit unterstützen.

Projekt Manager

Auch wenn alle Beteiligten zur Umsetzung von Barrierefreiheit beitragen, sollte jemand im Team den Hut aufhaben und explizit für das Thema verantwortlich sein. Dies kann der Projekt Manager sein. Zu seinen Aufgaben gehört es dann, im ersten Schritt Bewusstsein im Team zu schaffen. Außerdem sollte er die Guidelines kennen und verstehen, damit er die Anforderungen den einzelnen Teammitgliedern in jeder Projektphase zuordnen kann. Droht die Barrierefreiheit über einen längeren Entwicklungsprozess auf der Strecke zu bleiben, sollte er sie stetig einfordern. Er sollte auch erkennen, ob und wann es sinnvoll ist, externe Experten einzubinden.

Konzeption/User Experience

In der Konzeptionsphase werden die Weichen für barrierefreies Design gestellt. Etwa durch Fragen wie: Welches CMS kommt zum Einsatz? Wie gut unterstützt es Barrierefreiheit für Entwickler und Redakteure? Welche Techniken werden eingesetzt? Eine JavaScript-freie Seite muss nicht sein. Es ist dennoch ratsam, zu überlegen, ob und welche Widgets sinnvoll sind und welche Frameworks eingesetzt werden. Der Austausch mit den Entwicklern kann an dieser Stelle hilfreich sein. Diese sollten einschätzen können, wie aufwändig Anpassungen hinsichtlich Barrierefreiheit sind.
Weitere Fragen können sein, welche externen Quellen einbezogen werden. Sind die Module von Drittanbietern barrierefrei? Für welche Endgeräte soll der Auftritt optimiert werden? Auch die mobilen Ansichten müssen barrierefrei sein. Und nicht zuletzt sind Usability-Aspekte wie eine konsistente Navigation und ein einfach und nachvollziehbarer Aufbau des Auftritts auch Anforderungen der Barrierefreiheit.

Designer

Auch beim Design gibt es viele Aspekte, die die Barrierefreiheit betreffen, zum Beispiel im Hinblick auf Farben und Kontraste. Sind die Helligkeitskontraste von Schriften und Bedienelementen ausreichend? Hierzu gibt es konkrete Vorgaben durch die WCAG.
Können auch farbfehlsichtige Menschen die Seite wahrnehmen? Sind z.B. Links im Fließtext oder ausgewählte Menüoptionen neben einem Farbwechsel zusätzliche hervorgehoben?
Denken Sie außerdem daran, nicht nur den Mausfokus, sondern auch die Fokushervorhebung bei Tastaturbedienung zu gestalten. Die Entwickler setzen das um, was Sie hier vorgeben. Eine gute Hervorhebung ist die Voraussetzung, dass sich Tastaturnutzer bei der Navigation orientieren können.

Entwickler

Entwickler sind für die technische Umsetzung verantwortlich. Wichtige Voraussetzungen für die Zugänglichkeit mit assistiven Technologien wie z.B. Screenreader oder Spracheingabe sind ein semantisch korrekter Code und eine gute Tastaturbedienbarkeit. Das heißt, alle Bedien- und Formularelemente sollten mit der Tastatur fokussierbar sein und zwar in einer schlüssigen Reihenfolge und mit einer sichtbaren Fokushervorhebung. Kann die Semantik mit nativem HTML nicht zur Verfügung gestellt werden, muss sie mit WAI ARIA ergänzt werden. Dies ist in der Regel bei dynamischen mit JavaScript gesteuerten Komponenten der Fall, sofern man nicht Module einsetzt, welche schon so angepasst sind. Die WAI ARIA Authoring Practices sind eine hilfreiche Ressource für die zugängliche Umsetzung von Widgets, wie z.B. Tap Panels oder Akkordeons.

Redakteure

Auch Redakteure, die die Inhalte einpflegen und aktualisieren, sind an der Barrierefreiheit des Auftritts beteiligt. Sie sind verantwortlich für die korrekte Auszeichnung von Überschriften, Listen, Tabellen etc. und müssen die Alternativtexte für Grafiken verfassen.
Zur nachhaltigen Sicherstellung der Barrierefreiheit ist deshalb die Schulung der Redakteure wichtig. Diese kann gut in eine allgemeine Schulung zum Umgang mit dem CMS integriert werden.
Überlegen Sie in diesem Zusammenhang, inwieweit das CMS angepasst werden sollte, damit Redakteure vom System möglichst optimal unterstützt werden, beispielsweise hinsichtlich Sprach- oder Tabellenauszeichnung oder Beschriftung der Eingabefelder für Alternativtexte. Bei vielen gängigen CMS ist das jedoch von Haus aus schon gut gelöst.

Testen – früh und regelmäßig

Bereits bei der Entwicklung von Prototypen sollten die Anforderungen der WCAG bzw. BITV/EN 301 549 beachtet werden. Es ist schwieriger und teurer, etwaige Fehler hinterher zu korrigieren, deshalb ist es sinnvoll, früh und regelmäßig in jeder Phase des Entwicklungsprozesses zu testen. Hilfreich können automatische Tools sein. Man kann aber nur einen kleinen Teil der Aspekte damit prüfen, das heißt, sie reichen nicht aus. Testwerkzeuge für die manuelle Prüfung stehen in Form des BIK BITV-Tests und des BIK WCAG-Tests zur Verfügung. Der Test kann intern, qualitätssichernd als Selbstbewertung genutzt werden, da er die Anforderungen der BITV/EN 301 549 bzw. der WCAG (auf Konformitätslevel A und AA) in einzelnen Prüfkriterien erläutert und operationalisiert. Sinnvoll kann auch sein, mit Screenreader zu testen. NVDA ist beispielsweise ein Open-Source Screenreader für Windows, der bei Unklarheiten unterstützend eingesetzt werden kann (meist in Kombination mit Firefox). Die Bedienung von NVDA wird sehr gut in einem Erklärvideo von Rob Dodson erläutert.

Strebt der Kunde ein Prüfsiegel an, ist es nötig, den BIK BITV- oder WCAG-Test von einem Experten oder einer Expertin durchführen zu lassen. Die Prüfstellen des deutschlandweiten BIK BITV-Test-Prüfverbunds unterstützen Sie mit verschiedenen kostenpflichtigen Testangeboten auf Ihrem Weg zur Konformität: Vom ersten Layout-Test, über einen ersten BITV- oder WCAG-Test mit ausführlichem Prüfbericht der Mängel und Hinweisen für die Optimierung, bis zum zertifizierenden BITV- oder WCAG-Test mit den etablierten BIK Prüfzeichen.

Links zur Rubrik "Tipps & Techniken"