| Quick-Check für Auftraggeber:innen
Ist meine Website barrierefrei nach WCAG?
Das Barrierefreiheitsgesetz (BaFG) ist in aller Munde: Unternehmen mit mehr als 10 Mitarbeiter:innen und 2 Millionen Euro Umsatz müssen ihren Webauftritt für alle User zugänglich machen. Doch wie stellen Auftraggeber:innen fest, ob und wie weit die Website diese Anforderungen erfüllt? Unsere einfache Anleitung zeigt dies in wenigen Schritten - einfach nachvollziehbar auch für Laien.
Eine Überprüfung auf Barrierefreiheit wird von Expert:innen mit viel Sorgfalt durchgeführt. Neben automatisierten Prüftools ist besonders die manuelle Überprüfung von Navigation, Inhalt und HTML-Code ein wichtiger Indikator für das Ergebnis. Der Aufwand dazu kann schnell etliche tausend Euro erreichen.
Damit Auftraggeber:innen aber grundsätzlich einen Eindruck davon bekommen können, ob eine Website Accessibility berücksichtigt, haben wir einige einfache Schritte zusammengestellt. Wie zu erwarten decken diese natürlich nur einen sehr kleinen – aber elementar wichtigen – Bereich der WCAG-Kriterien. Empfehlenswert ist auch ein Blick auf die häufigsten nicht erfüllten Barrierefreiheitskriterien in Österreich.
1. Einfache Prüfung mit dem Browser
Der erste Schritt kann mit jedem Browser erfolgen, denn so gut wie alle Browser folgen heute den Richtlinien der User Agent Accessibility Guidelines (UAAG) der WAI. Sie sollten also den barrierefreien Zugang ermöglichen.
- Öffne die entsprechende Seite in deinem Browser und blicke kritisch darüber:
- Ist alles lesbar, weil die Kontraste ausreichend sind?
- Sind die wichtigen Bereiche (Navigation, Hauptinhalt) klar erkennbar?
- Sind klickbare Elemente, Buttons, Links auch als solche erkennbar?
- Sind Texte ausreichend groß?
- Kannst du die Textgröße ändern (Mac OS: CMD-(Apple-)Taste und + oder - / Windows: STRG-Taste und + oder -)?
- Überprüfe die Tastaturnavigation: Dazu benutze die „Tabulator“-Taste (das muss u.U. in den Einstellungen aktiviert werden)
- Du solltest dabei von einem interaktiven Element zum nächsten springen können.
- Kannst du erkennen, wo du gerade bist?
- Sind alle Menüpunkte erreichbar; dies betrifft insbesondere auch Untermenüs, die zu öffnen sind?
- Ist der jeweilige Fokus hervorgeben (Umrandung)?
Wenn diese Minimumanforderungen nicht erfüllt sind, ist die Website auf jeden Fall nicht barrierefrei.
2. Code-Überprüfung mit dem Browser
Im nächsten Schritt wagen wir einen Blick auf den Quellcode, die HTML hinter jeder Website.
- Klick mit der rechten Maustaste auf ein Bild > „Untersuchen“ (Chrome, Firefox, Edge) oder „Element-Informationen“ (Safari)
- Gibt es innerhalb des <img>-Tags ein „alt“? Dies darf leer sein, es muss jedoch vorhanden sein.
- Klick mit der rechten Maustaste auf die höchste Überschrift der Seite.
- Ist diese innerhalb eines <h1>-Tags? Gibt es auf der ganzen Seite nur einmal die <h1>?
- Wiederhole dies mit den anderen Überschriften.
- Sind diese korrekt mit <h>-Tags ausgezeichnet? Die Hierarchie muss entsprechend korrekt sein: wichtigste zu unwichtigster von <h1> zu <h6>
3. Überprüfung mit Chrome Lighthouse
Google’s Chrome-Browser hat ein eingebautes Prüftool, das sich Lighthouse nennt. Neben diversen Informationen zu Code-Qualität bietet es auch einen (rudimentären) Überblick zur Barrierefreiheit.
- Klick irgendwo in deine Website mit der rechten Maustaste > „Untersuchen“
- Im nun geöffneten Bereich gibt es ganz oben Reiter namens „Elements“, „Console“ usw.
- Hier findest du auch einen Reiter „Lighthouse“ (eventuell bei Klick auf den Doppelpfeil)
- Du kannst nun mit „Seitenaufbau analysieren“ / „Analyze page load“ die Seite analysieren lassen. Wähle nur die Funktion „Bedienungshilfen“ / „Accessibility“ aus. Stelle ausserdem sicher, dass keine weiteren Chrome-Erweiterungen aktiv sind, die das Ergebnis beeinflussen könnten.
- Im nun erstellten Audit findest du im Bereich „Barrierefreiheit“ / „Accessibility“ einen Score, der von 0 bis 100 reicht, und einen ersten Eindruck von der technischen Barrierefreiheit der Seite geben kann.
4. Überprüfung mit kostenlosen Erweiterungen
Spezifische Erweiterungen für deinen Browser können detailierte Informationen zur Barrierefreiheit liefern. Auch diese arbeiten rein automatisch nach Checklisten. Generell wird davon ausgegangen, dass nur ein Drittel der WCAG-Kriterien automatisiert überprüft werden können. Beim Rest ist man weiterhin auf manuelle Checks und Code-Überprüfung durch Experten angewiesen.
Wir können folgende Erweiterungen dazu empfehlen:
silktide
Erweiterung für Chrome, www.silktide.com
Eine der neuesten Erweiterungen bietet eine breite Palette an nützlichen Werkzeugen zur Überprüfung einer Website. Der „Accessibility checker“ führt automatische und assistierte Checks nach WCAG-Kriterien in beliebig wählbaren Stufen durch. „Alt text“ zeigt einen schnellen Überblick über die verwendeten Alternativbeschreibungen bei Bildern auf der Seite. „Screen reader“ ermöglicht einen niederschwelligen Eindruck von der Ausgabe des Inhalts auf einen Screenreader (wenn auch nicht immer ganz korrekt) und bietet dazu sogar Navigationsmöglichkeiten wie mit der Tastatur. Auch Fokus-Reihenfolge, Überschriften und Seitenbereiche (Landmarks) können einfach kontrolliert werden.
WAVE
Erweiterung für Chrome, Firefox und Edge, wave.webaim.org
Ein bewährtes Tool zum Check sind auch die WAVE Web Accessibility Evaluation Tools von webaim, die neben einem kurzen Überblickscheck auch eine Werkzeugkiste an nützlichen Instrumenten zur Überprüfung von Code, Struktur, Kontrast und Reihenfolge bietet.
ARC Toolkit
Erweiterung für Chrome und Firefox, www.tpgi.com
Ebenfalls einen guten ersten Eindruck erhält man mit den automatischen Tests des ARC Toolkits. Wie bei allen automatisierten Überprüfungen ist auch hier mit Sorgfalt das angezeigte Ergebnis zu prüfen.
5. Überprüfung mit einem Screenreader
Wer einen Eindruck davon bekommen will, wie Betroffene wirklich die Website erleben, kann dies mit einem Screenreader tun.
Diese Software liest nicht nur die Inhalte vor, sondern gibt in der Regel auch Informationen zu Struktur und Navigation aus. So wird es z. B. Menschen mit Sehbeeinträchtigungen ermöglicht, Websites, Dokumente und Software zu bedienen.
Screenreader werden heute in die meisten Betriebssystemen bereits inkludiert: Bei Mac ist dies VoiceOver (Aktivierung unter Systemeinstellungen > Bedienungshilfen), bei Windows unter Einstellungen > Erleichterte Bedienung > Sprachausgabe. Jedoch ist unter Windows mittlerweile NVDA beliebter, der unter www.nvaccess.org kostenlos erhältlich ist.
Die Benutzung von Screenreadern kann für den ungeübten User sehr anspruchsvoll sein. Trotzdem ist dieser gerade bei der vollständigen Überprüfung durch Expert:innen wichtig.
Aufschlussreich kann auch der Test direkt mit Betroffenen sein, wobei hier stets im Hinterkopf behalten werden muss, dass jede:r User:in meist sehr individuelle Lösungen, Einstellungen und Hilfsmittel für seine persönlichen Herausforderungen verwendet.
6. Korrektur der Website
Momentan sind sehr wenige Websites vollständig barrierefrei nach den vorgeschriebenen Kriterien. Es gibt zwar im Gesetz Ausnahmen von der Pflicht zur Barrierefreiheit bei gewissen Inhalten, auf Dauer sollte jedoch eine vollständige Compliance angestrebt werden.
Bei der Fehlerbehebung wird gewöhnlich eine Prioritätenliste erstellt. Viele Mängel lassen sich schnell beheben, einige benötigen mehr Zeit und vor allem Fachwissen. Besonders bei interaktiven Elementen wie Formularen kann ein umfangreicher Umbau des Codes notwendig sein. Die Optimierung zu Digitaler Barrierefreiheit lässt sich auch ideal mit einem Relaunch der Website kombinieren, bei der auch sonstige aktuelle Themen wie Digitalisierung oder Datenschutz up-to-date gebracht werden.
Vorsicht vor Overlay Tools: Verschiedene Anbieter versprechen die all-in-one-Lösung mit sogenannten Overlays. Dies sind Javascripts, die sämtliche Herausforderungen der Barrierefreiheit quasi automatisch beheben sollen. Wie die berüchtigte "Schlangenöl"-Medizin aus dem Wilden Westen ist auch hier Vorsicht geboten. Zahlreiche Studien haben nachgewiesen, dass Overlays in keinem Fall alle Probleme beheben konnten – vielmehr wurden meist zusätzliche Hürden erzeugt. Deshalb sprechen sich alle namhaften Expert:innen klar gegen die Verwendung von Overlays aus.
Expert:innen finden: In der Regel werden diese Schritte zur Accessibility nicht von Webdesigner:innen zu lösen sein, denen das umfassende Wissen zu Digitaler Barrierefreiheit fehlt. Es empfiehlt sich, Expert:innen dazuzuholen, die Kompetenzen und Erfahrung mitbringen. Ein hilfreicher Indikator sind dabei Zertifizierungen des Know-Hows, wie es z. B. incite oder IAAP anbieten.
dacc digital.accessibility verfügt über Fachleute mit incite-Zertifizierung und kann auf umfangreiche Erfahrung in der Umsetzung von barrierefreien Websites und digitaler Dokumente für Auftraggeber:innen mit höchsten Ansprüchen zurückblicken. Wir können bestehende Websites gängiger Content Management Systeme wie Contao, WordPress, Joomla oder Drupal ebenso bearbeiten, wie Sie bei der Überarbeitung und Neuerstellung von Webprojekten jeder Größe unterstützen.
Treten Sie mit uns in Kontakt für ein Erstgespräch!