Barrierefreies Webdesign - Checkliste für Entwickler

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.

Notizblock mit handschriftlicher Checkliste.
Bild von Gerd Altmann über die Plattform Pixabay

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.

Sprache & Inhalte

Der Inhalt ist der wichtigste Teil Deiner Seite. Inhalte an dieser Stelle meint Sprache, Wörter und Formulierungen von bzw. in Texten.

  • Verwende eine einfache Sprache und vermeide Redewendungen, Idiome und komplizierte Metaphern.

    Schreibe Inhalte ungefähr auf dem Niveau der 8. Klasse. Für englischsprachige Texte gibt es hierfür auch ein hilfreiches Analyse-Tool.

    WCAG: 3.1.5 Reading Level

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

    WCAG: 1.3.1 Info and Relationship

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

    WCAG: 1.4.8 Visual Presentation

Source-Code

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.

    WCAG: 4.1.1 Parsing

  • Verwende das lang-Attribut auf dem HTML-Element.

    Dies hilft Hilfstechnologien wie Screenreadern, den Inhalt richtig auszusprechen.

    WCAG: 3.1.1 Language of Page

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

    WCAG: 2.4.2 Page titled

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

    WCAG: 1.4.4 Resize Text

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

    WCAG: 4.1.2 Name, Role, Value

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

    WCAG: 2.4.3 Focus order

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

    WCAG: 2.4.3 Focus order

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

    WCAG: 2.2.1 Timing adjustable

  • Verwende nicht das title-Attribut

    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.

    WCAG: 4.1.2 Name, role, value

Tastatur

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?

    WCAG: 2.4.7 Focus visible

  • Prüfe, ob die Reihenfolge des Tastaturfokus mit dem visuellen Layout übereinstimmt.

    Kann sich eine Person, die mit einer Tastatur oder einem Bildschirmlesegerät navigiert, auf der Seite auf vorhersehbare Weise bewegen?

    WCAG: 1.3.2 Meaningful sequence

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

    WCAG: 2.4.3 Focus order

Bilder

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.

    WCAG: 1.1.1 Non-Text content

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

    WCAG: 1.1.1 Non-Text content

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

    WCAG: 1.1.1 Non-Text content

  • Achte bei Bildern, die Text enthalten, darauf, dass die Alt-Beschreibung auch den Text des Bildes enthält.

    Das Coca-Coloa-Logo sollte zum Beispiel den alt-Wert "Coca Cola" haben.

    WCAG: 1.1.1 Non-Text content

Überschriften

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

    WCAG: 2.4.6 Headings or labels

  • Verwende nur ein h1-Element pro Seite.

    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.

    WCAG: 2.4.6 Headings or labels

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

    WCAG: 2.4.6 Headings or labels

  • Überspringe keine Überschriftenebenen.

    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.

    WCAG: 2.4.6 Headings or labels

Listen

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.

    WCAG: 1.3.1 Info and relationships

Steuerelemente

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.

    WCAG: 1.3.1 Info and relationships

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

    WCAG: 1.4.1 Use of color

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

    WCAG: 2.4.7 Focus visible

  • Verwende das button-Element für Schaltflächen.

    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.

    WCAG: 1.3.1 Info and relationship

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

    WCAG: 2.4.1 Bypass blocks

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

    WCAG: G201 Giving users advanced warning when opening a new window

Tabellen

Tabellen sind ein strukturierter Datensatz, der das Verständnis der Beziehungen zwischen verschiedenen Arten von Informationen erleichtert.

  • Verwende das table-Element, um tabellarische Daten zu beschreiben.

    Müsse Daten in Zeilen und Spalten anagezeogt werden? Dann verwende das Tabellenelement (table).

    WCAG: Infos and relationships

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

    WCAG: 4.1.1 Parsing

  • Verwende das caption-Element, um einen Titel für die Tabelle anzugeben.

    Die Überschrift der Tabelle sollte beschreiben, welche Art von Informationen die Tabelle enthält.

    WCAG: 2.4.6 Headings or labels

Formulare

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.

    WCAG: 3.2.2 On input

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

    WCAG: 1.3.1 Info and relationship

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

    WCAG: 1.3.5 Identify input purpose

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

    WCAG: 3.3.1 Error identification

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

    WCAG: 3.3.1 Error identification

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

    WCAG: 1.4.1 Use of color

