Artikel: Alle
Art | Richtlinie | Hinweis | Verweis | Konformität |
|---|---|---|---|---|
Dekorative Grafiken | Dekorative Grafiken müssen für Screenreader ausgeblendet werden, da sie keinen zusätzlichen Informationswert bieten. | Nutze dekorative Grafiken nur zur visuellen Unterstützung, nicht zur Informationsvermittlung. Achte darauf, dass essenzielle Inhalte immer auch textlich verfügbar sind. | A | |
Foto | Fotos sollten so gestaltet werden, dass sie für alle Nutzer verständlich sind, auch für Screenreader-Nutzer. | Fokussiere dich auf das Wesentliche des Fotos. Bei Personen: Wer ist zu sehen, nicht was sie tragen – es sei denn, die Kleidung ist relevant. | A | |
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 | |
Diagramm | Diagramme müssen eine inhaltliche Beschreibung für Screenreader enthalten. | Beschreibe die Aussage des Diagramms – Daten, Trends, Implikationen – nicht Farben oder Formen. Falls die Inhalte im Fließtext erklärt werden, reicht eine kurze Textalternative. | 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 | |
Textgrafik | 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 (etwa Buttons), 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 | |
Icon | Icons sollten für Screenreader funktionell beschrieben sein. | Um die zuvor genannte Verständlichkeit zu gewährleisten. | AA | |
Logo | Logos gelten als wesentliche Inhalte und müssen mit einem Alternativtext versehen sein. | Falls ein Logo Text enthält, sollte der Alternativtext den Markennamen oder die relevante Beschriftung wiedergeben. | 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 | |
Seitentitel | Jede Seite muss einen eindeutigen und aussagekräftigen Titel im <title>-Element haben. | Der Seitentitel wird im Kopfbereich hinterlegt und sollte den Inhalt der Seite klar beschreiben, damit Nutzer und Suchmaschinen ihn schnell erfassen können. | A | |
Seitentitel | Jede Webseite darf nur ein einziges <title>-Element enthalten. | Mehrere <title>-Elemente auf einer Seite können zu Verwirrung bei Nutzern und Suchmaschinen führen. Stelle sicher, dass der Titel einzigartig, prägnant und passend zum Seiteninhalt ist. | A | |
Seitentitel | Seitentitel sind inhaltsbezogen zu formulieren. Von generischen Titeln ist Abstand zu halten. Seitentitel sollen beschreibend sein. | Neben der Nutzerfreundlichkeit spielt vor allem die Suchmaschinenoptimierung eine wichtige Rolle bei der Formulierung von Seitentiteln. | A | |
Seitentitel | Seitentitel für verschiedene Seiten sollten unterscheidbar sein. | Nutzende können dadurch eine Beziehung zwischen einzelnen Seiten innerhalb eines Webauftritts besser herstellen, z.B. in einer Sitemap oder in den Ergebnissen einer Suche. | A | |
Seitentitel | Der Seitentitel muss sich dynamisch anpassen, wenn sich der Seiteninhalt ändert. | Bei interaktiven Anwendungen, die Inhalte ohne Neuladen aktualisieren (z. B. durch AJAX), sollte der Titel den neuen Zustand widerspiegeln, damit Nutzer und assistive Technologien die Änderungen erkennen. | A | |
Seitentitel | Seitenspezifische Begriffe sollten am Anfang des Titels stehen. | Damit eine Seite im Browser leichter auffindbar ist, sollte der Titel den "Namen der momentanen Seite" plus den "Namen der ganzen Webseite" beinhalten. | A | |
Seitentitel | Jede Seite in mehrstufigen Prozessen muss einen klaren und eindeutigen Seitentitel haben. | Bei mehrschrittigen Formularen, Korrekturseiten oder Bestätigungsseiten sollte der Titel den aktuellen Schritt widerspiegeln, z. B. „Schritt 2: Zahlungsdetails – Checkout“. Das erleichtert die Orientierung für Nutzer und assistive Technologien. | A | |
Überschriften | Optisch als Überschrift gestaltete Inhalte müssen mit den entsprechenden HTML-Überschriftenelementen (<h1>–<h6>) ausgezeichnet werden. | Nur visuelle Hervorhebungen wie größere Schrift genügen nicht. Überschriftenelemente sorgen für eine nachvollziehbare Struktur für Screenreader und assistive Technologien. | AA | |
Überschriften | Nach längeren Linklisten sollte der Seiteninhalt mit einer Überschrift fortgeführt werden, um die Navigation zu erleichtern. | Überschriften nach Linklisten erleichtern das Überspringen per Tastatur oder Screenreader. Fehlen sie, müssen Nutzer mühsam alle Links durchgehen, was die Bedienung erschwert. | AA | |
Überschriften | Überschriftenebenen müssen einheitlich und logisch für die strukturelle Navigation verwendet werden. | Überschriften sollten hierarchisch und ohne Sprünge angeordnet sein. Dies erleichtert die Orientierung, besonders für Screenreader- und Tastaturnutzende. | AA | |
Überschriften | Überschriften sollten nur eine H1 pro Seite haben. | H1 als Banner; als direkter Weg zum Inhalt für Screenreadernutzer; Die meisten Webseiten enthalten nur eine Hauptüberschrift. | AA | |
Ü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 | |
Überschriften | Überschriften müssen auch als solche im Code ausgezeichnet sein und sollten die richtige Reihenfolge einhalten. | Überschriften müssen die richtige Reihenfolge einhalten. Keine H3 vor einer H2 und so weiter. Eine H1 darf übrigens öfter vorkommen, wenn sie die Seite sinnvoll strukturiert! | A | |
Landmark | Teile die Seite mit Landmarks in sinnvolle Bereiche ein. | Nutze gängige Bereiche wie header, nav, main und footer, um die Struktur klar erkennbar zu machen. Das erleichtert die Navigation für Screenreader-Nutzer. | A | |
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 | |
Links | Weise in der Linkbeschreibung darauf hin, wenn sich die Zieldatei vom normalen HTML unterscheidet. | Falls ein Link zu einer Datei wie PDF, PPT, DOC oder XLS führt, sollte dies im Linktext ersichtlich sein, z. B. „Download Bericht (PDF)“. So wissen Nutzende, dass sich eine separate Anwendung öffnet. | A | |
Links | Weise darauf hin, wenn sich ein Link in einem neuen Tab öffnet. | Informiere Nutzer durch die Linkbeschreibung (z. B. „Öffnet in neuem Tab“) oder ein aria-label, damit sie nicht unerwartet die Zurück-Taste nutzen wollen. Dies verbessert die Orientierung, besonders für Screenreader-Nutzer. | A | |
Links | Verwende für Links immer das <a>-Tag. Für interaktive Elemente ohne Seitenwechsel nutze stattdessen das <button>-Tag. | Vermeide es, div- oder span-Elemente per JavaScript klickbar zu machen. Screenreader erkennen diese nicht als interaktive Elemente, was die Barrierefreiheit einschränkt. | A | |
Logo mit Link | Besitzen Logos eine Verlinkung, dann müssen diese einen Alternativ-Text besitzen. | Wenn deine Logos oder deine Bilder klickbar sind und an einen anderen Ort führen oder eine Funktion auslösen, benötigen diese Elemente einen Alternativ-Text, damit sie von Screenreadern verstanden werden. | A | |
Formulare | Jedes Formularelement muss eine eindeutige und programmatisch ermittelbare Bezeichnung haben. | Beschriftungen sollten so formuliert sein, dass sie auch ohne zusätzlichen Kontext verständlich sind. So können assistive Technologien die Felder korrekt interpretieren. | A | |
Formulare | Gliedere umfangreiche Formulare in logisch zusammenhängende Abschnitte. | Gruppiere verwandte Eingabefelder, z. B. Adressdaten und Zahlungsdaten in einem Bestellformular. | A | |
Formulare | Formulare müssen klare Ausfüllhilfen enthalten. | Kennzeichne Pflicht- und optionale Felder, gib Formatvorgaben (z. B. TT.MM.JJJJ für Datumsfelder) an und informiere über Kriterien für ein valides Passwort. So erleichterst du die Eingabe und reduzierst Fehler. | A | |
Formulare | Dynamisch erzeugte HTML-Elemente müssen mit den richtigen Rollen, Statusmeldungen und Eigenschaften versehen werden. | Falls ein div per JavaScript zu einem interaktiven Element wie einem Button umfunktioniert wird, müssen ARIA-Attribute wie role="button" gesetzt werden. Bevorzuge jedoch immer native HTML-Elemente, da diese automatisch barrierefrei sind. | A | |
Filter/Combobox | Die Verbindung zwischen Input-Feld und Auswahlliste muss für Screenreader klar erkennbar sein. | Nutze semantisch korrekte HTML-Elemente wie <input> mit <datalist>, um sicherzustellen, dass Screenreader die Beziehung zwischen Eingabefeld und Vorschlägen korrekt interpretieren können. | ||
Formulare | Formulare sollten durch Autovervollständigung nutzerfreundlicher werden. | Nutze das passende autocomplete-Attribut für Eingabefelder, damit persönliche Daten wie Name, Adresse oder E-Mail automatisch ausgefüllt werden können. Das erleichtert die Nutzung und spart Zeit. | AA | |
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 | |
Formulare | Labels müssen im Code mit den zugehörigen Formularfeldern verknüpft sein. | Nutze das for-Attribut im HTML, um sicherzustellen, dass Screenreader die Beschriftung korrekt dem entsprechenden Eingabefeld zuordnen können. | A | |
Formulare | Informationen, die Nutzende schon mal eingegeben haben, sollten sie nicht noch einmal eingeben müssen. | Die Webseite sollte diese Informationen allein eintragen oder dabei helfen, indem sie Vorschläge macht. Es gibt Ausnahmen, wie zum Beispiel, wenn die Eingaben sicherheitsrelevant sind. | A | |
Formulare | Wenn Nutzende ihre Identität bestätigen müssen, sollte für keinen Schritt ein kognitiver Funktionstest nötig sein. | Das ist nur in Ordnung, wenn es eine barrierefreie Alternative oder Unterstützung bei der Lösung gibt. Ausnahmen sind Tests, die Objekterkennung testen, oder der User nicht textuelle Inhalte identifizieren muss, die er selbst bereitgestellt hat. | A | |
Texte | Texthervorhebungen müssen semantisch korrekt ausgezeichnet werden. | Nutze HTML-Elemente wie <strong> für wichtige Betonungen und <em> für Hervorhebungen, anstatt nur visuelle Formatierungen wie fette oder kursive Schrift per CSS. So bleiben die Inhalte für Screenreader und andere assistive Technologien verständlich. | A | |
Texte | Es sollte auf eine logische Lesereihenfolge geachtet werden. | z.B. PDFs: Kontrolliere diese Regelprüfung manuell. Stelle sicher, dass die im Fenster "Tags" angezeigte Leserichtung mit der logischen Leserichtung des Dokuments übereinstimmt. | Siehe Abschnitt WCAG 2.1: 1.3.1 Informationen und Beziehungen, 1.3.2, 2.4.1, 2.4.4, 2.4.5, 2.4.6, 3.1.2, 3.3.2, 4.1.2 | 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 | Text muss bis zu 200 % vergrößerbar sein, ohne dass Inhalte oder Funktionen verloren gehen. | Stelle sicher, dass beim Vergrößern keine Elemente abgeschnitten oder unlesbar werden. Die Bedienbarkeit und Struktur der Seite müssen erhalten bleiben. | AA | |
Texte | Inhalte müssen auch bei 400 % Zoom lesbar und nutzbar bleiben. | Deine Webseite muss bei 1280 px Breite mit 400 % Zoom oder bei 320 px Breite vollständig funktionieren. Zweidimensionales Scrollen darf nur nötig sein, wenn es unvermeidbar ist, z. B. bei Tabellen oder Videos. | 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 | Jede Seite muss die korrekte Sprachangabe im HTML-Head enthalten. | Die Hauptsprache der Webseite sollte im lang-Attribut definiert sein. | A | |
Texte | Wörter und Passagen in einer anderen Sprache als der Hauptsprache müssen mit dem lang-Attribut ausgezeichnet werden. | Dies ermöglicht Screenreadern und anderen assistiven Technologien, die korrekte Aussprache und Sprachsteuerung zu verwenden. | A | |
Texte | Sie sollten auf eine einheitliche Benennung gleicher Navigationselemente oder Funktionen achten. | Das hilft Nutzern 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 | |
Zeilenrand | Entscheiden sich Nutzende für mehr Zeilenabstand, dann darf ihnen nicht der Rand abgeschnitten werden. | Wenn ich den Zeilen- oder Buchstabenabstand vergrößere, dürfen dabei die Inhalte deiner Webseite oder App nicht abgeschnitten oder verdeckt werden. | AA | |
Beschriftungen | Elemente mit der gleichen Funktion müssen auf allen Seiten konsistent beschriftet sein.. | Achte darauf, dass Navigationselemente, Buttons, Icons und Formularfelder immer gleich benannt werden. Einheitliche Bezeichnungen erleichtern die Orientierung und verbessern die Nutzbarkeit. | A | |
Sprache von Teilen | Die Sprache jedes Abschnitts oder Satzes muss durch Software erkennbar sein, außer bei Eigennamen, Fachbegriffen oder eingebürgertem Jargon. | Falls du auf deiner Webseite Wörter oder Phrasen in einer anderen Sprache als der Hauptsprache verwendest, setze das lang-Attribut am entsprechenden Element. | AA | |
Fokus | Eine Eingabe in einem Formular darf keine unerwarteten Kontextänderungen auslösen. | Der Fokus sollte nicht automatisch auf ein anderes Element springen oder einen neuen Tab öffnen, sobald eine Eingabe gemacht wird. Änderungen müssen vorhersehbar sein und dürfen die Bedienbarkeit nicht beeinträchtigen. | A | |
Fokus | Fokus allein darf keine Aktion wie das Absenden eines Formulars auslösen. | Das Setzen des Fokus, z. B. durch Tastatur- oder Screenreader-Nutzung, darf nicht automatisch eine Interaktion auslösen. Nutzer:innen müssen eine bewusste Eingabe wie einen Klick oder Tastendruck tätigen, um eine Aktion auszuführen. | A | |
Fokus | Inhalte, die bei Hover oder Fokus erscheinen, müssen barrierefrei nutzbar sein. | Eingeblendete Elemente wie Menüs oder Modale sollten nicht sofort verschwinden, wenn die Maus darüber fährt, sich nicht automatisch schließen und per ESC oder erneutem Aktivieren des auslösenden Elements schließbar sein, ohne den Fokus unerwartet zu verschieben. | AA | |
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 | |
Fokus | Fokussierte Elemente dürfen nicht von anderen Inhalten verdeckt werden. | Stelle sicher, dass Buttons, Formularfelder oder andere interaktive Komponenten im Fokus stets sichtbar bleiben. Vermeide überlagernde Pop-ups oder fixe Elemente, die die Bedienbarkeit einschränken. | 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 | |
Tastatur | Wiederkehrende Blöcke müssen überspringbar sein. | Ermögliche es Nutzer:innen, wiederholte Inhalte wie Header oder Navigation zu überspringen. Nutze dafür Sprunglinks, Überschriften, main-Tags oder andere semantische HTML-Elemente. | A | |
Tastatur | Tastatur-Kurzbefehle müssen abschaltbar sein. | Wenn du Tasten mit Funktionen ausgestattet hast (oft in Apps), mach sie anpassbar oder abschaltbar, sonst kann es mit Tastaturnavigation Probleme geben. | A | |
Tastatur | Schließe Nutzende, die nicht die Maus nutzen, nicht aus. | Eingeblendete Elementen sollten: a) Mit der Maus überfahrbar sein, ohne zu verschwinden. b) Sich nicht nach einer Zeit allein schließen. c) Sich schließen lassen, ohne den Fokus zu verschieben. | A | |
Tastaturfallen | Stelle den Nutzenden keine Tastaturfallen. | Wenn ich etwas mit Tastatur ansteuern kann, musst du sicherstellen, dass ich: a) nicht steckenbleibe und immer weg-navigieren kann und b) ich auch überall wieder hinkomme. | A | |
Modal-Dialoge/Overlays | Der Screenreader-Fokus muss beim Öffnen eines Overlays automatisch in das Overlay gesetzt werden. | Definiere die „role“ des Overlays korrekt (z. B. role="dialog"), damit assistive Technologien es als Dialog erkennen. Berücksichtige bewährte WCAG-Techniken, wie SCR26 (dynamische Inhalte an das auslösende Element anfügen), G59 (platzierte interaktive Elemente), SCR37 (geräteunabhängige, anpassbare Dialoge) und G91 (klare Linktexte). | AA | |
Audio | Für jedes Audiomedium muss eine textuelle Alternative bereitgestellt werden. | Biete eine Transkription oder Untertitelung, z. B. per .vtt. Die Beschreibung kann entweder direkt in den Haupt-Audioinhalt integriert oder als separate, synchronisierte Audiobeschreibung bereitgestellt werden. | A | |
Video | Für Videos mit Ton muss eine Alternative wie eine Audiodeskription oder ein anderes zeitbasiertes Medium bereitgestellt werden. | Stelle für synchronisierte Medien eine Audiodeskription oder eine alternative textbasierte Darstellung bereit. Dies gilt nicht, wenn das Video selbst bereits eine Alternative für Text ist und als solche klar gekennzeichnet wurde. | A | |
Video | Live-Audioinhalte in Videos müssen mit Untertiteln versehen werden. | Audiodeskriptionen beschreiben visuelle Inhalte für sehbeeinträchtigte Nutzer:innen. Sie sind notwendig, wenn wichtige Handlungsaspekte nur visuell vermittelt werden. | AA | |
Video | Vermeide Inhalte, die mehr als dreimal pro Sekunde blinken. | Schnelles Blinken kann Anfälle oder epileptische Reaktionen auslösen. Achte darauf, dass Animationen und visuelle Effekte sicher und barrierefrei gestaltet sind. | A | |
Video | Overlay-Text muss gut lesbar sein. | Achte auf eine geeignete Schriftart, ausreichende Schriftgröße und hohen Kontrast zwischen Text und Hintergrund, um die Lesbarkeit für alle Nutzer:innen zu gewährleisten. | AA | |
Audio/Video | Für reine Audio- oder Videoaufzeichnungen ist eine textuelle Alternative bereitzustellen, es sei denn, sie sind ausdrücklich als Medienalternative für Text gekennzeichnet. | Stelle für Audiodateien ein Transkript und für stumme Videos eine textliche Beschreibung bereit, damit die Inhalte auch ohne Ton oder Bildbarriere verständlich sind. | A | |
Video | Aufgezeichnete Videos mit synchronisiertem Ton müssen eine Audiodeskription enthalten. | Falls wichtige Inhalte nur visuell vermittelt werden, muss eine Audiodeskription ergänzt werden, damit auch sehbeeinträchtigte Nutzer:innen alle relevanten Informationen erfassen können. | AA | |
Audio | Automatisch abgespielter Audioinhalt über drei Sekunden muss pausierbar, stoppbar oder separat regelbar sein. | Falls deine Webseite automatisch Geräusche abspielt, müssen Nutzende die Möglichkeit haben, den Ton zu deaktivieren oder die Lautstärke unabhängig von der Systemsound-Einstellung anzupassen. | A | |
Dynamische Inhalte | Dynamische Inhalte mit wichtigen Informationen müssen auch für Screenreader-Nutzer:innen wahrnehmbar sein. | Achte darauf, dass Updates in einer angemessenen Frequenz erfolgen, damit Nutzer:innen die Inhalte erfassen können, bevor eine erneute Aktualisierung stattfindet. | A | |
Zeiteinteilug | Gib Nutzenden genug Zeit, um Inhalte zu erfassen und Aktionen auszuführen. | Falls eine Funktion zeitlich begrenzt ist, muss sie deaktivierbar, anpassbar oder verlängerbar sein – es sei denn, die Zeitbegrenzung ist essenziell, wie bei Auktionen oder Online-Prüfungen. | A | |
Zeiteinteilug | Automatische Animationen sollten nur kurz laufen oder steuerbar sein. | Bewegte Inhalte, die länger als fünf Sekunden dauern, müssen pausiert, gestoppt oder ausgeblendet werden können – es sei denn, sie sind aus funktionalen oder sicherheitsrelevanten Gründen notwendig (z. B. eine animierte Zeitanzeige). | A | |
Benachrichtigungen | Gib den Nutzenden ausreichend Zeit. | Lasse Meldungen nicht automatisch verschwinden und logge Nutzer nicht automatisch aus. Gibt es zeitliche Begrenzungen? Dann mache sie verlängerbar – außer sie sind essenziell (Beispiel: Auktionen oder Online-Prüfungen). | A | |
Benachrichtigungen | Informiere den Nutzenden über Kontextänderungen. | Wenn du auf der Seite eine Statusnachricht, etwa eine Notifikation, anzeigst, muss diese assistiven Technologien mitgeteilt werden, ohne dass der Nutzende aktiv etwas dafür tun muss. | AA | |
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 | |
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 Nutzende intuitiv orientieren können. Eine einheitliche Struktur verbessert die Benutzerfreundlichkeit und erleichtert die Bedienung, insbesondere für Screenreader- und Tastaturnutzer:innen. | AA | |
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 | |
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. | A | |
Tabelle | Wenn du Tabellen für das Layout verwendest, dann verbaue darin keine Strukturelemente. | Wenn deine Webseite noch HTML-Tabellen fürs Layout nutzt, ist ohnehin schon alles verloren … | A | |
Tabelle | Stelle den Bezug von Überschrift zu Inhalt her, wenn du du auf der Seite Tabellen einsetzt. | Bei einfachen Tabellen (Bild) sollten die Köpfe mit einem “scope”-Attribute ausgezeichnet sein (theoretisch reicht <th>). Bei komplexen Tabellen müssen sie mit dem “scope”-Attribute sein. | A | |
Tabelle | Verwende bei Datenatabellen „th“ oder ARIA-Rollen-Auszeichnung. | Deine Datentabellen benötigen die richtigen Auszeichnungen und HTML-Tags, um von assistiven Technologien verstanden zu werden. | A | |
Zeigergeste | Alle Funktionen müssen auch mit einem einzelnen Zeiger ohne komplexe Gesten nutzbar sein, sofern Mehrpunkt- oder pfadbasierte Gesten nicht zwingend erforderlich sind. | Stelle sicher, dass jede Interaktion auch per einfacher Eingabe wie Tippen oder Klicken ausführbar ist. Funktionen, die Gesten wie „Swipen“ oder „Pinchen“ erfordern, müssen eine alternative Bedienmöglichkeit bieten. | A | |
Zeigeraufhebung | Interaktionen dürfen erst beim Loslassen einer Eingabe (z. B. Mausklick oder Touch) ausgeführt werden, nicht bereits beim Drücken oder Halten. | Dies ermöglicht Nutzer:innen, eine Aktion abzubrechen, indem sie den Zeiger oder Finger wegbewegen, bevor sie loslassen. Dadurch wird die versehentliche Ausführung von Befehlen verhindert und die Bedienbarkeit verbessert. | A | |
Beschriftungen | Beschriftungen von UI-Elementen müssen den sichtbaren Text enthalten und mit ihm übereinstimmen. | Versteckte Texte in aria-labels oder Code müssen mit dem sichtbaren Text übereinstimmen und denselben Wortlaut am Anfang haben. | A | |
Auslösen durch Bewegung | Funktionen, die durch Gerätebewegung oder Nutzergeste ausgelöst werden, müssen auch ohne Bewegung nutzbar sein und deaktivierbar sein. | Biete eine alternative Bedienmöglichkeit für Funktionen, die durch Kippen, Schütteln oder andere Bewegungen aktiviert werden. Zudem muss die Bewegungssteuerung abschaltbar sein, um unbeabsichtigte Aktionen zu vermeiden. | A | |
Drag-and-drop | Drag-and-Drop-Funktionen müssen eine alternative, einfache Eingabemethode bieten. | Falls Inhalte per Drag-and-Drop verschoben werden können, stelle eine alternative Möglichkeit bereit, z. B. durch Buttons oder eine Listenansicht mit „Verschieben“-Optionen. Dies erleichtert die Bedienung für Nutzer:innen, die keine präzisen Maus- oder Touch-Eingaben machen können. | AA | |
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