Skip to main content

Sonstiges für Admins

Barrierefreiheit - WCAG 2.1

Barrierefreiheit - WCAG 2.1

Warum WCAG 2.1?

Die Web Content Accessibility Guidelines (WCAG) 2.1 umfassen eine breite Palette an Empfehlungen, um Webinhalte barrierefreier zu gestalten. Die Einhaltung dieser Richtlinien macht Inhalte für eine größere Gruppe von Menschen mit Behinderungen zugänglicher, einschließlich:

  • Blindheit und Sehbehinderung
  • Gehörlosigkeit und Hörverlust
  • Eingeschränkte Beweglichkeit
  • Sprachbehinderungen
  • Photosensibilität
  • Kombinationen dieser Einschränkungen
  • Unterstützung bei Lernbehinderungen und kognitiven Einschränkungen

Auch wenn diese Richtlinien nicht jeden Bedarf von Nutzern mit diesen Behinderungen vollständig abdecken, adressieren sie Barrierefreiheit auf Desktops, Laptops, Tablets und mobilen Geräten. Ihre Einhaltung verbessert in der Regel die allgemeine Benutzerfreundlichkeit von Webinhalten für alle Nutzer.

💡
Hinweis! WCAG 2.1 ist eine international standardisierte Richtlinie für Web-Barrierefreiheit, die unabhängig von Flexopus erstellt und gepflegt wird.

Die vollständige Beschreibung der WCAG 3.1-Richtlinien finden Sie auf dieser Seite:

Web Content Accessibility Guidelines (WCAG) 2.1
Web Content Accessibility Guidelines (WCAG) 2.1 covers a wide range of recommendations for making Web content more accessible. Following these guidelines will make content more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations; but will not address every user need for people with these disabilities. These guidelines address accessibility of web content on desktops, laptops, tablets, and mobile devices. Following these guidelines will also often make Web content more usable to users in general.
W3CAndrew Kirkpatrick

Die Maßnahmen, die eine Softwareanwendung erfüllen muss, sind hier zusammengefasst:

WebAIM: WebAIM’s WCAG 2 Checklist

Für deutsche Kunden

Die Barrierefreie-Informationstechnik-Verordnung (BITV) richtet sich speziell an öffentliche Stellen in Deutschland und basiert auf den Web Content Accessibility Guidelines (WCAG). Da die WCAG weltweit anerkannt sind und regelmäßig aktualisiert werden, werden sie häufig schneller aktualisiert als die BITV. Aus diesem Grund und aufgrund ihrer globalen Relevanz orientieren wir uns an den WCAG als international anerkanntem Standard für Web-Barrierefreiheit.

Anmerkungen

  • Das reguläre Nutzer-Frontend erfüllt die Anforderungen der WCAG 2.1. Die Anforderungen der WCAG 2.1 werden im Entwicklungszyklus der Anwendung so weit wie technisch möglich und sinnvoll berücksichtigt.
  • Es gibt insgesamt 78 schriftlich formulierte Gesamtanforderungen in 13 Modulen.
  • Das Entwicklungsteam von Flexopus verbessert das Anwendungs-Frontend kontinuierlich, um die Anforderungen der WCAG 2.1 so weit wie technisch möglich und sinnvoll zu erfüllen.
  • Nach einem internen und externen Audit im Januar 2026 erfüllten wir 77 von 78 Anforderungen.
  • Die Anforderung Nummer 2.5.5 ist nicht erfüllt. Klickbare Ziele müssen mindestens 44 x 44 Pixel groß sein. Aus unserer Sicht ist diese Anforderung nicht mehr zeitgemäß formuliert, da eine Anwendung auch kleinere Bildschirmauflösungen wie HD, Full HD, 2K und 4K unterstützen muss. Die Erfüllung dieser Anforderung ist bei 4K deutlich einfacher als bei kleineren Auflösungen. Icons mit 44 px auf einer HD-Bildschirmauflösung darzustellen, würde jedoch jedes moderne UI-/UX-Design einer Anwendung beeinträchtigen. Daher haben wir entschieden, diese Anforderung vorerst nicht umzusetzen.

WCAG 2.1-Anforderungen

1 - Wahrnehmbar

Webinhalte werden für die Sinne zugänglich gemacht — Sehen, Hören und/oder Tasten.

