Artikel: Design
Art | Richtlinie | Hinweis | Verweis | Konformität |
|---|---|---|---|---|
Diagramm | Diagramme müssen sowohl durch Farben als auch durch Muster unterscheidbar sein. | Nutze zusätzlich zu Farben Muster wie Punkte oder Striche, damit Inhalte auch ohne Farbwahrnehmung erkennbar sind. | A | |
Icon/Grafiken | Nutze nicht allein Farbe, um Informationen zu vermitteln oder Elemente zu unterscheiden. | Verlasse dich nicht darauf, dass alle Nutzer Farben erkennen. Ergänze Icons, Muster oder Text, damit Inhalte auch in Graustufen verständlich sind. | A | |
Grafische CAPTCHAS | Setze neben grafischen CAPTCHAs immer eine barrierefreie Alternative ein. | Stelle sicher, dass Nutzer mit unterschiedlichen Wahrnehmungsfähigkeiten das CAPTCHA lösen können, z. B. durch eine textbasierte oder akustische Alternative. | A | |
Textgraphik | Vermeide die Verwendung von Textgrafiken. | Textgrafiken sind Bilder, die überwiegend Text enthalten. Nutze stattdessen echten Text, damit Inhalte skalierbar, durchsuchbar und für Screenreader zugänglich bleiben. | AA | |
Icon | Icons sollten kontrastreich (mindestens 3:1) sein. | Alle Elemente, mit denen ich interagieren kann, oder die wichtig fürs Verständnis sind, sollten sich über ein Kontrastverhältnis von mindestens 3:1 ausreichend vom Hintergrund abheben. | WCAG 2.1: 1.4.11 und ggf. 1.4.5 | AA |
Icon | Icons sollten leicht verständlich sein. | Gute Icons sind dem Nutzer vertraut, werden konsequent genutzt und deuten eine Handlung an, z.B. Telefonhörer | AA | |
Blitze | Vermeide Inhalte, die mehr als dreimal pro Sekunde blinken. | Blinkende Elemente wie GIFs oder Buttons können gesundheitliche Risiken verursachen. Setze stattdessen dezente Animationen ein. | A | |
Überschriften | Überschriften müssen eindeutig und beschreibend sein, um die Barrierefreiheit zu gewährleisten. | Formuliere Überschriften so, dass sie den folgenden Inhalt oder Zweck klar widerspiegeln. Das gilt auch für Formularbeschriftungen, damit Nutzende den Kontext sofort verstehen. | AA | |
Links | Links müssen klar und verständlich beschriftet sein. | Formuliere Linktexte so, dass sie auch ohne zusätzlichen Kontext Sinn ergeben. Vermeide generische Bezeichnungen wie „Hier klicken“. | A | |
Links | Halte Linkbeschriftungen so kurz wie möglich, aber so aussagekräftig wie nötig. | Verlinke nur den wesentlichen Teil des Textes, der das Ziel des Links klar macht – keine ganzen Sätze oder unnötig lange Phrasen. | A | |
Formulare | Webseiten, die eine für den Nutzenden auftretende rechtliche Verpflichtung oder finanzielle Transaktion zur Folge haben müssen bestätigt werden, rückgängig und korrigierbar sein. | Wenn ich eine Transaktion oder eine ähnliche Interaktion ausführe, die negative Konsequenzen haben kann, muss es eine Möglichkeit geben, den Vorgang zu bestätigen oder ihn rückgängig zu machen. | AA | |
Formulare | Wenn ein Eingabefehler automatisch erkannt wird und Korrekturempfehlungen bekannt sind, dann werden diese Empfehlungen dem Nutzenden bereitgestellt, außer dies würde die Sicherheit oder den Zweck des Inhalts gefährden. | Wenn du mir einen Fehler auf deiner Webseite anzeigst, schreibe den Fehlertext so, dass ich weiß, was ich tun muss, um den Fehler zu beheben. | AA | |
Formulare | Eingabefehler müssen klar erkennbar und in Textform beschrieben werden. | Nutze nicht nur Farbe zur Fehleranzeige. Ergänze gut sichtbaren, verständlichen Text, der auch für Screenreader lesbar ist. | A | |
Texte | Nutze keine Leerzeichen zur Gestaltung von Abständen in Texten. | Verwende stattdessen CSS oder entsprechende Formatierungsmöglichkeiten, um Zeichen-, Wort- und Zeilenabstände zu steuern. Dies stellt sicher, dass Screenreader und andere assistive Technologien den Text korrekt interpretieren können. | A | |
Texte | Informationen dürfen nicht ausschließlich durch Farbe vermittelt werden. | Links oder wichtige Inhalte müssen auch ohne Farberkennung erkennbar sein, z. B. durch Unterstreichungen, Symbole oder zusätzliche Textmarker. | A | |
Texte | Der Mindestkontrast zwischen Schrift- und Hintergrundfarbe muss 4,5:1 betragen. Für großen Text gilt ein Verhältnis von mindestens 3:1. | Bei gerenderter Schrift ab 24 px oder 18,7 px in fetter Schrift reicht ein Kontrastverhältnis von 3:1. Nebensächlicher, dekorativer oder unsichtbarer Text ist von dieser Regel ausgenommen. | AA | |
Texte | Verzichte auf Schriftgrafiken, außer sie sind zwingend erforderlich. | Schriftgrafiken sollten nur in Ausnahmefällen genutzt werden, z. B. für Logos oder Scans von Originaldokumenten. In solchen Fällen muss eine aussagekräftige Alternative (alt-Attribut) hinterlegt werden. | AA | |
Texte | Achte auf eine einheitliche Benennung gleicher Navigationselemente oder Funktionen. | Das hilft Nutzenden beim Verständnis für die Seite und beim Auffinden und Zuordnen von Inhalten. | AA | |
Texte | Vermeide rein sensorische Beschreibungen wie Farben oder Positionen. | Screenreader können „unten links“ oder „grün“ nicht interpretieren. Stattdessen beschreibe Inhalte präzise, z. B. „Klicke auf den Button ‘Jetzt kaufen’“. | A | |
Fokus | Interaktive Elemente müssen einen klar sichtbaren Fokusrahmen haben. | Elementen, mit denen der Nutzende interagieren kann (Buttons, Links etc.), brauchen einen Fokus-Rahmen. Wir empfehlen, dass dieser Rahmen deutlich sichtbar ist und am besten im CSS als Border umgesetzt wird. | AA | |
Tastatur | Die Tastaturnavigation muss einer logischen Reihenfolge folgen. | Stelle sicher, dass Nutzer mit der Tastatur in einer nachvollziehbaren Reihenfolge navigieren können – ohne unerwartete Sprünge zwischen Bereichen wie Header, Footer und Hauptinhalt. | A | |
Navigation | Biete mehr als eine Möglichkeit, um Inhalte auf der Webseite zu finden. | Neben der Hauptnavigation erleichtert eine Suchfunktion oder eine Sitemap die Orientierung. So finden Nutzer:innen schneller die gewünschten Inhalte. | AA | |
Navigation | Wiederkehrende Inhaltsblöcke müssen überspringbar sein. | Biete Mechanismen wie Sprunglinks oder ARIA-Landmarks an, damit Nutzer:innen sich wiederholende Bereiche wie Navigationen oder Header direkt überspringen können. | A | |
Responsive Gestaltung | Inhalte müssen sowohl im Hoch- als auch im Querformat nutzbar sein, es sei denn, eine bestimmte Ausrichtung ist zwingend erforderlich. | Stelle sicher, dass deine Webseite oder App sich flexibel an verschiedene Bildschirmorientierungen anpasst, damit Nutzende frei zwischen Hoch- und Querformat wechseln können. | AA | |
Navigation | Navigationsmechanismen müssen auf allen Seiten in der gleichen Reihenfolge und Position erscheinen, sofern der Nutzer sie nicht ändert. | Halte Navigationselemente konsistent, damit sich Nutzer:innen intuitiv orientieren können. Eine einheitliche Struktur verbessert die Benutzerfreundlichkeit und erleichtert die Bedienung, insbesondere für Screenreader- und Tastaturnutzer:innen. | AA | |
Support | Unterstützungs- und Supportelemente müssen auf allen Seiten an der gleichen Stelle platziert sein. | Wenn du Hilfsmechanismen wie Kontaktdaten, eine Support-Seite oder einen Chatbot anbietest, sorge dafür, dass sie konsistent positioniert und leicht auffindbar sind. | WCAG 2.2: 3.2.6(neu) | A |
Buttons | Interaktive Elemente müssen mindestens 24 × 24 Pixel groß sein. | Dies gilt für alle klickbaren Flächen, einschließlich Buttons und Icons. Ausreichende Größe erleichtert die Bedienung und verhindert Fehlklicks, besonders für motorisch eingeschränkte Nutzer:innen. | A |
Quellen
Weiter