Eine Website ist barrierefrei, wenn sie trotz visueller, akustischer, motorischer oder kognitiver Einschränkungen bedienbar und ihr Inhalt verständlich ist.
Eine barrierefreie Website kann also, unabhängig davon ob Du blind bist, weder Maus noch Tastatur bedienen kannst oder unterwegs einfach nur schlechten Empfang hast, problemlos bedient werden.
Darum sind barrierefreie Websites für Dich besser:
- Mobil schlechtes Netz?
Kurze Ladezeiten! - Datenvolumen fast verbraucht?
Reduzierte Datenmengen! - Nachts geblendet von hellen Farben?
Darkmode! - Ungeschickt mit der Maus?
Auf Dich wird gewartet! - In der U-Bahn ohne Ton?
Untertitel! - Du hast Deine Maus verloren?
Per Tastatur bedienbar!
Durch den Einsatz von barrierefreien Technologien und Standards verbessert sich für alle Nutzer:innen die Bedienbarkeit (UX) von Websites – für Alle in jeder Situation das beste Erlebnis!
Wie misst und bewertet man Barrierefreiheit?
Eine Website ist aus rechtlicher Sicht dann barrierefrei, wenn sie die Richtlinen der Verordnung zur Schaffung barrierefreier Informationstechnik (kurz: BITV 2.0) erfüllt.
Eine Website ist aus menschlicher Sicht dann barrierefrei, wenn sie allen Nutzer:innen gleichwertige Informationen liefert.
- Ein gutes Beispiel?
Diese Website ist zu 100% barrierefrei – warum das so ist, erfährst Du in der Konformitätserklärung. - Screenreader
In „How to navigate your iPhone or iPad with VoiceOver”, einem Informations-Film (Länge: ~4 Minuten) von Apple Support auf YouTube erfährst du, wie Blinde ein iPhone bedienen können, ohne das Display sehen zu können. - Testing
Die barrierefreien Eigenschaften von Websites können getestet werden. Das geht automatisiert mit Tools wie Lighthouse von Google – und manuell mit einem Screenreader (z.B.VoiceOver von Apple.
Ich kann Websites nach gesetzlichen Vorgaben wie BITV (siehe auch BITV 2.0) auf Basis von WCAG (siehe auch WCAG Quick Reference) barrierefrei umsetzen.
Du bist Webdesigner oder Entwickler?
Diese Sammlung enthält eine persönliche Auswahl an Tools, Resourcen und Websites, die mich als Web Entwickler und Web Designer in meiner täglichen Arbeit unterstützen.
Alle in der nachfolgenden Tabelle aufgeführten Tools/Artikel/Websites sind kostenlos zugänglich.
Du kennst ein Tool/Artikel/Website, das hier nicht aufgeführt ist und Du bist der Meinung, dass man es kennen sollte? Dann kontaktiere mich gerne!
Bereich | Screenshot | Beschreibung und Link |
---|---|---|
Code | „Jeder sollte auf das Web zugreifen und seine Vorzüge genießen können. Wir setzen alles daran, dies zu verwirklichen.” Mit Open-Source Tools wie Lighthouse trägt Google dazu bei, dass automatisiertes Testen von Websites auf Leistung, Barrierefreiheit, bewährte Praktiken und SEO für Jeden kostenfrei zugänglich ist. | |
Code | „Want to build accessible apps? Rod Dodson is teaching those fundamentals in his new series dedicated entirely to the art of accessibility.” Rod Dodson erklärt in durchschnittlich 10-minütigen Videos die Grundprinzipien von Barrierefreiheit im Web. Die Videos sind anschlaulich produziert und vermitteln unter anderem auch ein Verständnis darüber, wie Screenreader funktionieren. | |
Code | „A customizable quick reference to Web Content Accessibility Guidelines (WCAG) 2 requirements (success criteria) and techniques.” Mit diesem Tool kannst Du die konkreten Maßnahmen für die WCAG Konformitätsstufen A, AA und AAA filtern (hier findest Du weitere Informationen zu Konformität und konkreten Maßnahmen). | |
Code | „Get the current accessibility support status of HTML5 features across major browsers.” Diese Website zeigt Dir, welche HTML5-Elemente in welchem Browser barrierefrei umgesetzt sind. So kannst Du beispielsweise herausfinden, ob Dein | |
Design | „Ensuring a high contrast ratio for your site’s design can make it easier for visually impaired and color-blind users to read and interact with the contents of your website.” Hier kannst Du ganz einfach prüfen, ob Deine Farben ein ausreichendes Kontrastverhältnis haben. | |
Design | „Build beautiful products, faster.” Grundlagen für ein robustes Webdesign. Hier lernst Du die Prinzipien kennen, die hinter jeder Anwendung/Website von Google stehen. Es geht unter anderem um Farben, Formen, Typografie, Licht und Schatten. | |
Design | „Discover the world's best accessibility resources and educational content.” In dieser Wissens-Datenbank findest Du eine große Auswahl an Tools, die Dir mit der barrierefreien Entwicklung helfen. Unter anderem findest Du hier Artikel, Tools und Websites zu diesen Themen: Farben, (automatisiertes) Testen, Emails, Gaming | |
Typografie | „Schritte zu einem inklusiven Kommunikationsdesign” Auf dieser Website findest Du eine umfassende und detaillierte Beschreibung von typografischen Eigenschaften, die im Web zu einer verbesserten Lesbarkeit beitragen. |
»Design ohne Grenzen – Vermeidung von Barrieren im Bereich Webdesign« ist meine Bachelorthesis (eingereicht an der design akademie berlin in Berlin im Jahr 2018).
In meiner Thesis geht es um Barrieren im Allgemeinen und um barrierefreies Web. Ich habe mit Betroffenen gesprochen und eine Sammlung von Herangehensweisen, Tips und Empfehlungen für Designer und Entwickler zum Umgang mit Barrierefreiheit entworfen.
Die Thesis vermittelt ein Verständnis darüber, warum Barrierefreiheit im Web wichtig ist und welche Bedeutung es für die Betroffenen hat.
Im praktischen Teil der Thesis ist die Webanwendung „Blind im Web” entstanden. Sie ist eine Art interaktives Tutorial in welchem erlebt werden kann, wie Blinde das Web bedienen.
- Print-Ausgabe
Hier geht es zur Print-Ausgabe meiner Bachelorthesis
Hinweis: nicht barrierefrei, 12.1MB, PDF - Online-Ausgabe
Hier findest Du die Online-Ausgabe meiner Bachelorthesis
Hinweis: barrierefrei, 126KB, HTML - Blind im Web
Könntest Du eine Website blind bedienen? Probier es aus! Ein interaktives Erlebnis für Designer und Entwickler.
Hinweis: diese Anwendung ist absichtlich nicht barrierefrei und Du benötigst eine Tastatur.