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.
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/
Helfen Sie uns, was denken Sie?
Danke für die Rückmeldung!
Danke für die Rückmeldung!