Praktischer Leitfaden für Web-Barrierefreiheit
Barrierefreiheit bedeutet, ein Web zu gewährleisten, das für alle nutzbar ist: Menschen mit Behinderungen, Senioren, mobile Nutzer, langsame Verbindungen, gebrochener Arm, laute Umgebungen usw.
Warum Barrierefreiheit?
Wenn wir für Behinderung gestalten, lösen wir Probleme, auf die jeder stößt
Bordsteinabsenkungen revolutionierten Städte für Rollstühle, aber auch für alle Fußgänger mit Koffern, Kinderwagen oder Fahrrädern.
Eine Verbesserung für einige kommt allen zugute. Dieses Konzept, das aus Straßenrampen entstanden ist, gilt perfekt für das Web.
Typisches Beispiel einer Bordsteinabsenkung
♿ Bordsteinabsenkungen
Entwickelt für : Rollstuhlfahrer
Nützt auch : Eltern mit Kinderwagen, Radfahrer, Lieferanten mit Sackkarre, Personen mit Rollkoffern, Skateboards, Roller, ältere Menschen
🎬 Video-Untertitel
Entwickelt für : Gehörlose oder schwerhörige Menschen
Nützt auch : Videos in der U-Bahn ansehen, eine Fremdsprache lernen, einer Konferenz in lauter Umgebung folgen, schwierige Akzente verstehen
⌨️ Tastaturnavigation
Entwickelt für : Menschen, die keine Maus verwenden können
Nützt auch : Entwickler, die Tastenkombinationen verwenden, Benutzer mit defekter Maus, Power-User, die die Tastatur bevorzugen, Personen mit Arm in Gips
📱 Sprachsteuerung für Smartphones
Entwickelt für : Blinde Menschen und Menschen mit motorischen Behinderungen
Nützt auch : Nachrichten beim Fahren, Sport mit Kopfhörern, beschäftigte Hände mit Werkzeugen, Fernbedienung, Multitasking im Büro
🪥 Elektrische Zahnbürste
Entwickelt für : Menschen mit eingeschränkter Mobilität oder Arthritis (1954)
Nützt auch : Besseres Zähneputzen für alle, von Zahnärzten empfohlen, Kinder beim Lernen, müde Menschen, bewiesene überlegene Effizienz
🎧 Hörbücher
Entwickelt für : Blinde Menschen (1932, American Foundation for the Blind)
Nützt auch : Autofahrer, Jogger, Multitasking, Legastheniker, Kinder, die lesen lernen, 1,3 Milliarden $ Umsatz im Jahr 2020
Barrierefreiheit ist keine Einschränkung, sondern getarnte Innovation.
Kostenlose Tools zum Testen der Barrierefreiheit
Diese Tools helfen Ihnen, Barrierefreiheitsprobleme zu identifizieren und zu beheben:
WAVE
Browser-Erweiterung, die Barrierefreiheitsfehler direkt auf Ihrer Seite visualisiert
axe DevTools
In DevTools integrierte Entwickler-Erweiterung, sehr präzise und detailliert
Lighthouse
In Chrome DevTools integriertes Audit, enthält einen Gesamt-Barrierefreiheitswert
MDN Accessibility
Vollständige Referenzdokumentation zur Web-Barrierefreiheit
Colour Contrast Analyser
Kostenlose Anwendung zum Testen von Farbkontrasten nach WCAG
Accessibility Insights
Microsoft-Tool-Suite für gründliche manuelle und automatisierte Tests
Accessible Game Jam
InteraktivTesten Sie Ihr Wissen über Web-Barrierefreiheit interaktiv! Ein Spiel zum Lernen mit Spaß.
Gängige Bildschirmleseprogramme
Die am häufigsten verwendeten Bildschirmleseprogramme verstehen, um Ihre Benutzeroberflächen besser zu testen:
NVDA
WindowsKostenloses und quelloffenes Bildschirmleseprogramm, sehr beliebt
JAWS
WindowsProfessionelles Bildschirmleseprogramm, historischer Marktführer
VoiceOver
macOS/iOSIn alle Apple-Geräte integriertes Bildschirmleseprogramm
TalkBack
AndroidStandard-Bildschirmleseprogramm auf Android
🧪 Wie man mit einem Bildschirmleseprogramm testet
- Schließen Sie die Augen oder schalten Sie den Bildschirm aus
- Navigieren Sie nur mit der Tastatur (Tab, Pfeile, Enter, Leertaste)
- Hören Sie genau zu, was angesagt wird
- Überprüfen Sie, dass alles verständlich ist, ohne den Bildschirm zu sehen
Hinweis : 15 Minuten Testen mit einem Bildschirmleseprogramm sind mehr wert als Stunden automatisierter Prüfung.
Schnellnavigation
Verwenden Sie das Seitenmenü oder diese Verknüpfungen, um Beispiele zu erkunden: