Februar 05 2022

WCAG-Checkliste

Gerd
✍️ bloggen
23 Min. Lesezeit

Digital barrierefrei ist ein wichtiges und aktuelles Thema. Aber wie macht man eine Website für alle zugänglich? Dies kann durch Befolgen der WCAG (Website Content Accessibility Guidelines) erfolgen. Hier finden Sie eine WCAG-Checkliste mit allen Anforderungen, die Ihre Website für das gesetzlich vorgeschriebene Level AA erfüllen muss. Sie können die WCAG-Checkliste auch als PDF herunterladen.

WCAG-Checkliste

Was ist DigiAccessible?

DigiToegankelijk ist der niederländische Name für den Standard, nach dem Regierungsorganisationen ihre Websites und Apps für alle Bürger zugänglich machen müssen. Barrierefrei heißt hier nutzbar für alle: Jung, Alt, mit oder ohne Behinderung.

Die niederländische Regierung möchte, dass öffentliche Einrichtungen von allen Bürgern genutzt werden können. Nicht nur Gebäude oder öffentliche Verkehrsmittel, sondern auch digitale Einrichtungen wie Websites und Apps. Daher ist die digitale Zugänglichkeit eine gesetzliche Anforderung für alle Regierungsorganisationen („DigiToegankelijk | Logius“, nd).

Die Frist für eine digital zugängliche Website war der 23. September 2020 und die Frist für digital zugängliche Apps ist der 23. Juni 2021.

Nicht weniger als 25 % der Bevölkerung (4.500.000 Menschen) haben eine Behinderung. Indem Sie Ihre Website DigiAccessible machen, öffnen Sie Ihre Website für einen großen Teil unserer Gesellschaft.

Benötigen Sie eine digital zugängliche Website oder möchten Sie die Zugänglichkeit Ihrer App verbessern? Sehen Sie sich unsere Seite mit digitalen Barrierefreiheitsdiensten an und fordern Sie gleich einen kostenlosen Scan an!

Was nützt eine barrierefreie Website?

  • Effiziente Nutzung Ihrer Website
  • Benutzerbeteiligung
  • Qualität, Langlebigkeit und Benutzerfreundlichkeit
  • Auffindbarkeit und Durchsuchbarkeit Ihrer Informationen
  • Zufriedenheit mit Besuchern und Mitarbeitern
  • Soziales Bewusstsein in Ihrer Organisation
  • Gut für Ihr soziales Profil und Ihre Vielfalt
  • Klare Kommunikation mit Lieferanten
  • Kostenreduzierung

Was ist unter einer Website abgedeckt?

  • Alles, was Sie über den Browser erhalten
  • Webseiten mit Bild, Text
  • Multimediale Inhalte (Video, Audio, VR usw.)
  • Interaktive Teile und Prozesse
  • Externe Inhalte, für die Sie verantwortlich sind
  • (Mobile) Bewerbungen (obligatorisch ab 23. Juni 2021)
  • Dokumente (PDF etc.)

Basierend auf den WCAG

DigiAccessible basiert auf einem internationalen Standard für Barrierefreiheit: den Web Content Accessibility Guidelines (WCAG). Dieser Standard wird vom World Wide Web Consortium (W3C) verwaltet. Erfüllt eine Website oder App die Anforderungen von Digi Accessible, garantiert sie maximale Barrierefreiheit durch die Anwendung technischer und inhaltlicher Gestaltungsprinzipien (WGAC, 2020).

Die Fächer

Die Regeln in diesem Dokument stammen aus WCAG Version 2.1. Diese basieren auf 4 Grundprinzipien:

Prinzip 1: Beobachtbar

Informationen und Bestandteile auf der Website müssen für den Benutzer sichtbar sein.

Prinzip 2: Operativ

Teile der Website und Navigation müssen für den Nutzer leicht bedienbar sein.

Grundsatz 3: Verständlich