Medien

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.

    WCAG: 1.4.2 Audio control

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

    WCAG: 1.3.1 Info and relationships

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

    WCAG: 2.1.1 Keyboard

Video

Relevante Checks für die Einbindung von Videos.

  • Prüfen Sie das Vorhandensein von Untertiteln.

    Untertitel ermöglichen es einer Person, die den Audioinhalt eines Videos nicht hören kann, den Inhalt dennoch zu verstehen.

    WCAG: 1.2.2 Captions

  • Prüfe Videoinhalt auf mögliche Auslöser von Anfällen.

    Bestimmte Arten von Stroboskopen oder blinkenden Animationen können Krampfanfälle auslösen.

    WCAG: Three Flashes or Below Threshold

Audio

Relevante Checks für die Einbindung von Audio.

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

    WCAG: 1.1.1 Non-text content

Erscheinungsbild

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?

    WCAG: 1.4.1 Use of color

  • Erhöhe die Textgröße auf 200%.

    Ist der Inhalt noch lesbar? Führt eine Vergrößerung des Textes dazu, dass sich der Inhalt überschneidet? Muss evtl. horizontal gescrolled werden?

    WCAG: 1.4.4 Resize text

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

    WCAG: 1.3.3 Sensory characteristics

  • 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?

    WCAG: 1.4.1 Use of color

  • 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").

    WCAG: 1.3.3 Sensory characteristics

  • Verwende ein einfaches, geradliniges und einheitliches Layout.

    Ein kompliziertes Layout kann verwirrend sein, um es zu verstehen und zu benutzen.

    WCAG: 1.4.10 Reflow

Animation

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.

    WCAG: Three flashes or below threshold

  • Biete einen Mechanismus zum Anhalten von Hintergrundvideos an.

    Hintergrundvideos können ablenken, vor allem, wenn Inhalte darüber gelegt werden.

    WCAG: 2.2.2 Pause, stop, hide

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

    WCAG: 2.3.3 Animation from interactions

Farbkontrast

Der Farbkontrast gibt an, wie gut lesbar Farben sind, wenn sie neben- oder übereinander liegen.

  • Prüfe den Kontrast für alle Texte in normaler Größe.

    Die Einhaltung der Stufe AA erfordert beispielweise ein Kontrastverhältnis von 4,5:1. WebAIM Kontrast-Checker

    WCAG: 1.4.3 Contrast

  • Überprüfe den Kontrast für alle großformatigen Texte.

    Die Einhaltung der Stufe AA erfordert beispielsweise ein Kontrastverhältnis von 3:1. WebAIM Kontrast-Checker

    WCAG: 1.4.3 Contrast

  • Überprüfe den Kontrast für alle Icons, Symbole und Grafiken die für den Inhalt wichtig sind.

    Die Einhaltung der Stufe AA erfordert beispielsweise ein Kontrastverhältnis von 3,0:1.

    WCAG: 1.4.11 Non-text contrast

  • Prüfe den Kontrast der Rahmen (border) von Eingabeelementen (Texteingabe, Optionsfelder, Kontrollkästchen usw.).

    Die Einhaltung der Stufe AA erfordert beispielsweise ein Kontrastverhältnis von 3,0:1.

    WCAG: 1.4.11 Non-text contrast

  • Überprüfe Text, der über Bildern oder Videos liegt und diese überlappt.

    Ist der Text noch lesbar?

    WCAG: 1.4.3 Contrast

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

    WCAG: 1.4.3 Contrast

Mobile Anwendungen und Touch-Bedienung

Dinge, auf die man bei mobilen Endgeräten achten sollte.

  • Prüfe, ob das Gerät in jede beliebige Richtung (Landscape/Portrait) gedreht werden kann.

    Erlaubt die Anwendung nur die Ausrichtung im Hochformat?

    WCAG: 1.3.4 Orientation

  • Entferne den horizontalen Bildlauf (scrolling).

    Für manche ist es schwierig, horizontal zu scrollen, für alle ist es lästig.

    WCAG: 1.4.10 Reflow

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

    WCAG: 2.5.5 Target size

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

    WCAG: 2.4.1 Bypass blocks

Blog-Übersicht

Weitere Artikel