Nr.Beschreibung der Anforderung
Guideline 1.2Zeitbasierte Medien: Stellen Sie Alternativen für zeitbasierte Medien bereit. HINWEIS: Wenn Audio oder Video als Alternative zu Webinhalten vorgesehen ist, zum Beispiel als Audio- oder Gebärdensprachversion einer Webseite, dient der Webinhalt selbst als Alternative.
1.1.1 Level ANicht-Text-Inhalte - Bilder, Bild-Buttons in Formularen und Hotspots in Image Maps verfügen über geeignete, gleichwertige Alternativtexte. - Bilder, die keinen Inhalt vermitteln, dekorativ sind oder Inhalte enthalten, die bereits im Text vermittelt werden, erhalten leere Alternativtexte (alt="") oder werden als CSS-Hintergründe umgesetzt. - Verlinkte Bilder verfügen über beschreibende Alternativtexte. - Gleichwertige Alternativen für komplexe Bilder werden im Kontext oder auf einer separat verlinkten Seite bereitgestellt. - Formular-Buttons verfügen über einen beschreibenden Wert. - Formulareingaben sind mit Textlabels verknüpft. - Eingebettete Multimedia-Inhalte werden über zugänglichen Text identifiziert. Frames und iframes sind angemessen benannt.
Guideline 1.2Zeitbasierte Medien: Stellen Sie Alternativen für zeitbasierte Medien bereit. HINWEIS: Wenn Audio oder Video als Alternative zu Webinhalten vorgesehen ist, zum Beispiel als Audio- oder Gebärdensprachversion einer Webseite, dient der Webinhalt selbst als Alternative.
1.2.1 Level ANur-Audio und Nur-Video, aufgezeichnet - Für nicht-live Nur-Audio-Inhalte, zum Beispiel Audio-Podcasts, MP3-Dateien usw., wird ein Transkript relevanter Inhalte bereitgestellt. - Für nicht-live Nur-Video-Inhalte wird ein Transkript oder eine Audiodeskription relevanter Inhalte bereitgestellt, sofern das Video nicht dekorativ ist.
1.2.2 Level AUntertitel, aufgezeichnet - Für nicht-live Videos, zum Beispiel YouTube-Videos usw., werden synchronisierte Untertitel bereitgestellt.
1.2.3 Level AAudiodeskription oder Medienalternative, aufgezeichnet - Für nicht-live Videos wird ein Transkript oder eine Audiodeskription bereitgestellt. HINWEIS: Dies ist nur erforderlich, wenn es relevante visuelle Inhalte gibt, die nicht im Audio dargestellt werden.
1.2.4 Level AAUntertitel, live - Für Live-Medien mit Audio, zum Beispiel reine Audioübertragungen, Webcasts, Videokonferenzen usw., werden synchronisierte Untertitel bereitgestellt.
1.2.5 Level AAAudiodeskription, aufgezeichnet - Für nicht-live Videos werden Audiodeskriptionen bereitgestellt. HINWEIS: Dies ist nur erforderlich, wenn es relevante visuelle Inhalte gibt, die nicht im Audio dargestellt werden. - Obwohl auf Level AA nicht erforderlich, empfiehlt WebAIM für optimale Barrierefreiheit Transkripte zusätzlich zu Audiodeskriptionen.
1.2.6 Level AAAGebärdensprache, aufgezeichnet - Für Medien mit Audio wird ein Gebärdensprachvideo bereitgestellt.
1.2.7 Level AAAErweiterte Audiodeskription, aufgezeichnet - Wenn dem Video aufgrund des Audio-Timings keine Audiodeskription hinzugefügt werden kann, zum Beispiel wegen zu weniger Pausen im Audio, wird eine alternative Version des Videos mit Pausen bereitgestellt, die Audiodeskriptionen ermöglichen.
1.2.8 Level AAAMedienalternative, aufgezeichnet - Für aufgezeichnete Medien mit Videospur wird ein Transkript bereitgestellt. Für optimale Barrierefreiheit empfiehlt WebAIM Transkripte für alle Multimedia-Inhalte.
1.2.9 Level AAANur-Audio, live - Für Live-Inhalte mit Audio wird ein beschreibendes Texttranskript, zum Beispiel das Skript des Live-Audios, bereitgestellt.
Guideline 1.3Anpassbar: Erstellen Sie Inhalte, die auf unterschiedliche Weise dargestellt werden können, zum Beispiel in einem einfacheren Layout, ohne dass Informationen oder Struktur verloren gehen.
1.3.1 Level AInformationen und Beziehungen - Semantisches Markup wird verwendet, um Überschriften (<h1>), Regionen/Landmarks, Listen (<ul>, <ol> und <dl>), hervorgehobenen oder besonderen Text (<strong>, <code>, <abbr>, <blockquote> usw.) auszuzeichnen. Semantisches Markup wird angemessen verwendet. - Tabellen werden für tabellarische Daten verwendet und Datenzellen sind ihren Überschriften zugeordnet. Tabellenbeschriftungen sind, sofern vorhanden, mit Datentabellen verknüpft. - Textlabels sind mit Formular-Eingabeelementen verknüpft. Zusammengehörige Formularelemente sind mit Fieldset/Legend gruppiert. ARIA-Labels können verwendet werden, wenn Standard-HTML nicht ausreicht.
1.3.2 Level ASinnvolle Reihenfolge - Die Lese- und Navigationsreihenfolge, bestimmt durch die Code-Reihenfolge, ist logisch und intuitiv.
1.3.3 Level ASensorische Merkmale - Anweisungen verlassen sich nicht auf Form, Größe oder visuelle Position, zum Beispiel „Klicken Sie auf das quadratische Symbol, um fortzufahren“ oder „Die Anweisungen befinden sich in der rechten Spalte“. - Anweisungen verlassen sich nicht auf Geräusche, zum Beispiel „Ein Piepton zeigt an, dass Sie fortfahren können“.
1.3.4 Level AAOrientierung - Die Ausrichtung von Webinhalten ist nicht ausschließlich auf Hoch- oder Querformat beschränkt, sofern keine bestimmte Ausrichtung erforderlich ist.
1.3.5 Level AAZweck von Eingaben identifizieren - Eingabefelder, die bestimmte Arten von Nutzerinformationen erfassen, verfügen über ein geeignetes autocomplete-Attribut.
1.3.6 Level AAAZweck identifizieren - HTML5-Regionen oder ARIA-Landmarks werden verwendet, um Seitenbereiche zu identifizieren. - ARIA wird, wo angemessen, verwendet, um HTML-Semantik zu erweitern und den Zweck von Interface-Komponenten besser zu identifizieren.
Guideline 1.4Unterscheidbar: Erleichtern Sie Nutzern das Sehen und Hören von Inhalten, einschließlich der Trennung von Vordergrund und Hintergrund.
1.4.1 Level AVerwendung von Farbe - Farbe wird nicht als einziges Mittel verwendet, um Inhalte zu vermitteln oder visuelle Elemente zu unterscheiden. - Farbe allein wird nicht verwendet, um Links vom umgebenden Text zu unterscheiden, es sei denn, das Kontrastverhältnis zwischen Link und umgebendem Text beträgt mindestens 3:1 und es wird eine zusätzliche Unterscheidung bereitgestellt, zum Beispiel Unterstreichung, wenn der Link mit der Maus überfahren wird oder Fokus erhält.
1.4.2 Level AAudiosteuerung - Es wird ein Mechanismus bereitgestellt, um Audio, das automatisch länger als 3 Sekunden auf einer Seite abgespielt wird, zu stoppen, zu pausieren, stummzuschalten oder die Lautstärke anzupassen.
1.4.3 Level AAKontrast, Minimum - Text und Textbilder haben ein Kontrastverhältnis von mindestens 4,5:1. - Großer Text - mindestens 18 Punkt, typischerweise 24 px, oder 14 Punkt, typischerweise 18,66 px, und fett - hat ein Kontrastverhältnis von mindestens 3:1.
1.4.4 Level AATextgröße ändern - Die Seite ist lesbar und funktionsfähig, wenn sie auf 200 % vergrößert wird. HINWEIS: 1.4.10 führt unten eine deutlich höhere Anforderung für vergrößerte Inhalte ein.
1.4.5 Level AABilder von Text - Wenn dieselbe visuelle Darstellung allein mit Text erreicht werden kann, wird kein Bild verwendet, um diesen Text darzustellen.
1.4.6 Level AAAKontrast, erweitert - Text und Textbilder haben ein Kontrastverhältnis von mindestens 7:1. - Großer Text - mindestens 18 Punkt, typischerweise 24 px, oder 14 Punkt, typischerweise 18,66 px, fett - hat ein Kontrastverhältnis von mindestens 4,5:1.
1.4.7 Level AAAWenig oder kein Hintergrundaudio - Audio mit Sprache hat kein oder nur sehr geringes Hintergrundrauschen, sodass die Sprache leicht unterscheidbar ist.
1.4.8 Level AAAVisuelle Darstellung - Textblöcke mit mehr als einem Satz: - sind nicht breiter als 80 Zeichen. - sind NICHT im Blocksatz ausgerichtet, also gleichzeitig am linken und rechten Rand. - haben ausreichenden Zeilenabstand, mindestens die halbe Texthöhe, und Absatzabstand, 1,5-facher Zeilenabstand. - haben eine definierte Vordergrund- und Hintergrundfarbe. Diese können auf bestimmte Elemente oder auf die gesamte Seite über CSS angewendet werden und werden dadurch von allen anderen Elementen geerbt. - erfordern kein horizontales Scrollen, wenn die Textgröße verdoppelt wird.
1.4.9 Level AAABilder von Text, keine Ausnahme - Text wird in einem Bild nur zu dekorativen Zwecken verwendet, also wenn das Bild keinen Inhalt vermittelt, ODER wenn die Information nicht allein mit Text dargestellt werden kann.
1.4.10 Level AAUmbruch/Reflow - Es kommt zu keinem Verlust von Inhalt oder Funktionalität und horizontales Scrollen wird vermieden, wenn Inhalte mit einer Breite von 320 Pixeln dargestellt werden. - Dies erfordert für die meisten Websites responsives Design. Am besten lässt sich dies testen, indem das Browserfenster auf 1280 Pixel Breite eingestellt und der Seiteninhalt anschließend auf 400 % vergrößert wird. - Inhalte, die horizontales Scrollen erfordern, zum Beispiel Datentabellen, komplexe Bilder wie Karten und Diagramme, Symbolleisten usw., sind ausgenommen.
1.4.11 Level AANicht-Text-Kontrast - Für die Unterscheidung grafischer Objekte, zum Beispiel Icons und Bestandteile von Diagrammen oder Grafiken, sowie vom Autor angepasster Interface-Komponenten, zum Beispiel Buttons, Formularsteuerelemente und Fokusindikatoren/-umrandungen, liegt ein Kontrastverhältnis von mindestens 3:1 vor. - In den verschiedenen Zuständen, Fokus, Hover, Aktiv usw., von vom Autor angepassten interaktiven Komponenten muss ein Kontrast von mindestens 3:1 bereitgestellt werden.
1.4.12 Level AATextabstände - Es kommt zu keinem Verlust von Inhalt oder Funktionalität, wenn der Nutzer Absatzabstände auf das 2-Fache der Schriftgröße, Zeilenhöhe/Zeilenabstand auf das 1,5-Fache der Schriftgröße, Wortabstand auf das 0,16-Fache der Schriftgröße und Zeichenabstand auf das 0,12-Fache der Schriftgröße anpasst. - Dies wird am besten unterstützt, indem Pixel-Höhenangaben für Elemente vermieden werden, die Text enthalten.
1.4.13 Level AAInhalt bei Hover oder Fokus - Wenn zusätzlicher Inhalt bei Hover oder Tastaturfokus angezeigt wird: - Der neu eingeblendete Inhalt kann verworfen werden, in der Regel über die Esc-Taste, ohne den Zeiger oder Tastaturfokus zu bewegen, sofern der Inhalt keinen Eingabefehler darstellt oder andere Seiteninhalte nicht verdeckt oder beeinträchtigt. - Der Zeiger kann zum neuen Inhalt bewegt werden, ohne dass der Inhalt verschwindet. - Der neue Inhalt muss sichtbar bleiben, bis der Zeiger oder Tastaturfokus vom auslösenden Steuerelement entfernt wird, der neue Inhalt verworfen wird oder der neue Inhalt nicht mehr relevant ist.