Informationen und die Bedienung der Website müssen für den Benutzer klar sein.

Prinzip 4: Robust

Der Inhalt von Webseiten sollte Tools wie einem Screenreader leicht zugänglich sein.

Basierend auf diesen 4 Prinzipien gibt es Erfolgskriterien, die in folgende Ebenen eingeteilt sind:

  • Stufe A: die Mindest-Zugänglichkeitsstufe (30 Kriterien)
  • Stufe AA: gute Zugänglichkeit (zusätzliche 20 Kriterien)
  • Stufe AAA: hervorragende Zugänglichkeit, auch für spezifischere Behinderungen (zusätzliche 28 Kriterien)

Um die Mindestanforderungen der Regierung zu erfüllen, muss eine DigiAccessible-Website die Stufen A und AA erfüllen. In diesem Dokument haben wir die 50 Erfolgskriterien erklärt, damit Sie leicht überprüfen können, ob Ihre Website DigiAccessible ist. Die Nummerierung der Tassen entspricht der Nummer in der W.C.A.Gdamit Sie es leicht finden können.

Prinzip 1 Wahrnehmbarkeit

Informationen und Bestandteile auf der Website müssen für den Benutzer sichtbar sein.

1.1 Textalternative

Wenn Sie Nicht-Text-Inhalte wie Bilder, Schaltflächen auf der Website platzieren, müssen diese alternativen Text enthalten, damit sie beispielsweise von sehbehinderten Personen über den Screenreader angehört werden können.

1.2.2 bis 1.2.5 Bereitstellung von Alternativen zu zeitbasierten Medien

Für vorab aufgezeichnete Videos sollte eine Text- und Audioalternative sowohl für Sehbehinderte als auch für Hörbehinderte verfügbar sein. Eine Audio-Alternative ist nur dann notwendig, wenn Informationen im Video durch Bilder statt durch Audio vermittelt werden.

Wichtig ist, dass Sie berücksichtigen, dass die wichtigsten Informationen hauptsächlich über den Ton und alternativ für Hörgeschädigte über die Untertitel vermittelt werden. Untertitel müssen am unteren Bildschirmrand gut sichtbar sein.

Dies gilt auch für alle Live-Inhalte.

1.3 Anpassbar

Erstellen Sie Inhalte, die auf vielfältige Weise präsentiert werden können, ohne dass ihre Informationen oder Struktur verloren gehen.

1.3.1 Informationen und Beziehungen

Die als visuelle Darstellung übermittelten Informationen müssen per Software erkennbar und lesbar sein oder eine Alternative im Text vorhanden sein.

1.3.2 Sinnvolle Reihenfolge

Wenn Inhalte auf eine bestimmte Weise dargestellt werden müssen, wie z. B. ein Schritt-für-Schritt-Plan, muss dies im Code angegeben werden, damit Hilfsgeräte ihn richtig lesen können.

1.3.3 Sensorische Eigenschaften

Hinweise oder Hinweise werden nicht nur durch Farbe und Form angezeigt, weil zum Beispiel etwas rot wird, wenn es nicht stimmt. Für Menschen, die beispielsweise farbenblind sind oder über einen Bildschirmleser lesen, ist dies unklar und muss daher auch durch Text angegeben werden.

1.3.4. Wiedergabemodus

Der Inhalt der Seite beschränkt die Betrachtung und Bedienung nicht nur auf Hoch- oder Querformat, es sei denn, dies ist absolut notwendig.

1.4 Unterscheidungskraft

Machen Sie es Benutzern leichter, Inhalte zu hören und zu sehen, indem Sie Vordergrund und Hintergrund trennen.

1.4.1 Verwendung von Farbe

Farbe wird nicht als einziges visuelles Mittel verwendet, um Informationen zu vermitteln, eine Aktion anzuzeigen, eine Reaktion hervorzurufen oder ein visuelles Element zu unterscheiden.

