Die 103 Tipps haben eine grobe Struktur. Ich starte mit allgemeinem Wissen zu digitaler Barrierefreiheit, dann folgen Tipps für Design, Content-Erstellung und schlussendlich für die Entwicklung. Einige der Tipps sind allerdings nicht komplett einer Rolle zuzuschreiben und sind für alle relevant.
Die Tipps sind eine subjektive Zusammenstellung aus Kriterien der Barrierefreiheit, Webdesign und Nutzerführung. Nicht alle der 103 Punkte sind WCAG-relevant. Was wirklich für die WCAG gilt, erfährst du hier: Zu den WCAG-Kriterien.
Allgemeine Tipps zur Barrierefreiheit
- Barrierefreiheit wird Pflicht ab 2025 – bereite dich darauf vor. (Mehr zu den Gesetzen)
- Schau dir an, wie Menschen assistive Technologien nutzen, um dein Warum zu stärken und deine Motivation zu erhöhen. Zum Video von Apple über Barrierefreiheit. Zur Video-Reihe über Assistive-Technologien im Einsatz.
- Sammle selbst Erfahrungen mit Screenreadern, Sprachsteuerung und Tab-Navigation. (Schau dir unsere Screenreader-Vorführung mit einer blinden Person an)
- Schule dein Team – Barrierefreiheit kann man nicht fertig machen. (Mehr über Barrierefreiheit im Team)
- Hol dir den Plan zur Barrierefreiheit. (Barrierefreiheit bis 2025 – Dein gratis Plan)
- Kenne den wichtigsten KPI für digitale Barrierefreiheit: weniger Bugs in Produktion.
- Stelle sicher, dass jeder weiß: weniger Bugs, weniger Kosten.
- Verstehe die Chance: (2023/2024) barrierefrei zu werden, stärkt dein Marken-Image.
- Mache Inklusion zu einem Grundwert. (Mehr dazu, warum nur Inklusion die Zukunft ist)
- Etabliere ein Team für Barrierefreiheit in der Firma.
- Schaffe mehr Empathie für Menschen mit Behinderung. (Zu unseren Aufmerksam-Machern)
- Einstellungen in deinem Betriebssystem machen Overlay-Tools überflüssig. (Mehr zu deinen Einstellungen im Betriebssystem)
- Overlay-Tools ersetzen keine barrierefreie Programmierung.
- Verschwende dein Geld nicht mit Zertifizierungen. (Mehr zum Thema Zertifizierungen)
- Vergiss nie: HTML ist eigentlich von Grund auf schon barrierefrei.
Tipps für barrierefreies Design
- Mache Barrierefreiheit zu einer deiner Top drei Prioritäten bei Design-Entscheidungen.
- Lass dich von anderen barrierefreien Designs inspirieren. (Wenn du Lust hast dich kostenlos zu registrieren, gibt es auf Medium eine tolle Fallstudie von der Firma Wise über barrierefreies Design, englisch öffnet in neuem Tab.)
- Halte den Kontrast von Text zu Hintergrund bei mindestens 4.5:1.
- Halte den Kontrast von Buttons / Bedienelementen zum Hintergrund bei mindestens 3:1.
- Nutze diese Tools, um Kontraste zu testen: Zum Kontrast-Check von WebAIM, Zum Kontrast-Check von APCA.
- Gebe deinem Logo den richtigen Kontrast (keine Vorgabe, aber trotzdem schön!).
- Mache Fließtext nicht kleiner als 16 Pixel – besser 18 Pixel.
- Mache Buttons und andere bedienbare Elemente nicht kleiner als 24 mal 24 Pixel – besser 44 mal 44.
- Vermeide Slider.
- Vermeide Modal.
- Gestalte deine Layouts responsive.
- Bleibe konsistent in deinem Layout. (Beispiele: Platziere die Navigation, ein Chatbot oder die Hilfe immer an der gleichen Stelle.)
- Gestalte Buttons mit einem klar erkennbaren Fokus-State.
- Zeige wichtige Informationen nicht nur durch Farbe an. (Dein Design sollte auch in Schwarz-Weiß funktionieren).
- Verdeutliche insbesondere Fehlermeldungen durch Icons und Texte und nicht nur durch Farbe.
- Biete zusätzlich eine Suchfunktion an als Alternative zur Navigation.
- Beschrifte deine Icons. (Nicht jeder weiß, dass drei Striche ein Menü sind.)
- Vermeide blinkende Elemente.
- Wähle eine Schriftart, bei der sich die Buchstaben gut unterscheiden.
- Vermeide es, lange Texte zu zentrieren.
- Vermeide komplett weiße Hintergründe.
- Vermeide voll-schwarze Schrift (#00000) auf weißem Hintergrund.
- Vermeide Sticky-Navigationen.
- Vermeide starke Blautöne.
- Teile komplexe Formulare in Teilschritte auf. (Mehr zu Formularen.)
- Markiere in einem Formular nur die optionalen Felder. (Mehr dazu, warum du nur optionale Felder hervorheben solltest (englisch))
- Nutze Links als Links und Buttons als Buttons. (Mehr zu Links und Buttons)
- Ein Darkmode ist schön, aber nicht notwendig – dein Laptop kann das von allein. (Mehr zu Barrierefreiheit in Betriebssystemen)
- Nutze kein Rot-Grün, um wichtige Informationen zu visualisieren (10 % der Männer sind Rot-Grün-Blind).
- Dokumentiere deine Design-Entscheidungen bezüglich digitaler Barrierefreiheit. (Beispiel: Verschiedene Status der Elemente oder verschiedene Farbkombinationen.)
Tipps für barrierefreie Content-Erstellung
- Gebe Links sinnvolle Beschriftungen („Zum Kontaktformular“ anstatt „Hier klicken“).
- Gebe Bildern Alternativ-Texte.
- Schreibe Alternativ-Texte richtig. (Zum Artikel: Der perfekte Alt-Text)
- Beschrifte deine Icons.
- Schreibe lange Texte nie in nur Großbuchstaben.
- Vermeide Alt-Texte bei rein dekorativen Elementen (Striche / Formen / Bilder und Illustrationen ohne Aussage).
- Zeichne Fremdwörter in der richtigen Sprache aus. (Mehr zum HTML Lang-Attribut (englisch))
- Gebe jeder Unterseite deiner Webseite einen aussagekräftigen Titel.
- Vermeide den Einsatz von GIFs (ja, ich weiß, sorry!).
- Halte dich an die richtige Überschriften-Struktur (H1, H2, H3, H4 und so weiter).
- Bleibe konsistent in deiner Wortwahl. (Nicht einmal „Kontobereich“ und einmal „Dein Bereich“.)
- Schreibe keinen Text auf deine Bilder – assistive Technologien können diesen Text nicht lesen.
- Beschreibe Elemente nicht nur durch ihr Aussehen (Beispiel: der gelbe Button).
- Beschreibe Elemente nicht nur durch visuell wahrnehmbare Eigenschaften (Beispiel: der Button unten links).
- Erstelle eine Sitemap als Alternative zur Navigation.
- Nutze das HTML-Element „Blockquote“ für Zitate.
- Schreibe Untertitel für Videos.
- Erstelle Audiodeskriptionen für Videos (wenn nötig).
- Mache Untertitel für Live-Übertragungen verfügbar.
- Vermeide Tabellen – wenn du sie nutzen musst, gib ihnen die richtige HTML-Struktur.
- Gib deine Icons Alt-Texte, wenn sie eine Aktion auslösen.
- Mache deine PDFs barrierefrei. (Mehr zum Erstellen von barrierefreien PDFs)
- Vermeide Emojis.
- Vermeide es, Links direkt in Abschnitte zu setzen. Das stört den Lesefluss von Screenreadern. Setze die Links nach dem Absatz.
- Nutze <strong>, um Text Fett zu machen.
- Nutze <em>, um Text kursiv zu machen.
- Erstelle eine Barrierefreiheitserklärung. (Mehr zur Barrierefreiheitserklärung)
Tipps für barrierefreie Entwicklung
- Nutze HTML-Landmarks. (Mehr zur richtigen HTML-Struktur)
- Mache Animationen pausierbar, wenn sie länger als 5 Sekunden sind (dazu zählen auch automatische Slider).
- Achte darauf, dass Texte beim Zoomen nicht von anderen Elementen verdeckt werden.
- Baue Sprunglinks ein. (Mehr zu Sprunglinks im HTML)
- Wenn du mehrere Navigationen hast, benenne sie. (Mehr zu ARIA-Labels für Navigationen)
- Lasse Benachrichtigungen nicht automatisch verschwinden.
- Logge Nutzende nicht nach einer gewissen Zeit automatisch aus.
- Gebe Nutzenden genug Zeit für ihre Entscheidungen.
- Sorge für die vollständige Tastaturbedienbarkeit deiner Webseite / App.
- Teste deine Seite mit dem Screenreader.
- Ermögliche es, kritische Eingaben noch mal rückgängig machen zu können.
- Beschreibe jedes Formularfeld mit einem Label.
- Nutze das HTML-Autocomplete-Attribut für Formularfelder.
- Setze die richtige Sprache für deine Webseite. (Mehr zur richtigen Sprache im HTML)
- Wenn ich durch eine Fingerbewegung etwas tun kann (Beispiel: etwas ziehen), braucht es eine Alternative für Menschen, die das nicht können (Beispiel: ein Button zum Klicken).
- Verknüpfe deine Formularfelder per Code mit ihren Labels. (Mehr zu barrierefreien Formulare (englisch))
- Wenn du Captchas nutzt, gib den Nutzenden mehrere Alternativen.
- Setze die richtigen ARIA-Elemente für selbst gebaute Komponenten. (Mehr zu ARIA-Labels (englisch))
- Speichere Eingaben von Nutzenden (zum Beispiel in Formularfeldern), damit sie sie später nicht noch mal eingeben müssen.
- Gib Formularen aussagekräftige Fehlermeldungen.
- Vermeide es, dass ich mich an meine Log-In-Daten erinnern muss. (Mache das automatische Ausfüllen von Feldern möglich oder sende eine E-Mail für den Log-in).
- Teste deine digitales Produkt mit Menschen mit unterschiedlichen Behinderungen.
- Nutze keine HTML-Tabellen für dein Layout.
- Beschreibe in einer Fehlermeldung auch, wie man den Fehler behebt.
- Sorge dafür, dass Screenreader deine Elemente in sinnvoller Reihenfolge durchgehen.
- Nutze ARIA-Live-Region, um Veränderungen zu kommunizieren. (Mehr zu Live-Region (englisch))
- Nutze Bookmarklets, um HTML zu testen. (Liste von Bookmarklets der BIK)
- Nutze Bibliotheken für die Entwicklung. (Beispiel-Bibliothek von Kolibri)
Das Allerwichtigste!
- Schau dir die WCAG-Kriterien an für mehr Erklärungen. (Zur Übersicht der WCAG-Kriterien)
- Mache einen unserer Workshops mit! (Zu unseren Workshops)
- Erzähle jedem, wie wertvoll digitale Barrierefreiheit ist und warum sie alle mitmachen sollten!