2 - Bedienbar

Interface-Formulare, Steuerelemente und Navigation sind bedienbar.

Nr.Beschreibung der Anforderung
Guideline 2.1Per Tastatur zugänglich: Stellen Sie alle Funktionen über eine Tastatur bereit.
2.1.1 Level ATastatur - Alle Seitenfunktionen sind über die Tastatur verfügbar, sofern die Funktion nicht auf bekannte Weise mit einer Tastatur ausgeführt werden kann, zum Beispiel Freihandzeichnen. - Seitenspezifische Tastenkürzel und Accesskeys, wobei Accesskeys typischerweise vermieden werden sollten, stehen nicht im Konflikt mit bestehenden Browser- und Screenreader-Kürzeln.
2.1.2 Level AKeine Tastaturfalle - Der Tastaturfokus wird niemals auf ein bestimmtes Seitenelement gesperrt oder dort gefangen. Der Nutzer kann alle navigierbaren Seitenelemente ausschließlich mit der Tastatur erreichen und wieder verlassen.
2.1.3 Level AAATastatur, keine Ausnahme - Alle Seitenfunktionen sind über die Tastatur verfügbar.
2.1.4 Level AZeichentasten-Kürzel - Wenn ein Tastenkürzel druckbare Zeichentasten verwendet, muss der Nutzer den Tastenbefehl deaktivieren, die definierte Taste auf eine nicht druckbare Taste ändern, zum Beispiel Ctrl, Alt usw., oder das Kürzel nur aktivieren können, wenn eine zugehörige Interface-Komponente oder ein Button fokussiert ist.
Guideline 2.2Ausreichend Zeit: Geben Sie Nutzern ausreichend Zeit, Inhalte zu lesen und zu verwenden.
2.2.1 Level AZeit anpassbar - Wenn eine Seite oder Anwendung ein Zeitlimit hat, erhält der Nutzer Optionen, dieses Zeitlimit auszuschalten, anzupassen oder zu verlängern. Dies ist keine Anforderung für Echtzeitereignisse, zum Beispiel eine Auktion, bei denen das Zeitlimit zwingend erforderlich ist, oder wenn das Zeitlimit länger als 20 Stunden ist.
2.2.2 Level APausieren, stoppen, ausblenden - Automatisch bewegte, blinkende oder scrollende Inhalte, zum Beispiel Karussells, Lauftexte oder Animationen, die länger als 5 Sekunden dauern, können vom Nutzer pausiert, gestoppt oder ausgeblendet werden. - Automatisch aktualisierte Inhalte, zum Beispiel ein dynamisch aktualisierter Nachrichtenticker, Chatnachrichten usw., können vom Nutzer pausiert, gestoppt oder ausgeblendet werden oder der Nutzer kann den Zeitpunkt der Aktualisierungen manuell steuern.
2.2.3 Level AAAKeine zeitliche Begrenzung - Inhalte und Funktionen haben keine Zeitlimits oder Einschränkungen.
2.2.4 Level AAAUnterbrechungen - Unterbrechungen, zum Beispiel Warnmeldungen, Seitenaktualisierungen usw., können vom Nutzer verschoben oder unterdrückt werden.
2.2.5 Level AAAErneute Authentifizierung - Wenn eine Authentifizierungssitzung abläuft, kann sich der Nutzer erneut authentifizieren und die Aktivität fortsetzen, ohne Daten auf der aktuellen Seite zu verlieren.
2.2.6 Level AAATimeouts - Nutzer müssen vor jedem Timeout gewarnt werden, der zu Datenverlust führen könnte, sofern die Daten nicht länger als 20 Stunden Nutzerinaktivität gespeichert bleiben.
Guideline 2.3Anfälle und körperliche Reaktionen: Gestalten Sie Inhalte nicht auf eine Weise, die bekanntermaßen Anfälle oder körperliche Reaktionen auslösen kann.
2.3.1 Level ADreimaliges Blinken oder unterhalb des Schwellenwerts - Kein Seiteninhalt blinkt häufiger als dreimal pro Sekunde, es sei denn, der blinkende Inhalt ist ausreichend klein, die Blitze haben geringen Kontrast und enthalten nicht zu viel Rot. Siehe allgemeine Blitz- und Rotblitz-Schwellenwerte.
2.3.2 Level AAADreimaliges Blinken - Kein Seiteninhalt blinkt häufiger als dreimal pro Sekunde.
2.3.3 Level AAAAnimation durch Interaktionen - Nutzer können nicht wesentliche Animationen und Bewegungen deaktivieren, die durch Nutzerinteraktion ausgelöst werden.
Guideline 2.4Navigierbar: Stellen Sie Möglichkeiten bereit, die Nutzern helfen, zu navigieren, Inhalte zu finden und zu erkennen, wo sie sich befinden.
2.4.1 Level ABlöcke überspringen - Es wird ein Link bereitgestellt, um Navigation und andere Seitenelemente zu überspringen, die auf Webseiten wiederholt werden. - Eine geeignete Überschriftenstruktur und/oder die Identifikation von Seitenregionen/Landmarks kann als ausreichende Technik betrachtet werden. Da die Navigation nach Überschriften oder Regionen in den meisten Browsern nicht unterstützt wird, empfiehlt WebAIM einen „Skip“-Link, zusätzlich zu Überschriften und Regionen, um sehende Tastaturnutzer bestmöglich zu unterstützen.
2.4.2 Level ASeitentitel - Die Webseite hat einen beschreibenden und informativen Seitentitel.
2.4.3Fokusreihenfolge - Die Navigationsreihenfolge von Links, Formularelementen usw. ist logisch und intuitiv.
2.4.4 Level ALinkzweck, im Kontext - Der Zweck jedes Links, Formular-Bildbuttons oder Image-Map-Hotspots kann allein aus dem Linktext oder aus dem Linktext und seinem Kontext bestimmt werden, zum Beispiel umgebender Text, Listenelement, vorherige Überschrift oder Tabellenüberschriften. - Links oder Formular-Bildbuttons mit gleichem Text, die zu unterschiedlichen Zielen führen, sind klar unterscheidbar.
2.4.5 Level AAMehrere Wege - Es sind mehrere Wege verfügbar, um andere Webseiten auf der Website zu finden. - Mindestens zwei davon: Liste verwandter Seiten, Inhaltsverzeichnis, Sitemap, Website-Suche oder Liste aller verfügbaren Webseiten.
2.4.6 Level AAÜberschriften und Labels - Seitenüberschriften und Labels für Formular- und interaktive Steuerelemente sind informativ. Vermeiden Sie doppelte Überschriften, zum Beispiel „Mehr Details“, oder Labeltexte, zum Beispiel „Vorname“, sofern die Struktur keine ausreichende Unterscheidung zwischen ihnen ermöglicht.
2.4.7 Level AAFokus sichtbar - Es ist visuell erkennbar, welches Seitenelement aktuell den Tastaturfokus hat, also wo sich der Nutzer beim Durchtabben der Seite befindet.
2.4.8 Level AAAStandort - Wenn eine Webseite Teil einer Seitenfolge oder einer komplexen Seitenstruktur ist, wird die aktuelle Position auf der Seite angezeigt, zum Beispiel über Breadcrumbs oder die Angabe des aktuellen Schritts in einer Sequenz, etwa „Schritt 2 von 5 - Lieferadresse“.
2.4.9 Level AAALinkzweck, nur Link - Der Zweck jedes Links, Formular-Bildbuttons oder Image-Map-Hotspots kann allein aus dem Linktext bestimmt werden. - Es gibt keine Links oder Formular-Bildbuttons mit gleichem Text, die zu unterschiedlichen Zielen führen.
2.4.10 Level AAAAbschnittsüberschriften - Über die allgemeine Dokumentstruktur hinaus werden einzelne Inhaltsabschnitte, wo angemessen, durch Überschriften ausgezeichnet.
Guideline 2.5Eingabemodalitäten: Erleichtern Sie Nutzern die Bedienung von Funktionen über verschiedene Eingabeformen jenseits der Tastatur.
2.5.1 Level AZeigergesten - Wenn Mehrpunkt- oder pfadbasierte Gesten, zum Beispiel Zusammenziehen, Wischen oder Ziehen über den Bildschirm, für die Funktionalität nicht wesentlich sind, kann die Funktion auch mit einer Einzelpunkt-Aktivierung, zum Beispiel durch Aktivieren eines Buttons, ausgeführt werden.
2.5.2 Level AZeigerabbruch - Um unbeabsichtigte Aktivierungen von Steuerelementen zu vermeiden, sollten nicht wesentliche Down-Event-Aktivierungen, zum Beispiel onmousedown, beim Klicken, Tippen oder langen Drücken vermieden werden. Verwenden Sie stattdessen onclick, onmouseup oder Ähnliches. Wenn onmouseup oder Ähnliches verwendet wird, muss ein Mechanismus bereitgestellt werden, um die ausgeführte Aktion abzubrechen oder rückgängig zu machen.
2.5.3 Level ALabel im Namen - Wenn eine Interface-Komponente, zum Beispiel Link, Button usw., Text oder Bilder von Text darstellt, muss der zugängliche Name, also Label, Alternativtext, aria-label usw., dieser Komponente den sichtbaren Text enthalten.
2.5.4 Level ABewegungsaktivierung - Funktionen, die durch Bewegung des Geräts, zum Beispiel Schütteln oder Schwenken eines mobilen Geräts, oder durch Nutzerbewegung, zum Beispiel Winken in eine Kamera, ausgelöst werden, können deaktiviert werden und eine gleichwertige Funktionalität wird über Standardsteuerelemente wie Buttons bereitgestellt.
2.5.5 Level AAAZielgröße - Klickbare Ziele sind mindestens 44 x 44 Pixel groß, es sei denn, ein alternatives Ziel dieser Größe wird bereitgestellt, das Ziel ist inline, zum Beispiel ein Link innerhalb eines Satzes, das Ziel wurde nicht vom Autor verändert, zum Beispiel eine Standard-Checkbox, oder die kleine Zielgröße ist für die Funktion wesentlich.
2.5.6 Level AAAGleichzeitige Eingabemechanismen - Inhalte beschränken die Eingabe nicht auf eine bestimmte Modalität, zum Beispiel nur Touch oder nur Tastatur, sondern müssen alternative Eingaben unterstützen, zum Beispiel die Verwendung einer Tastatur auf einem mobilen Gerät.

