Barriere­freiheit

Hier findest Du allgemeine Informationen und nützliche Artikel, Tools und Websites rund um die Themen Barriere­freiheit, barriere­freies Webdesign und Entwicklung.

Eine Website ist barrierefrei, wenn sie trotz visueller, akustischer, motorischer oder kognitiver Einschränkungen bedienbar und ihr Inhalt verständlich ist.

Eine barriere­freie 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 barriere­freie 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 bist blind oder hast deine Maus verloren?
    Per Tastatur bedienbar!

Durch den Einsatz von barriere­freien 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 Barriere­freiheit?

Eine Website ist aus rechtlicher Sicht dann barrierefrei, wenn sie die Richtlinen der Verordnung zur Schaffung barriere­freier 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 barriere­freien 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!

Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
BereichScreenshotBeschreibung und Link
Code
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„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, Barriere­freiheit, bewährte Praktiken und SEO für Jeden kostenfrei zugänglich ist.

www.google.com/accessibility

Code
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„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 Barriere­freiheit im Web. Die Videos sind anschlaulich produziert und vermitteln unter anderem auch ein Verständnis darüber, wie Screenreader funktionieren.

Link zur YouTube-Playlist

Code
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„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).

www.w3.org/WAI/WCAG21/quickref

Code
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„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 input[type="color"] barrierefrei ist.

www.html5accessibility.com

Code
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„This application is a living style guide or pattern library, [...] with an accessibility twist.”

Auf dieser Website findest Du barriere­freien Code für häufig genutzte Komponenten. Du kannst dir beispielsweise den Code für ein mobiles Menü ansehen und in Deinem Projekt verwenden.

a11y-style-guide.com/style-guide

Design
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„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.

userway.org/contrast/

Design
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„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.

material.io

Design
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„This is a book about the fundamentals of creating a good web interface.”

Alles was Du über gutes Webdesign wissen musst. Auf dieser Website findest Du anschauliche Informationen zu Formularen, Typografie, Grid-Systemen und anderen häufig vorkommenden Elementen.

imperavi.com/books/web-interface-handbook/

Design
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„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 barriere­freien Entwicklung helfen. Unter anderem findest Du hier Artikel, Tools und Websites zu diesen Themen: Farben, (automatisiertes) Testen, EmailsGaming

www.getstark.co/library

Typografie
Liste mit Tools/Artikeln/Websites zu Barriere­freiheit im Web
„Schritte zu einem inklusiven Kommunikations­design”

Auf dieser Website findest Du eine umfassende und detaillierte Beschreibung von typografischen Eigenschaften, die im Web zu einer verbesserten Lesbarkeit beitragen.

www.leserlich.info

»Design ohne Grenzen – Vermeidung von Barrieren im Bereich Webdesign« ist meine Bachelor­thesis (eingereicht an der design akademie berlin in Berlin im Jahr 2018).

In meiner Thesis geht es um Barrieren im Allgemeinen und um barriere­freies Web. Ich habe mit Betroffenen gesprochen und eine Sammlung von Herangehensweisen, Tips und Empfehlungen für Designer und Entwickler zum Umgang mit Barriere­freiheit entworfen.

Die Thesis vermittelt ein Verständnis darüber, warum Barriere­freiheit 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.