Barrierefreies Webdesign - Checkliste für Entwickler
Thema Barrierefreiheit:
Technologie & Barrierefreiheit
vom 25.04.2023
Diese Checkliste richtet sich an alle Web-Entwickler die ihre HTML-Umsetzung(en)
barrierefrei entwickeln möchten. Diese Checkliste ist inspiriert durch die englischsprachige Liste von "The A11Y
Project".
Kriterien für den Erfolg
Jedem Punkt auf dieser Checkliste ist ein WCAG-Erfolgskriterium zugeordnet.
Die Kriterien sind bei allen Checkpunkten auf den jeweiligen Inhalt der W3C-Seite (englischer Text) verlinkt. Erfolgskriterien sind die
spezifischen, prüfbaren Regeln, die die WCAG bestimmen und durch eine Referenznummer und einen
Kurztitel beschrieben werden. Die Regel zur Größenanpassung von Text heißt zum Beispiel 1.4.4
Resize text.
Für einige Zugänglichkeitsfragen können mehrere Erfolgskriterien gelten. Wir haben für jeden Punkt
der Checkliste das relevanteste Kriterium ausgewählt.
Garantiert diese Checkliste, dass meine Website barrierefrei ist?
Nein, leider nicht. Die Behebung der in dieser Checkliste genannten Probleme wird jedoch dazu
beitragen, dass Deine Website für alle Nutzer besser zugänglich ist.
Die Punkte, die in dieser Checkliste aufgeführt sind, decken ein breites Spektrum von
Behinderungsarten ab.
Es gibt keine "perfekte Zugänglichkeit" oder eine Website, die "100% für jeden (!) zugänglich" ist.
Sei immer misstrauisch gegenüber Unternehmen und Diensten/Services, die solche Versprechungen machen.
Achte darauf, dass der Inhalt der Tags button,
a und Label Elementen eindeutig und beschreibend ist.
Begriffe wie "hier klicken" und "mehr lesen" bieten keinen Kontext. Manche Menschen navigieren mit Hilfe einer Liste aller Schaltflächen oder Links auf einer Seite oder in einer Ansicht. In diesem Fall geben die Begriffe an, was passiert, wenn man sie ansteuert oder aktiviert.
Textrichtung der jeweiligen Sprache berücksichtigen
Verwende linksbündigen Text für Sprachen mit Links-nach-Rechts-Ausrichtung (LTR) und entsprechend rechtsbündigen Text für Sprachen mit Rechts-nach-Links-Ausrichtung (RTL).
Generell gilt, das Text der zentriert ausgerichtet ist oder im Blocksatz angezeigt wird, schwieriger zu lesen sind.
Globaler und allgemeiner Code der die gesamte Webseite bzw. Anwendung betrifft.
Achte auf validen HTML-Code.
Valides, also gültiges, HTML, trägt dazu bei, eine konsistente, fehlerfreie und anzunehmende Darstellung in allen Browsern und sonstigen möglichen Ausgabekanälen zu erreichen.
Die Seite von w3.org bietet hierfür einen kostenlosen HTML-Checker an.
Gib für jede Seite oder Ansicht einen eindeutigen Titel an.
Das Titelelement, das im head des Dokuments enthalten ist, ist oft die erste Information, die vom Ausgabegerät (meisten Browser) angezeigt wird. Damit wird den Nutzern mitgeteilt, auf welcher Seite oder in welcher Ansicht sie die Navigation beginnen werden.
Der Zoom des Browsers darf nicht deaktiviert werden.
Manche Menschen müssen den Text so weit vergrößern, dass sie ihn lesen können. Halte sie nicht davon ab, dies zu tun, auch nicht bei Webanwendungen, die einer nativen Anwendung ähneln. Auch native Anwendungen sollten die Einstellungen des Betriebssystems oder des Browsers für die Größenänderung von Text respektieren und ermöglichen.
Verwende markante und semantisch korrekte HTML-Elemente, um wichtige Inhaltsbereiche Deiner Seite zu kennzeichnen.
Landmark-Regionen, oder besser Orientierungspunkte, helfen dabei, das Layout und wichtige Bereiche einer Seite oder Ansicht zu vermitteln, und ermöglichen einen schnellen Zugriff auf diese Bereiche.
Verwende zum Beispiel das nav-Element, um die Navigation einer Website zu umschließen, und das main-Element, um den Hauptinhalt einer Seite zu enthalten.
Sorge für einen linearen Inhaltsfluss und strukturierten Seitenaufbau.
Entferne tabindex-Attribute wo der Wert nicht 0 oder -1 ist.
Elemente, die standardmäßig fokussierbar sind, wie z. B. Links oder Buttons, benötigen keinen Tabindex.
Auf Elemente, die nicht von Natur aus fokussierbar sind, sollte außerhalb sehr spezifischer Anwendungsfälle kein Tabindex angewendet werden.
Vermeide die Reihenfolge der Fokus-Elemente zu ändern und die Verwendung des Attributs autofocus.
Blinde oder sehbehinderte Menschen können desorientiert sein, wenn der Fokus auf der Seite ohne ihre Zustimmung verschoben wird.
Außerdem kann der Autofokus für Menschen mit motorischen Einschränkungen problematisch sein, da es für sie zusätzliche Arbeit bedeuten kann, aus dem Autofokusbereich heraus und zu anderen Stellen auf der Seite/Ansicht zu navigieren.
Erlaube eine Verlängerung der Sitzungszeit (session timeout).
Wenn Du eine Sitzungszeitüberschreitung (session timeout) nicht ganz abschaffen kannst, solltest Du den Benutzern Deiner Website die Möglichkeit geben, ihre Sitzung vorzeitig zu beenden, anzupassen oder zu verlängern.
Das title-Attribut ist mit zahlreichen Problemen behaftet und sollte nicht verwendet werden,
wenn die bereitgestellten Informationen für alle Menschen wichtig sind.
Eine akzeptable Verwendung bzw. Ausnahme für das title-Attribut wäre die Kennzeichnung eines iframe-Elements, um anzugeben, welchen Inhalt es enthält.
Es ist wichtig, dass die Inhalte Deiner Seite mit Hilfe der Tastatur erreicht, bedient und navigiert werden können.
Manche Menschen können keine Maus benutzen oder verwenden andere unterstützende Technologien, die das Hovern oder präzise Klicken nicht ermöglichen.
Stelle sicher, dass es einen sichtbaren Fokusstil für interaktive Elemente gibt, die über Tastatureingaben angesteuert werden können.
Kann eine Person, die mit der Tastatur, einem Joystick, einer Sprachsteuerung oder einem Bildschirmlesegerät navigiert, sehen, wo sie sich gerade auf der Seite befindet und welches Element ausgewählt bzw. fokussiert ist?
Nicht sichtbare Elemente dürfen nicht fokussierbar sein.
Entferne die Möglichkeit, Elemente zu fokussieren, die nicht sichtbar sind.
Gemeint sind hier beispielsweise inaktive Dropdown-Menüs, Off-Screen-Navigationen oder Modals.
Ausnahme können hier sogenannte "Skip-Links" sein die optional erst angezeigt werden wenn sie fokussiert sind.
Bilder sind ein wesentlicher Bestandteil der meisten Websites. Stelle sicher und sorge dafür, dass die Bilder von allen Benutzern genutzt werden können.
Achte darauf, dass alle img-Elemente ein alt-Attribut haben.
Innerhalb des alt-Attributes (Alt-Text oder auch Alternativ-Text) wird eine Beschreibung des Bildes eingefügt. Diese Beschreibung ist für Personen, die es nicht sehen können sehr wichtig.
Wenn ein alt-Attribut bei einem Bild nicht vorhanden ist, kann ein Screenreader stattdessen nur den Dateinamen und den Pfad des Bildes anzeigen, der Inhalt des Bildes wird hierbei nicht übermittelt.
Vergewisser Dich, dass für dekorative Bilder die Werte des Attributs alt null (leer) verwendet werden.
Leere alt-Attribute werden manchmal auch als null alt-Attribute bezeichnet.
Sie werden erzeugt, indem keine Informationen zwischen den öffnenden und schließenden Anführungszeichen eines alt-Attributs eingefügt werden - alt="".
Dekorative Bilder übermitteln keine Informationen, die zum Verständnis der Gesamtbedeutung der Website erforderlich sind.
In der Vergangenheit wurden sie für Schnörkel und Spacer-Gif-Bilder verwendet, sind aber für moderne Websites und Webanwendungen eher weniger relevant.
Biete eine Textalternative für komplexe Bilder wie Diagramme, Schaubilder und Karten.
Gibt es einen einfachen Text, der Punkte auf der Karte oder Abschnitte eines Flussdiagramms auflistet?
Beschreibe alle sichtbaren Informationen. Dazu gehören beispielsweise die Achsen eines Diagramms, die Datenpunkte und Beschriftungen sowie die allgemeine Aussage der Grafik.
Überschriftenelemente (h1, h2, h3 usw.) helfen dabei, den Inhalt der Seite in zusammenhängende Teile von Informationen zu unterteilen.
Sie sind unglaublich wichtig, damit Menschen, die Hilfsmittel verwenden, die Bedeutung einer Seite oder einer Ansicht verstehen können.
Verwende Überschriftenelemente, um den Inhalt einzuleiten und zu strukturieren.
Überschriftenelemente dienen der Gliederung eines Dokuments und sollten nicht zur rein visuellen Gestaltung verwendet werden.
Das h1-Element sollte verwendet werden, um den übergeordneten Zweck bzw. das Thema der Seite oder Ansicht zu vermitteln.
Verwende das h1-Element nicht für eine Überschrift, die auf jeder Seite gleich ist, wie zum Beispiel den Name der Seite.
Die Überschriftenelemente sollten in einer logischen Reihenfolge geschrieben werden.
Die Reihenfolge der Überschriftenelemente sollte entsprechend der "Tiefe" des Inhalts absteigend sein.
So sollte beispielsweise ein h4-Element auf einer Seite nicht vor dem ersten h3-Element erscheinen.
Ein Tool wie headingsMap kann Dir dabei helfen, dies zu beurteilen.
Springe zum Beispiel nicht von einer h2 zu einer h4 und überspringe dabei quasi ein h3-Element.
Wenn Überschriftenebenen für eine bestimmte visuelle Behandlung übersprungen werden, verwende dafür stattdessen CSS-Klassen.
Anhand von Listenelementen kann man erkennen, ob eine Sammlung von Elementen miteinander in Beziehung steht,
ob sie aufeinander folgen und wie viele Elemente in der Listengruppierung vorhanden sind.
Listen sind daher wichtige Elemente um Inhalte strukturiert zu präsentieren.
Verwende Listenelemente (ol-, ul- und dl-Elemente) für Listeninhalte.
Dazu können Abschnitte mit verwandten Inhalten, visuell in einem rasterähnlichen Layout dargestellte Elemente oder geschwisterliche Elemente gehören.
Steuerelemente sind interaktive Elemente wie Links und Schaltflächen,
mit denen der Benutzer zu einem Ziel navigieren oder eine Aktion ausführen kann.
Nutze das a-Eelement für Links.
Links sollten immer ein href-Attribut haben, auch wenn sie in Single Page Applications (SPAs) verwendet werden.
Ohne ein href-Attribut wird die Verknüpfung nicht ordnungsgemäß für unterstützende Technologien angezeigt.
Ein Beispiel hierfür wäre ein Link, der ein onclick-Ereignis anstelle eines href-Attributs verwendet.
Stelle sicher, das Links auch als solche erkennbar sind.
Die Farbe allein reicht nicht aus, um das Vorhandensein eines Links anzuzeigen.
Unterstreichungen sind ein beliebtes und allgemein bekanntes Mittel, um das Vorhandensein von Link-Inhalten zu kommunizieren.
Stelle sicher, dass alle relevanten Steuerelemente den Status :focus haben.
Die Styels für den sichtbaren Fokus helfen den Nutzern festzustellen, welches interaktive Element gerade den Tastaturfokus hat.
Dadurch wissen sie, dass sie Aktionen wie das Aktivieren einer Schaltfläche oder die Navigation zum Ziel eines Links durchführen können.
Schaltflächen werden verwendet, um Daten zu übermitteln oder eine Aktion auf dem Bildschirm auszuführen, die den Tastaturfokus nicht verschiebt.
Du kannst type="button" zu einem button-Element hinzufügen, um zu verhindern, dass der Browser bei Aktivierung versucht, Formularinformationen zu übermitteln und die Schaltfläche als type="submit" behandelt.
Gebe einen Link zum Überspringen an um direkt zum relevanten Inhalt der Seite zu gelangen.
Stelle sicher, dass dieser Link sichtbar ist, wenn er fokussiert ist.
Ein Skip-Link kann verwendet werden, um einen schnellen Zugriff auf den Hauptinhalt einer Seite oder Ansicht zu ermöglichen.
Auf diese Weise kann der Benutzer leicht global wiederholte Inhalte wie die Hauptnavigation einer Website oder ein dauerhaftes Such-Widget umgehen.
Markiere Links, die sich in einer neuen Registerkarte oder einem neuen Fenster öffnen.
Vermeide idealerweise Links, die sich in einer neuen Registerkarte oder einem neuen Fenster öffnen.
Wenn ein Link dies tut, stelle sicher, dass das Verhalten des Links auf eine Weise kommuniziert wird, die für alle Nutzer offensichtlich ist.
Auf diese Weise können die Nutzer verstehen, was passieren wird, bevor sie den Link aktivieren.
Obwohl diese Technik technisch nicht erforderlich ist, um die Anforderungen zu erfüllen, ist sie ein häufig genannter Bereich, der bei vielen verschiedenen Arten von Nutzern von Hilfsmitteln für Frustration sorgt.
Verwende das th-Element für Tabellenüberschriften (mit entsprechenden Scope-Attributen).
Je nachdem, wie komplex eine Tabelle ist, kann man auch das Attribut scope="col" für Spaltenüberschriften und scope="row" für Zeilenüberschriften verwenden.
Viele verschiedene Arten von Hilfstechnologien verwenden das Attribut scope, um die Struktur einer Tabelle zu verstehen und zu beschreiben.
Formulare ermöglichen die Eingabe von Informationen auf einer Website, die dann verarbeitet und bearbeitet werden können.
Dazu gehören beispielsweise Dinge wie das Senden von Nachrichten und das Aufgeben von Bestellungen.
Alle Eingaben in einem Formular sind mit einem entsprechenden Beschriftungselement verbunden.
Verwende bei label eine for/id-Kopplung, um ein Höchstmaß an Browser-/Hilfsmittelunterstützung zu gewährleisten.
Verwende die Elemente fieldset und legend wenn benötigt.
Enthält Dein Formular mehrere Abschnitte mit verwandten Eingaben?
Verwende dann die Elemente fieldset, um sie zu gruppieren, und legend, um eine Beschriftung für den jeweiligen Abschnitt zu erstellen.
Eingaben in Formularelemente können gegebenenfalls automatisch vervollständigt werden.
Bereitstellung eines Mechanismus, der es den Nutzern ermöglicht, Formularfelder, in denen nach allgemeinen Informationen gefragt wird (z. B. Name, Adresse, Telefonnummer), schneller, einfacher und genauer auszufüllen.
Stelle sicher, dass Fehler bei der Formulareingabe nach dem Absenden in einer Liste oberhalb des Formulars angezeigt werden.
Auf diese Weise können Benutzer von Hilfstechnologien schnell einen Überblick über die im Formular vorhandenen Probleme erhalten.
Dies ist besonders wichtig für größere Formulare mit vielen Eingaben. Stelle ausserdem sicher, dass jeder gemeldete Fehler auch einen Link (label for="" oder aria-describedby) zu dem entsprechenden Feld mit der ungültigen Eingabe hat.
Verknüpfe Eingangsfehlermeldungen mit dem entsprechenden Eingang.
Techniken wie die Verwendung von aria-describedby ermöglichen es Menschen, die assistive Technologien verwenden, den Unterschied zwischen der Eingabe und der damit verbundenen Fehlermeldung leichter zu verstehen.
Vergewisser Dich, dass Fehler-, Warn- und Erfolgszustände nicht nur durch Farbe visuell kommuniziert werden.
Menschen, die farbenblind sind, eine andere Sehschwäche haben oder ein anderes kulturelles Verständnis von Farbe haben, sehen die Zustandsänderung möglicherweise nicht oder verstehen nicht,
welche Art von Rückmeldung der Zustand darstellt, wenn die Farbe der einzige Indikator ist. Hier bietet es sich an bei Fehlermeldungen zusätzlich zur Farbe noch Textformattierung und/oder Icons zu verwenden.
Zu den Medien gehören Inhalte wie aufgezeichnete und Live-Audio- und Videoinhalte.
Stelle sicher das Medien (Video oder Audio) nicht automatisch abspielen.
Unerwartetes Video- und Audiomaterial kann ablenkend und störend wirken, insbesondere bei bestimmten Arten von kognitiven Behinderungen wie ADHS.
Bestimmte Arten von automatisch abgespielten Videos und Animationen können Auslöser für Gleichgewichts- und Anfallsstörungen sein.
Achte darauf das Medien-Elemente mit den entsprechenden HTML-Elementen eingebunden sind.
So kann beispielsweise sichergestellt werden, dass eine Audio-Stummschalttaste gedrückt ist, wenn sie aktiv ist, oder dass ein Lautstärkeregler input type="range" verwendet wird.
Stelle sicher, dass alle Medien angehalten/pausiert werden können.
Biete eine globale Pausenfunktion für jedes Medienelement an.
Wenn das Ausgabegerät über eine Tastatur verfügt, stelle sicher, dass die Wiedergabe durch Drücken der Space-Taste angehalten werden kann.
Achte auch darauf, dass die Space-Taste nicht die Möglichkeit behindert, die Seite/Ansicht zu scrollen, wenn der Fokus nicht auf einem Formularsteuerelement liegt.
Stelle Abschriften/Transkripte des Audio-Inhaltes zu Verfügung.
Transkripte ermöglichen es Menschen, die nicht hören können, die Audioinhalte trotzdem zu verstehen.
Außerdem können sie Audioinhalte in einem für sie angenehmen Tempo verarbeiten.
Wie sieht der Inhalt Deiner Website/App in einer bestimmten Situation aussieht.
Prüfe die Inhalte in den speziellen und unterschiedlichen Browsing-Modi.
Aktivieren Sie Modi wie Hoher Kontrast oder Invertierte Farben.
Ist Ihr Inhalt noch lesbar? Sind Ihre Icons, Rahmen, Links, Formularfelder und andere Inhalte noch vorhanden bzw. sichtbar?
Können Sie den Inhalt im Vordergrund vom Hintergrund unterscheiden?
Vergewisser Dich, dass die Nähe zwischen den Inhalten gewahrt ist.
Verwende den sogenannten Strohhalmtest (the straw test (englisch)), um sicherzustellen, dass auch Personen, die auf eine Bildschirmzoom-Software angewiesen sind, alle Inhalte problemlos entdecken können.
Achte darauf, dass die Farbe nicht die einzige Möglichkeit ist, Informationen zu vermitteln.
Kann man noch erkennen, wo sich Links im Text befinden, wenn alles in Graustufen dargestellt wird? Erkennt man alle interaktiven Elemente? Kann man Text noch lesen?
Stelle sicher, dass Anweisungen nicht nur visuell oder akustisch sind.
Verwende eine Kombination von Merkmalen, um Stichwörter zu schreiben, insbesondere die tatsächlichen Namen von Abschnitten und Elementen, und nicht nur Beschreibungen wie Ort ("rechts") oder Ton ("nach dem Ton").
Inhalte, die sich bewegen, entweder von selbst oder wenn sie durch eine Person ausgelöst werden, die ein Steuerelement aktiviert.
Achte darauf, dass die Animationen dezent sind und nicht zu stark blinken.
Bestimmte Arten von Stroboskopen oder blinkenden Animationen können Krampfanfälle auslösen.
Andere können ablenkend und störend wirken, insbesondere bei bestimmten Arten von kognitiven Behinderungen wie ADHS.
Vergewisser Dich, dass alle Animationen mit der Media Query prefers-reduced-motion abgefangen werden können.
Entferne Animationen, wenn die Einstellung prefers-reduced-motion aktiviert ist.
Wenn eine Animation notwendig ist, um die Bedeutung eines Konzepts zu vermitteln, verlangsame ihre Dauer.
Prüfe den Kontrast von ggf. angepassten ::selection-Angaben im CSS.
Ist der Farbkontrast, der über ::selection via CSS-Deklaration eingestellt ist, ausreichend?
Andernfalls kann es sein, dass jemand den Inhalt nicht lesen kann, wenn er sie hervorhebt/markiert.
Achte darauf, dass die Schaltflächen- und Linksymbole problemlos aktiviert werden können.
Es ist gut, sicherzustellen, dass Dinge wie Hamburger-Menüs, soziale Symbole, Galerie-Viewer und andere Touch-Bedienelemente von einer breiten Palette von Hand- und Stiftgrößen genutzt werden können.
Achte auf ausreichenden Abstand (white space) zwischen den interaktiven Elementen, um eine einwandfreie Bedienung zu gewährleisten.
Manche Menschen mit motorischen Problemen, wie z. B. Handzittern, können nur schwer an interaktiven Elementen vorbeiscrollen, wenn diese keine Abstände aufweisen.
Optimiere die Barrierefreiheit deiner Website für alle Nutzer mit unserer Webdesign-Checkliste. Die Kriterien unserer Checkliste basieren auf den WCAG-Erfolgskriterien und umfassen Empfehlungen für Sprache, Inhalte, Tastaturzugriff, Bilder, Überschriften und Listen. Beachte bitte, dass eine 100%ige Barrierefreiheit nicht garantiert werden kann und sei skeptisch gegenüber Unternehmen, die solche Versprechungen machen.
Auf dieser FAQ-Seite zum Thema Barrierefreies Web findest Du Antworten auf die am häufigsten gestellten Fragen zur Gestaltung von barrierefreien Websites. Wir wollen sicherstellen, dass unsere Website für alle Benutzer zugänglich ist und haben diese Seite erstellt, um Dir zu helfen, Barrieren zu überwinden. Finde hier die Antworten auf Deine Fragen und erlebe eine barrierefreie Website.