3 - Verständlich

Informationen und die Bedienung der Benutzeroberfläche müssen verständlich sein.

Nr.Beschreibung der Anforderung
Guideline 3.1Lesbar: Machen Sie Textinhalte lesbar und verständlich.
3.1.1 Level ASprache der Seite - Die Sprache der Seite wird über das HTML-lang-Attribut identifiziert, zum Beispiel <html lang="en">.
3.1.2 Level AASprache von Teilen - Die Sprache von Seiteninhalten, die in einer anderen Sprache vorliegen, wird über das lang-Attribut identifiziert, zum Beispiel <blockquote lang="es">.
3.1.3 Level AAAUngewöhnliche Wörter - Wörter, die mehrdeutig, unbekannt oder auf sehr spezifische Weise verwendet werden können, werden durch angrenzenden Text, eine Definitionsliste, ein Glossar oder eine andere geeignete Methode definiert.
3.1.4 Level AAAAbkürzungen - Die Bedeutung einer unbekannten Abkürzung wird bereitgestellt, indem sie bei der ersten Verwendung ausgeschrieben wird, das -Element verwendet wird oder auf eine Definition oder ein Glossar verlinkt wird.
3.1.5 Level AAALeseniveau - Für Inhalte, die anspruchsvoller sind, als sie von einer Person mit ungefähr 9 Jahren Grundbildung sinnvoll gelesen werden können, wird eine verständlichere Alternative bereitgestellt.
3.1.6 Level AAAAussprache - Wenn die Aussprache eines Wortes für dessen Verständnis entscheidend ist, wird die Aussprache unmittelbar nach dem Wort oder über einen Link bzw. ein Glossar bereitgestellt.
Guideline 3.2Vorhersehbar: Sorgen Sie dafür, dass Webseiten vorhersehbar erscheinen und funktionieren.
3.2.1 Level ABei Fokus - Wenn ein Seitenelement Fokus erhält, führt dies nicht zu einer wesentlichen Änderung der Seite, zum Öffnen eines Pop-up-Fensters, zu einer zusätzlichen Änderung des Tastaturfokus oder zu einer anderen Änderung, die den Nutzer verwirren oder desorientieren könnte.
3.2.2 Level ABei Eingabe - Wenn ein Nutzer Informationen eingibt oder mit einem Steuerelement interagiert, führt dies nicht zu einer wesentlichen Änderung der Seite, zum Öffnen eines Pop-up-Fensters, zu einer zusätzlichen Änderung des Tastaturfokus oder zu einer anderen Änderung, die den Nutzer verwirren oder desorientieren könnte, sofern der Nutzer nicht vorab über die Änderung informiert wird.
3.2.3 Level AAKonsistente Navigation - Navigationslinks, die auf Webseiten wiederholt werden, ändern ihre Reihenfolge beim Navigieren durch die Website nicht.
3.2.4 Level AAKonsistente Identifikation - Elemente mit derselben Funktionalität werden über mehrere Webseiten hinweg konsistent identifiziert. Zum Beispiel sollte ein Suchfeld oben auf der Website immer gleich beschriftet sein.
3.2.5 Level AAAÄnderung auf Anfrage - Wesentliche Änderungen der Seite, das Öffnen von Pop-up-Fenstern, unkontrollierte Änderungen des Tastaturfokus oder andere Änderungen, die den Nutzer verwirren oder desorientieren könnten, müssen vom Nutzer initiiert werden. Alternativ wird dem Nutzer eine Option bereitgestellt, solche Änderungen zu deaktivieren.
Guideline 3.3Eingabeunterstützung: Helfen Sie Nutzern, Fehler zu vermeiden und zu korrigieren.
3.3.1 Level AFehleridentifikation - Erforderliche Formularelemente oder Formularelemente, die ein bestimmtes Format, einen bestimmten Wert oder eine bestimmte Länge erfordern, stellen diese Information innerhalb des Labels des Elements bereit. - Validierungsfehler in Formularen sind effizient, intuitiv und zugänglich. Der Fehler wird klar identifiziert, ein schneller Zugang zum problematischen Element wird bereitgestellt und der Nutzer kann den Fehler einfach korrigieren und das Formular erneut absenden.
3.3.2 Level ALabels oder Anweisungen - Ausreichende Labels, Hinweise und Anweisungen für erforderliche interaktive Elemente werden über Anweisungen, Beispiele, korrekt positionierte Formularlabels und/oder Fieldsets/Legends bereitgestellt.
3.3.3 Level AAFehlervorschlag - Wenn ein Eingabefehler erkannt wird, über clientseitige oder serverseitige Validierung, werden Vorschläge zur Behebung der Eingabe zeitnah und zugänglich bereitgestellt.
3.3.4 Level AAFehlervermeidung, rechtlich, finanziell, Daten - Wenn der Nutzer rechtliche, finanzielle oder Testdaten ändern oder löschen kann, können die Änderungen/Löschungen rückgängig gemacht, überprüft oder bestätigt werden.
3.3.5 Level AAAHilfe - Anweisungen und Hinweise werden im Kontext bereitgestellt, um beim Ausfüllen und Absenden von Formularen zu helfen.
3.3.6 Level AAAFehlervermeidung, alle - Wenn der Nutzer Informationen absenden kann, ist das Absenden rückgängig zu machen, zu überprüfen oder zu bestätigen.

4 - Robust

Inhalte müssen robust genug sein, damit sie von einer Vielzahl von User Agents einschließlich assistiver Technologien interpretiert werden können.

Nr.Beschreibung der Anforderung
Guideline 4.1Kompatibel: Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen User Agents, einschließlich assistiver Technologien.
4.1.1 Level AParsing - Bedeutende HTML-Validierungs-/Parsing-Fehler werden vermieden. Prüfen Sie unter http://validator.w3.org/.
4.1.2 Level AName, Rolle, Wert - Markup wird so verwendet, dass Barrierefreiheit unterstützt wird. Dazu gehört die Einhaltung der HTML-Spezifikationen und die angemessene Verwendung von Formularen, Formularlabels, Frame-Titeln usw. - ARIA wird angemessen verwendet, um Barrierefreiheit zu verbessern, wenn HTML nicht ausreicht.
4.1.3 Level AAStatusmeldungen - Wenn eine wichtige Statusmeldung angezeigt wird und der Fokus nicht auf diese Meldung gesetzt wird, muss die Meldung Screenreader-Nutzern angekündigt werden, typischerweise über einen ARIA-Alert oder eine Live-Region.