Wissens-Datenbank:
Barriere­freie Web­entwicklung

Hier findest Du nützliche Artikel, Tools und Websites rund um das Thema Barrierefreiheit, barrierefreies Webdesign und Entwicklung.

Hauptinhalt #

Meine Top 10 Tools

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 Barrierefreiheit im Web
BereichScreenshotBeschreibung und Link
CodeScreenshot von Programm Google Lighthouse im Browser, zeigt Testwertung von Website wanjapflueger.de mit 100 von 100 Punkten für die Bereiche Leistung, Barrierefreiheit, bewährte Praktiken und SEO#

Google – Barrierefreiheit 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, Barrierefreiheit, bewährte Praktiken und SEO für Jeden kostenfrei zugänglich ist.

www.google.com/accessibility

CodeYouTube Screenshot zeigt mehrere Vorschaubilder für Videos in YouTube Playliste „A11ycasts with Rob Dodson”#

„A11ycasts!” – YouTube Playlist

„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.

Link zur YouTube-Playlist

CodeScreenshot von Website zeigt interaktives Interface für Web Content Accessibility Guidelines mit Erfolgskriterien#

WCAG Level

„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

CodeScreenshot von Website zeigt Liste von verschiedenen Browsern mit Grad der Barrierefreiheit in Prozent.#

HTML5 Accessibility

„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

CodeScreenshot von Website a11y-style-guide.com/style-guide/ zeigt eine Seitenleiste und einen Ausschnitt aus einem Artikel. In dem Artikel geht es um die Programmierung eines mobilen Menüs.#

A11Y Style Guide

„This application is a living style guide or pattern library, [...] with an accessibility twist.”

Auf dieser Website findest Du barrierefreien 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

DesignScreenshot von Website userway.org/contrast zeigt Kontrastverhältnis 3.60 zwischen Vordergrund Farbe Rot #BC5D5D und Hintergrundfarbe Gelb #EFEEAE.#

Kontrast Checker

„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/

DesignMehrere unterschiedliche Komponenten einer Website, die einem einheitlichen Designsystem angehören.#

Google – Material 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.

material.io

DesignScreenshot von Website imperavi.com/books/web-interface-handbook/ zeigt ein Menü, und einen Ausschnitt aus einem Artikel. Der Artikel heißt „Web Interface Handbook”#

Web Interface Handbook

„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/

DesignScreenshot von Website getstark.co/library zeigt ein Menü, eine Seitenleiste und einen Ausschnitt aus einer Liste. In der Liste stehen Tools zum Thema „barrierfreie Farben”.#

Stark – Library

„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, EmailsGaming

www.getstark.co/library

TypografieScreenshot von Website leserlich.info zeigt eine Seitenleiste und einen Ausschnitt aus einem Artikel. In dem Artikel geht es um die Erkennbarkeit von Buchstaben aus unterschiedlichen Schriftfamilien.#

Leserlich

„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

#

Bachelor­thesis
„Design ohne Grenzen”

»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 & 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 (Link siehe unten).

Weiterführende Links