Dies ist beispielsweise mit den Farben Grün und Rot möglich, um Gut und Böse darzustellen. Diese ist für Farbenblinde nicht ersichtlich und muss mit einem Icon oder mit Text ergänzt werden.

1.4.2 Tonkontrolle

Wenn ein Video- oder Audiofragment automatisch länger als 3 Sekunden auf der Website abgespielt wird, muss dafür ein eindeutiger Ein-Aus-Button vorhanden sein. Dadurch soll verhindert werden, dass sich Audio/Video und Screenreader-Ton vermischen.

1.4.4 Reskalieren des Textes

Der Text kann ohne Hilfsmittel auf bis zu 200 % skaliert werden, ohne dass Inhalt oder Funktionalität verloren gehen. Dies gilt nicht für die Untertitel.

1.4.5 Textbilder

Text darf nicht in einem Bild auf der Webseite platziert werden, da dies die Screenreader daran hindert, ihn zu lesen. Außerdem kann der Text nicht richtig vergrößert werden.

1.4.10 Rückfluss

Der Inhalt der Seite kann sowohl horizontal als auch vertikal angezeigt werden

1.4.11 Lesbarkeit

Dabei wird ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben berücksichtigt. Dies gilt nicht für inaktive Benutzeroberflächenkomponenten und grafische Objekte.

1.4.12 Textabstand

Die Lesbarkeit für sehbehinderte Benutzer wird berücksichtigt durch:

  • Zeilenhöhe (Zeilenabstand) mindestens auf das 1,5-fache der Schriftgröße;
  • Abstand zwischen den Absätzen mindestens 2-fache Schriftgröße;
  • Buchstabenabstand (Abstand der Buchstaben) mindestens auf das 0,12-fache der Schriftgröße;
  • Abstand von Wörtern mit mindestens dem 0,16-fachen der Schriftgröße.

1.4.13 Inhalt beim Bewegen oder Fokussieren

Es sollen keine Inhalte sichtbar sein und dann per Hover oder Focus mit der Tastatur wieder ausgeblendet werden. Ein Hover ist, wenn Sie mit der Maus über ein Element auf der Webseite fahren und dieses Element sich ändert. Fokus liegt, wenn Sie beispielsweise mit der Maus in ein Feld oder Element klicken und sich dadurch der Inhalt ändert.

Prinzip 2 Bedienbarkeit

Teile der Website und Navigation müssen für den Nutzer leicht bedienbar sein.

2.1 Tastaturzugänglichkeit

Alle Funktionen auf der Seite können über die Tastatur bedient werden. Dies ist für Benutzer, die keine Maus verwenden können, aber die Seite mit der Tastatur bedienen.

Die Steuerung der Seite mit einer Tastatur sollte reibungslos und logisch navigieren, ohne dass der Benutzer auf Hindernisse stößt.

2.1.2 Keine Tastaturfalle

Beim Navigieren auf der Seite mit seiner Tastatur zu einer Komponente soll der Benutzer mit den Standardtasten problemlos wieder aus der Komponente herauskommen.

2.1.4 Einzelzeichen-Hotkeys

Wenn auf der Website Tastaturkürzel verwendet werden, sollten diese einfach zu deaktivieren und anderen Tasten zuzuweisen sein.

2.2 Genügend Zeit

Geben Sie den Benutzern genügend Zeit, um Inhalte zu lesen und zu verwenden.

2.2.1 Timing einstellbar

Alle Inhalte auf der Seite, die zeitlich begrenzt sind, wie z. B. automatisches Abmelden, sollten Folgendes berücksichtigen:

Mindestens 1 der folgenden Punkte trifft zu

  • Der Benutzer kann das Zeitlimit deaktivieren, bevor es erreicht wird
  • Der Benutzer kann das Zeitlimit ändern.
  • Der Benutzer wird bei Ablauf der Zeit gewarnt und hat mindestens 20 Sekunden Zeit, diese zu verlängern.

2.2.2 Pause, Stopp, Ausblenden

Alle sich bewegenden, blinkenden und scrollenden Elemente müssen pausiert, gestoppt oder ausgeblendet werden können.

2.3. Körperliche Reaktionen

2.3.1 Blitz

Die Website darf keine Elemente enthalten, die mehr als dreimal pro Sekunde blinken. Dies bezieht sich auf Benutzer, die Elision haben.

2.4 Navigierbar

2.4.1 Sperren umgehen

Die Seite muss Skip-Links enthalten. Diese ermöglichen es, mehrfach auf der Seite vorkommende Inhaltsblöcke zu umgehen.

2.4.2 Seitentitel

Webseiten sollten einen Titel haben, der das Thema und den Zweck der Seite beschreibt. Auch Titel müssen eindeutig sein.

2.4.2 Fokussequenz

Die Reihenfolge der Inhalte sollte beim Navigieren auf der Seite mit der Tastatur logisch sein.

2.4.4 Linkziel

Alle Links auf der Seite sollten einen klaren Linktext haben, der den Kontext beschreibt. Denken Sie an eine Schaltfläche mit dem Text „Weiterlesen“. Für einen Benutzer mit einem Screenreader ist dies bedeutungslos, insbesondere wenn er alle Links nacheinander hört.

2.4.5 Mehrere Wege

Neben der Hauptnavigation sollte es noch 2 weitere Möglichkeiten geben, die Webseiten zu erreichen.

2.4.6 Schaltflächen und Beschriftungen

Schaltflächen und Beschriftungen sollten das Thema oder den Zweck klar beschreiben, damit der Benutzer versteht, was passiert, wenn er die Schaltfläche drückt oder ein Eingabefeld ausfüllt.

2.4.7 Fokus sichtbar

Wenn der Benutzer die Tastatur verwendet, um die Webseite zu bedienen, muss er sehen können, wo er sich auf der Seite befindet.

2.5 Modalitäten

2.5.1 Zeigergesten

Alle Funktionalitäten auf der Webseite, die mit Gesten gesteuert werden, müssen mehrfach angeboten werden. Denken Sie zum Beispiel an das Wischen oder Zoomen mit den Fingern auf einem Touchscreen. Dies sollte auch mit der Tastatur möglich sein.

2.5.2 Abbruchzeiger

Es muss eine Option geben, um eine Berührungsaktion rückgängig zu machen.

2.5.3 Label im Namen

Der Text in Schaltflächen muss einen eindeutigen Namen haben, der beschreibt, was die Funktion ist.

2.5.4 Bewegungsaktivierung

Funktionen, die nur durch Bewegung gesteuert werden, müssen auch abschaltbar sein. Denken Sie beispielsweise daran, Ihren Bildschirm zu schütteln oder zu drehen.

Prinzip 3 Verständlich

Informationen und die Bedienung der Website müssen für den Benutzer klar sein.

3.1 Lesbar

3.1.1 Sprache der Seite

Wenn der Text auf der Webseite auf Niederländisch geschrieben ist, wird er auch für den Bildschirmleser auf Niederländisch eingestellt. Andernfalls hat der Bildschirmleser möglicherweise Schwierigkeiten, Wörter auszusprechen.

3.1.2 Sprache der Teile

Wenn die Website verschiedene Sprachen verwendet, ist dies im Code angegeben.

3.2 Vorhersehbar

3.2.1 Fokus

Wenn sich der Benutzer auf etwas konzentriert, sollte sich der Kontext nicht ändern. Beispielsweise dürfen keine zusätzlichen Informationen angezeigt werden. Wenn Sie beispielsweise etwas anklicken, können ohne das Wissen des Nutzers plötzlich zusätzliche Informationen erscheinen, beispielsweise durch einen „Weiterlesen“-Button.

Es muss auch klar sein, wo der Fokus liegt. Der Benutzer muss sehen können, wo er sich auf der Seite befindet, das können Sie beispielsweise tun, indem Sie das Design des Eingabefelds ändern, wenn der Fokus darauf liegt.

3.2.2-Eingang

Wenn der Benutzer Eingaben zu etwas macht, ändert sich der Kontext möglicherweise nicht. Wenn der Benutzer beispielsweise auf ein Eingabefeld klickt, sollte nicht plötzlich „das Passwort muss mindestens 1 Großbuchstaben enthalten“ erscheinen.

Dies sollte vorher sichtbar sein.

3.2.3 Konsistente Navigation

Das Navigationsmenü ist logisch aufgebaut und kehrt auf jeder Seite gleich zurück.

3.2.4 Einheitliche Identifikation

Die Navigationsmenüpunkte sind klar beschreibend und erscheinen einheitlich auf jeder Seite.

3.3. Importhilfe

Helfen Sie den Benutzern, Fehler zu vermeiden, indem Sie sie verbessern.

3.3.1 Fehleridentifikation

Wird beispielsweise beim Ausfüllen eines Formulars automatisch ein Fehler entdeckt, erhält der Nutzer an der richtigen Stelle sofort eine Rückmeldung darüber.

3.3.2 Etiketten oder Anweisungen

Wenn der Benutzer beispielsweise etwas in ein Formular eingeben muss, werden klare Anweisungen gegeben, wie etwa: "Geben Sie Ihren Namen ein" und "Verwenden Sie mindestens einen Großbuchstaben und eine Zahl für Ihr Passwort". Dies soll verhindern, dass der Benutzer einen Fehler macht.

3.3.3 Fehlervorschlag

Eingabefelder geben beim Erkennen eines Fehlers automatisch Rückmeldung, um diesen zu verhindern.

3.3.4 Fehlervermeidung

Für Webseiten, auf denen Finanzdaten eingegeben werden müssen, muss der Benutzer in der Lage sein, mindestens eine der folgenden Möglichkeiten anzuwenden:

  • Zurücksetzen
  • Senden rückgängig machen
  • Controleren
  • Die Daten werden überprüft
  • Feedback zu eventuellen Fehlern
  • Es ist ein System vorhanden, das die Daten überprüft, validiert und verbessert, bevor die Maßnahmen abgeschlossen werden.

Prinzip 4 Robust

Inhalte müssen robust genug sein, um von einer Vielzahl von Tools zuverlässig interpretiert zu werden.

4.1 Kompatibel

4.1.1 Analysieren

Der HTML-Code enthält so wenig Fehler wie möglich, weil:

  • Die Elemente haben ein Start-Tag und ein End-Tag
  • Die Elemente sind ordnungsgemäß im Code verschachtelt
  • Die Elemente enthalten keine doppelten Attribute
  • Alle IDs sind eindeutig

4.1.2 Rollenname, Wert

Alle Elemente auf der Webseite können mit Hilfsmitteln für Benutzer mit Behinderungen bedient werden. Um zu überprüfen, ob dies richtig funktioniert, werden Online-Tools getestet, um zu sehen, welche Elemente verbessert werden müssen.

4.1.3 Statusmeldungen

Alle Statusmeldungen wie Fehlermeldungen müssen auch für behinderte Benutzerhilfsgeräte verfügbar sein.

Quellen

DigiAccessible | Logik. (nd). Abgerufen am 16. August 2020 von https://logius.nl/diensten/digi zugänglich

Initiative, WWA (2020, 22. Juli). Übersicht über die Richtlinien für barrierefreie Webinhalte (WCAG). Abgerufen am 16. Oktober 2020 von https://www.w3.org/WAI/standards-guidelines/wcag/

Gerd Gründer[E-Mail geschützt] 06-20413957
Ich praktiziereWhatsApp

Inspiriert? Folgende Themen wurden angeboten

SEO
Zeigen Sie alle Inspirationen