So führen Sie ein Barrierefreiheitsaudit für die Einhaltung der WCAG durch

Die WCAG (Web Content Accessibility Guidelines) wurden vom World Wide Web Consortium (W3C) erstellt und sind der weltweit anerkannteste Standard für Barrierefreiheit.

In diesem Artikel skizzieren wir die Aufgaben, die für die Durchführung eines Audits zur Überprüfung der Einhaltung des WCAG 2.1-Standards erforderlich sind.

Bei der Barrierefreiheit geht es darum, sicherzustellen, dass Ihre Website-Inhalte und -Funktionen einem breiteren Publikum zugänglich sind.

Zum Beispiel:

• Vorübergehende Barrierefreiheit – Jemand hat seine Brille verloren!
• Geräteprobleme – Sie befinden sich auf einem Gerät, das restriktiv ist, z. B. Mobiltelefon
• Situativ – Helles Sonnenlicht, dunkler Raum usw
• Dauerhafte Behinderung – kein Sehen, kein Hören, kognitive Probleme usw.
• Bandbreitenprobleme – Eine sehr langsame Verbindung

Wie Sie sehen, gibt es viele Formen der Behinderung, die Sie berücksichtigen müssen.

Die WCAG-Richtlinien sind wie folgt unterteilt:

Bevor Sie die einzelnen Abschnitte durchgehen, finden Sie hier eine Liste dessen, was Sie zum Testen benötigen:

1. Wahrnehmbar

• Eine Auswahl an Browsern, die nur Text enthalten (z. B. Lynx)
• Ein Tool zum Überprüfen von Alt-Tags, Überschriften usw. (z. B. ScreamingFrog)
• Ein Screenreader wie NVDA
• Ein Tool zum Testen der Barrierefreiheit von Websites
• Chrome-Entwicklungstools
• Zugriff auf eine Auswahl an Geräten

Hier geht es darum sicherzustellen, dass Inhalte in verschiedenen Formen zugänglich sind. Beispielsweise kann jemand den Inhalt sehen, ihn anhören, den Inhalt durch Berühren verstehen usw. Dies umfasst auch Elemente der Benutzeroberfläche wie Menüs und Schaltflächen.

Das WAVE Accessibility Tool ist eines von vielen Tools, die verwendet werden können, um Probleme in diesem Bereich zu finden:

Im obigen Beispiel funktioniert die Seite recht gut. Es hat nur 1 Fehler und 5 Fehler mit Farbkontrastproblemen.

Der einzige Fehler ist, dass diese Seite die Sprache nicht anzeigt.

Aber es gibt viele gute Dinge auf der Seite. Im Bild auf der rechten Seite sehen Sie beispielsweise zwei grün hervorgehobene Elemente, die beide die Bezeichnungen „ARIA“ verwenden, um einem Bildschirmleser zu helfen, diesen Inhalt zu verstehen. Später werden wir mehr darüber erklären.

Lassen Sie uns die Richtlinien und die Erfolgskriterien durchgehen.

Richtlinie 1.1 – Bereitstellung von Textalternativen zu Nicht-Textinhalten

Gibt es Textalternativen zu Nicht-Textinhalten?

Wenn Sie auf einem Bildschirm Nicht-Text-Inhalte haben, müssen Sie überprüfen, ob Beschreibungen für jedes dieser Elemente vorhanden sind.

Bevor wir Beispiele geben, möchte ich auf ARIA eingehen, das eine Möglichkeit darstellt, Elemente mit zusätzlichen Beschreibungen zu versehen, und nur verwendet werden sollte, wenn Standard-HTML nicht möglich ist.

Wenn Sie HTML verwenden, erhalten Sie automatisch Tastatursteuerung, Fokus usw. und das ist die Präferenz, aber ARIA kann als Backup verwendet werden.

Was ist ARIA?

ARIA (Accessible Rich Internet Applications) ist eine Möglichkeit, Inhalte zu beschreiben, die mit Standard-HTML nicht ausreichend beschrieben werden können. Sein Hauptzweck ist für Screenreader. Wenn Sie Standard-HTML verwenden können, ist dies der beste Ansatz, da es automatisch den Fokus auf das Element und die Tastatursteuerung legt. Wenn dies nicht möglich ist, ist ARIA die Alternative.

Beschreibende Bilder

Ein beschreibendes Bild ist etwas, das etwas Bedeutungsvolles darstellt. Zum Beispiel ein Bild von einem Toyota Prius Auto.

Wenn Sie das Bild nicht sehen können, muss es eine Möglichkeit geben, zu beschreiben, was dieses Bild darstellt, wo ein Alt-Tag ins Spiel kommt.

Auf Plattformen wie WordPress können Sie beim Hochladen des Bildes das Alt-Tag hinzufügen:

Ziemlich oft aktualisieren wir dieses Alt-Tag, um sicherzustellen, dass relevante Schlüsselwörter für SEO-Zwecke enthalten sind, aber wir müssen darüber hinausgehen.

Screaming Frog analysiert alle Bilder auf Ihrer Website und zeigt an, welche Bilder keine Alt-Tags, doppelte Alt-Tags, zu lange Alt-Tags oder zu kurze Alt-Tags haben!

Sie können die Bilder neben den Details des Bildes auch sehen:

Dekoratives Bild

Ein dekoratives Bild ist ein Bild, das dazu da ist, das Design zu verbessern, aber es gibt nichts im Bild, das es wert wäre, beschrieben zu werden!

Dekorative Bilder sollten die CSS-Hintergrundeigenschaft verwenden, es sei denn, es gibt einen guten Grund für die Verwendung des Tags „img“. Wenn ein Screenreader die CSS-Hintergrundeigenschaft sieht, weiß er, dass er das Bild ignorieren soll.

Hier ist ein Beispiel für ein Bild, das als Hintergrundbild auf der My Emergency Doctor-Website in Australien beschrieben wird:

Hier ist der Code dahinter:

Da dieses Bild nicht als <img> aufgeführt ist, verwendet es role=img, um Screenreadern mitzuteilen, dass es sich um ein Bild handelt. Es verwendet das 'Aria-Label', um eine gute genaue Beschreibung des Bildes zu geben. Es definiert das Bild auch als "Hintergrundbild".

Hinweis: Wenn Sie das 'img'-Tag für ein Hintergrundbild verwenden, müssen Sie ein null-alt-Tag definieren, z. B. alt=" "

Wann sollten Sie <img> anstelle von Hintergrundfarbe verwenden?

Wenn ein Bild ein wichtiger Teil des Inhalts ist, verwenden Sie <img>. Wenn Sie beispielsweise ein Produktbild haben, ist dies <img> . Sie könnten auch Bilder haben, die nur Hintergrundbilder sind, die zu Dekorationszwecken verwendet werden, und es macht keinen Sinn, diese als Bilder zu bezeichnen (die von Google indiziert werden).

Im obigen Beispiel könnten Sie sich fragen, ob das angezeigte Bild als img definiert werden sollte, aber es ist ein Stock-Foto und sie haben sich entschieden, es stattdessen als Hintergrundbild zu definieren, was in Ordnung ist.

Hinweis: <img> ist ein HTML-Tag, aber background-image ist ein CSS-Stil, den Sie verwenden.

UI-Steuerelemente

Es gibt verschiedene UI-Steuerelemente, die Text erfordern, um zu beschreiben, was es ist.

Beispielsweise eine Schaltfläche oder ein Formularsteuerelement.

Eine Schaltfläche wird verwendet, um eine Funktion abzuschließen. Es könnte eine Schaltfläche sein, die nur ein Symbol hat, und eine, die Text in der Schaltfläche enthält. Beides könnte anders gehandhabt werden.

Mit ARIA können Sie „role=button“ definieren, aber mit Standard-HTML können Sie das <button>-Tag verwenden. Welche sollten Sie verwenden?

Hier ist ein Beispiel für eine Schaltfläche, die nur ein X enthält, für das wir ein „Arie-Label“ erstellen müssen, um zu beschreiben, was die Schaltfläche tut.

<button aria-label=“Close“ onclick=“myDialog.close()“>X</button>

Hier ist eine Liste typischer UI-Steuerelemente, die Sie testen müssen:

Wenn Sie Formulare verwenden, müssen Sie sicherstellen, dass jedes Feld richtig beschriftet ist. Hier ist ein Beispiel für eine gute Beschriftung:

<label for="fname">Vorname:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Nachname:</label><br>

<input type="text" id="lname" name="lname">

</form>

Hinweis: Bei Formularen sollten Sie außerdem Folgendes sicherstellen:

• Pflichtfelder deutlich kennzeichnen. Wenn ein Feld obligatorisch ist, muss es auch im HTML korrekt beschriftet werden.
• Es gibt Anweisungen für den Benutzer (normalerweise oben im Formular)
• Benutzer erhalten Hilfe, wenn sie beim Ausfüllen eines Formularfelds einen Fehler machen (z. B. falsches Datumsformat, das müssen Sie eingeben).

Captcha

Dies kann je nach Implementierung sehr problematisch sein. Zum Beispiel, wenn Bilder gezeigt werden und Sie gefragt werden, welches Bild Ampeln enthält!

Wir werden die Implementierung überprüfen und entsprechende Vorschläge unterbreiten.

Multimediale Inhalte

Video/Audio benötigt mindestens eine Beschreibung, um zu identifizieren, worum es in dem Video/Audio geht.

Verknüpfungen

Sie möchten sicherstellen, dass sich Links auf der Seite deutlich abheben (z. B. unterschiedliche Farbe) und dass sie relevante Ankertexte und Linkbeschreibungen verwenden.

Richtlinie 1.2 – Zeitbasierte Medien

In diesem Bereich geht es um die Bereitstellung von Video- und Audioinhalten, die zugänglicher gemacht werden müssen.

Ist eine Transkription nur für voraufgezeichnetes Audio oder nur für Video verfügbar ?

Die Videotranskription ist die Übersetzung des Tons Ihres Videos in Text. Die Transkription enthält keine Audioinformationen, die Dinge wie im Video angezeigte Bilder beschreiben. Dies wird separat gehandhabt.

Tipp zur Transkription!

Rev.com ist ein großartiger Service zum Erstellen von Untertiteln/Transkriptionen für Ihr Audio/Video. Sie bieten sogar einen Live-Untertitelungsdienst für Zoom-Videos an.

Sind Untertitel für vorab aufgezeichnetes Audio verfügbar?

Die Bildunterschrift ist ein Text, der im Video erscheint, um den Benutzer darüber zu informieren, was die Person sagt.

Gibt es eine Audiodeskription oder Medienalternative (aufgezeichnet) ?

Wenn Sie sich ein Video ansehen, reichen die Untertitel möglicherweise nicht aus, um zu beschreiben, was im Video gezeigt wird. Hier ist auch die Audiodeskription erforderlich.

Beispielsweise könnte eine Audiobeschreibung beschreiben, was im Hintergrund passiert, wenn jemand spricht, um den Benutzern einen Kontext zu geben.

Hier ist ein Transkriptionsbeispiel mit Audiodeskription.

Das ist großartig für Ihre Website-Besucher, aber auch gut für SEO!

Tipp zur Auswahl eines barrierefreien Players:

Sie möchten sicherstellen, dass der von Ihnen verwendete Videoplayer die Anforderungen für die Barrierefreiheit unterstützt:

1. Unterstützt Untertitel
2. Die Audiobeschreibung kann ein-/ausgeschaltet werden
3. Die Schlüsselwortsteuerung kann auf dem Media Player verwendet werden
4. Media Player funktioniert auf verschiedenen Geräten und Browsern
5. Alle Bedienelemente sind zugänglich.

Gibt es Untertitel für Live-Audio ?

Sie werden im Allgemeinen keine Live-Video- oder Audioinhalte auf Ihrer Website haben, aber wenn Sie dies tun würden, müssten Sie gleichzeitig Untertitel erstellen, damit die Benutzer die Untertitel sehen, die angezeigt werden, während die Person spricht.

Es sind Tools verfügbar, mit denen Sie Ihr Live-Video und -Audio automatisch beschriften können.

Gibt es eine Audiodeskription für aufgezeichnete synchronisierte Medien?

Dies gilt für Medien, die Video und Audio enthalten. Wir wollen Audioinformationen, die die Medien begleiten.

Richtlinie 1.3 – Anpassbar – Präsentieren Sie Informationen in einem Format, das von Software verstanden werden kann.

Sie müssen sicherstellen, dass das, was Sie visuell interpretieren können, indem Sie etwas betrachten, programmgesteuert beschrieben wird, damit es von Software wie Bildschirmleseprogrammen richtig interpretiert werden kann.

Gibt es eine logische Struktur für den Inhalt und ist es einfach, die Beziehung zu jedem Inhalt innerhalb dieser Struktur zu verstehen?

Wenn Sie eine Webseite anzeigen, sehen Sie normalerweise Überschriften, Absätze, fettgedruckte Inhalte, Tabellen usw. Und wenn Sie Details einer Tabelle anzeigen, sehen Sie Überschriften und Sie sehen deutlich, welche Zeile für welche Überschrift relevant ist.

Folgendes müssen Sie überprüfen:

• Ist der Inhalt in Unterüberschriften aufgeteilt?
• Werden gegebenenfalls Listen, Tabellen etc. verwendet?
• Wird für andere Strukturelemente im gesamten Inhalt korrektes HTML verwendet?
• Werden Labels und Alt-Text nach Bedarf verwendet (z. B. auf Formularen?)

Tipp

Ein guter Ausgangspunkt ist es, Ihre Website mit einem Validator-Tool zu testen, das auf gültiges HTML prüft (z. B. W3.org HTML-Validator).

Hier ist ein Beispiel für ein Formular, das erforderliche Felder rot anzeigt. Für einen visuellen Benutzer ist das in Ordnung, aber was ist mit jemandem, der eine Braillezeile verwendet?

Um dieses Problem zu umgehen, wird das Wort „erforderlich“ auch zur Bezeichnung für den Nachnamen hinzugefügt, der ein Pflichtfeld ist.

 <label for="lastname" class="erforderlich">Nachname (erforderlich): </label>
<input type="text" size="25" value=""/>
<style type="text/css">
  .erforderlich {
    Farbe Rot;
  }
</style>

Gibt es eine sinnvolle Reihenfolge der Inhalte?

• Wenn Sie eine Webseite anzeigen, sehen Sie eine Navigationsleiste, dann einige Inhalte, Überschriften, Unterüberschriften und Textabsätze. Sie möchten sicherstellen, dass dies in einer sinnvollen Reihenfolge dargestellt wird.
• Verwenden Sie Überschriftenstile, um die Wichtigkeit von Abschnitten anzuzeigen. Sie haben normalerweise nur einen <h1>-Stil, um die Inhaltsseite zu identifizieren, und dann haben Sie möglicherweise mehrere H2, H3 usw.
• Die Navigation vom Inhalt trennen (z. B. Navigation mit <nav> definieren)
• Verwenden Sie gültiges HTML

Hier ist eine typische Struktur sinnvoller Überschriften:

Können Benutzer den Inhalt verstehen, wenn sie Form, Größe oder Informationen über räumliche Form oder Größe nicht wahrnehmen können?

Am einfachsten lässt sich das an einem Beispiel erklären:

Nehmen wir an, Sie haben eine Vergleichstabelle von Softwareproduktfunktionen und wenn ein Produkt eine Funktion hat, wird in dieser Spalte ein Rautenbild angezeigt. Dies ist nicht ausreichend, Sie müssen Text hinzufügen, um anzugeben, was dieser Diamant darstellt.

Funktioniert die Website gut im Hoch- und Querformat?

Die Website muss sich an Hoch- oder Querformat anpassen können, ohne an Bedeutung zu verlieren.

Wenn eine Website Responsive Design korrekt implementiert hat, passt sie sich beim Ändern der Ausrichtung an einen anderen Darstellungsbereich an (dh wählt eine geeignetere Anzeige basierend auf den Bildschirmabmessungen).

Sind Formulareingaben korrekt beschrieben?

Damit soll sichergestellt werden, dass programmgesteuert genügend Informationen zu allen Feldern vorhanden sind, die in einem Formular ausgefüllt werden müssen.

Und wenn es möglich ist, aktivieren Sie das automatische Ausfüllen, damit der Benutzer nicht alles ausfüllen muss!

Kann der Zweck von Elementen auf einer Seite programmgesteuert ermittelt werden?

Ein Beispiel hierfür ist die Verwendung des ARIA-Elements „Rolle“ für Bereiche einer Website.

Beispielsweise könnte ein Banner mit Logo/Firmenname usw. als „Rolle=Banner“ beschrieben werden.

oder Verwendung von Eingabeetiketten auf Formularen für E-Mail, Name, Adresse usw.

So würden Sie dies in HTML sehen:

<Eingabetyp=“E-Mail>

Gibt es eine Textversion einer Grafik?

Wenn es Inhalte vom Typ Diagramm gibt, sollten Sie eine Tabelle haben, die zusammenfasst, worum es bei diesem Inhalt geht.

Richtlinie 1.4 – Inhalte sehen und hören

Es geht darum, es den Menschen leicht zu machen, den Inhalt zu sehen und zu hören.

Gibt es Textalternativen, wenn Farbe verwendet wird, um Informationen zu vermitteln?

Stellen Sie sich vor, Sie hätten ein Formular und ein erforderliches Feld würde rot angezeigt.

Das bedeutet für einen Bildschirmleser nicht viel!

Aber Sie könnten das Wort „erforderlich“ wie im folgenden Beispiel in die Tabelle einfügen:

<label for=“lastname“ class=“required“>Nachname (erforderlich): </label> <input id=“lastname“ type=“text“ size=“25″ value=““/> <style type= „text/css“> .required { color:red; } </style>

Gibt es einen Mechanismus zum Anhalten oder Stoppen des Tons, wenn er länger als 3 Sekunden abgespielt wird?

Wenn Sie einen Bildschirmleser verwenden und gleichzeitig ein Video automatisch abgespielt wird, hören Sie zwei Stimmen!

Idealerweise gibt es keine automatische Videowiedergabe, die dieses Problem löst.

Wenn es eine automatische Wiedergabe gibt, stellen Sie sicher, dass es weniger als 3 Sekunden dauert, und wenn dies nicht der Fall ist, stellen Sie sicher, dass es eine Möglichkeit gibt, den Ton des abgespielten Videos zu steuern.

Gibt es einen guten Kontrast zwischen Text und Bildern/Farbe im Hintergrund?

Wir alle wissen, wie wichtig Farben für Design und Branding sind, aber für sehbehinderte Besucher Ihrer Website machen Farben keinen großen Unterschied in ihrer Erfahrung.

Beispielsweise sehen farbenblinde Menschen keinen Unterschied zwischen Rot, Orange, Gelb und Grün, und Sie müssen auch auf sie eingehen.

Der Schlüssel hier ist, auf das Kontrastverhältnis zu achten, das eines der häufigsten Barrierefreiheitsprobleme auf Websites ist.

Besteht ein ausreichender Kontrast zwischen Textfarbe und Hintergrund? Ein Tool wie der Farbkontrastprüfer kann Ihnen dabei helfen, dies herauszufinden!

Links ist die Hintergrundfarbe und rechts die Textfarbe. Die Punktzahl liegt in der Mitte.

Die Empfehlung lautet, dass der Kontrast mindestens 4,5:1 oder 3,1 beträgt, wenn der Text groß ist (z. B. 18 Punkt oder 14 Punkt fett).

Stellen Sie außerdem sicher, dass Sie andere Tools als Farbe verwenden, um wichtige Inhalte und Informationen auf Ihrer Website zu kommunizieren.

Beispielsweise erscheint Ihr Haupt-CTA normalerweise aufgrund einer Farbe auf der Seite, die die Benutzer darauf aufmerksam macht. Um CTAs zugänglicher zu machen, können Sie Größe, Platzierung, Kühnheit und Kontrast verwenden, um sie für Menschen mit Farbenblindheit wahrnehmbar zu machen.

Kann der Text vergrößert werden und Ihre Website funktioniert weiterhin wie gewohnt?

Ein naheliegender ist das Vergrößern von Text auf einem Bildschirm, um jemandem mit einer Sehbehinderung zu helfen.

Sie möchten jedoch, dass die Website normal funktioniert, wenn ein Benutzer die Textgröße erhöht.

Wenn ein Benutzer beispielsweise den Text auf bis zu 400 % vergrößert, müssen Sie sicherstellen, dass keine Informationen verloren gehen.

Hier ist ein Bild von W3.org. Ich bin sicher, Sie möchten nicht, dass Ihre Website wie rechts aussieht, wenn Sie Text vergrößern.

Die WCAG 2.1-Anforderung lautet, dass Sie problemlos um 200 % vergrößern können sollten.

Werden Textbilder vermieden, sofern dies nicht erforderlich ist?

Möglicherweise haben Sie ein Logo, das Text enthält (z. B. Ihren Firmennamen), was in Ordnung ist.

Aber was ist mit Bildern von Text?

Wenn Sie ein Bild oder einen Text haben, müssen Sie zumindest ein Label angeben, das es beschreibt.

Aber Sie sind besser dran, diese Art von Bildern zu vermeiden, es sei denn:

• Es ist wichtig
• Es ist anpassbar

Ist die Website responsiv?

Es ist normal, nach unten zu scrollen, um die gesamte Webseite zu sehen, aber nicht nach rechts oder links zu scrollen.

Wenn Sie von einem Desktop auf ein kleineres Gerät wechseln, sollte sich der Bildschirm automatisch anpassen, sodass Sie immer noch nicht nach rechts oder links scrollen müssen.

Gibt es ausreichend Kontrast für Nicht-Text-Inhalte?

Benachbarte Farben müssen ein Kontrastverhältnis von mindestens 3:1 haben

Diese Anforderung gilt für Menschen mit relativ geringem Sehvermögen.

Kann der Abstand/die Zeilenhöhe ohne Leistungsverlust angepasst werden?

• Die Zeilenhöhe (Zeilenabstand) sollte mindestens das 1,5-fache der Schriftgröße betragen;
• Der Abstand nach Absätzen sollte mindestens das Zweifache der Schriftgröße betragen;
• Der Buchstabenabstand (Laufzeit) sollte mindestens das 0,12-fache der Schriftgröße betragen;
• Der Wortabstand sollte mindestens das 0,16-fache der Schriftgröße betragen.

Wird der Inhalt beim Hover oder Fokus korrekt angezeigt?

Wenn Sie auf ein Element fokussieren (z. B. mit der Tabulatortaste darauf) oder den Mauszeiger darüber bewegen, sehen Sie zusätzlichen Inhalt.

Wenn Sie beispielsweise den Mauszeiger über eine Schaltfläche bewegen, wird ein Popup angezeigt.

…oder ein Untermenü wird angezeigt.

Dieser Inhalt muss sein:

Verwerfbar – Wenn Sie beispielsweise auf Escape klicken, wird der Inhalt nicht mehr angezeigt.

Hoverable – Wenn Sie den Mauszeiger über den Inhalt bewegen, wird der Inhalt angezeigt, solange sich die Maus über dem Auslöser befindet.

Persistent – ​​Dies ist eine Kombination aus beidem. Der Inhalt bleibt sichtbar, bis der Benutzer ihn verwirft, der Benutzer die Maus wegbewegt oder der Inhalt keine wichtigen Informationen mehr enthält.

Hinweis: Dies gilt nicht, wenn ein HTML-Element wie z. B. ein Titel angezeigt wird, wenn Sie mit der Maus über etwas (z. B. ein Bild) fahren.

Ist die Schriftart lesbar?

Einige Schriftarten sind besser lesbar als andere. Serifen- oder Sans-Serifen werden bevorzugt, sind aber nicht zwingend. Sie Schlüsselteil ist, dass es lesbar ist.

2. Betriebsfähig

Dies bedeutet, dass Benutzer in der Lage sein müssen, die Navigation und die Benutzeroberfläche zu verwenden, indem sie damit interagieren. Beispielsweise können sie die Benutzeroberfläche über die Tastatur „bedienen“.

Richtlinie 2.1 – Tastaturzugriff

Viele Benutzer verwenden eine Tastatur anstelle einer Maus oder eines Trackpads, einschließlich Benutzern mit eingeschränkter Mobilität oder solchen, die einen Bildschirmleser verwenden.

Aus diesem Grund müssen alle Funktionen auf Ihrer Website über die Tastatur zugänglich sein – Links, Schaltflächen, Formulare und andere Steuerelemente.

Ist alles über eine Tastatur zugänglich?

Jetzt ist es an der Zeit, die Maus nicht mehr zu verwenden und nur noch die Tastatur zu verwenden.

Du überprüfst:

Folgt alles einer logischen Reihenfolge, vorwärts oder rückwärts (mit der Tabulatortaste, um vorwärts zu gehen, und der Umschalttaste, um zurückzugehen).

Wenn Sie sich auf einer bestimmten Schaltfläche, einem Abschnitt usw. befinden, sehen Sie, dass dieses Element hervorgehoben ist? Im folgenden Beispiel ist es offensichtlich, dass wir auf „Artikel“ geklickt haben.

Ist alles mit der Tabulatortaste zugänglich und wenn Sie die Eingabetaste drücken, wenn Sie den Fokus haben, wird die Aktion aktiviert?

Hinweis: Wenn ein Popup erscheint, müssen Sie auch darin navigieren können.

Kannst du die Überschrift überspringen?

Wenn Sie einen Bildschirmleser verwenden, möchten Sie nicht, dass er auf jeder Seite dieselbe Kopfzeile vorliest. Das würde dich wahnsinnig machen. Sie sollten also in der Lage sein, mit der Tabulatortaste zum Link „Zum Inhalt springen“ zu wechseln, die Eingabetaste zu drücken, und Ihre nächste Registerkarte überspringt diesen Abschnitt.

Wenn Sie beim ersten Aufrufen der nachstehenden Website auf die Registerkarte klicken, befinden Sie sich auf dem Link „Zum Inhalt springen“. Wenn Sie die Eingabetaste drücken, gelangen Sie direkt zum Inhalt.

Wenn Sie einen zweiten Tab drücken, gelangen Sie zum Link „Zur Navigation springen“. Wenn Sie hier die Eingabetaste drücken, gelangen Sie zur Navigation.

Wenn Sie erneut die Tabulatortaste drücken, gelangen Sie zu „Zur Navigation springen“. Wenn Sie diese auswählen, springen Sie direkt zur Navigation.

Wenn ein Zeichen, ein Satzzeichen, eine Zahl oder ein Symbol als Verknüpfung verwendet wird, muss es eine Möglichkeit geben, diese Verknüpfung zu deaktivieren oder in ein oder mehrere nicht druckbare Zeichen zu ändern. Die einzige andere Ausnahme ist, wenn die Verknüpfung nur verfügbar ist, wenn das Element den Fokus hat.

2.1.2 Gibt es Situationen, in denen Sie mit der Tastatur in eine Sackgasse geraten (eine Tastaturfalle) ?

Sie navigieren zu einem Ort auf der Website und können nicht vorwärts oder rückwärts navigieren.

Dies wird als Tastaturfalle bezeichnet. Wie das Lied geht … in einer Falle gefangen, kann nicht zurückblicken ….

Gibt es eine Alternative zu einer Tastenkombination, die mit einem Buchstaben implementiert wird?

Eine Tastenkombination für Zeichen mit jemandem zu haben, der zur Navigation auf eine Tastatur angewiesen ist, ist nicht gut, da er sie möglicherweise versehentlich drückt.

Also müssen wir eine Alternative anbieten.

a) Möglichkeit, dieses Zeichen einer anderen Verknüpfung zuzuordnen

b). Schalte es aus

c). Es ist nur aktiv, wenn Sie sich darauf konzentrieren. Das heißt, wenn Sie die Verknüpfung verwenden, passiert nichts, es sei denn, Sie befinden sich tatsächlich darauf!

Richtlinie 2.2 – Genügend Zeit

Stellen Sie sich vor, Sie würden ein Zeitlimit für das Ausfüllen eines Formulars festlegen, aber nur Benutzer ohne Barrierefreiheitsanforderungen berücksichtigen. Diese Frist kann zu kurz sein.

Ist das Timing einstellbar?

Das Abschalten des Timings ist ideal, aber es ist in Ordnung, es zu verlängern (dh wenn das Zeitlimit fast erreicht ist) oder an die neue Zeit anzupassen.

Kann der Website-Benutzer sich bewegende, blinkende oder sich automatisch aktualisierende Inhalte anhalten, stoppen oder ausblenden?

Wenn es sich bewegt/blinkt oder scrollt und es:

a). startet automatisch

b). länger als 5 Sekunden dauert

c). wird parallel zu anderen Inhalten präsentiert

Dann gibt es einen Mechanismus zum Anhalten, Stoppen oder Löschen.

Dasselbe Problem mit der automatischen Aktualisierung von Inhalten.

Leitlinie 2.3 – Krampfanfälle und körperliche Reaktionen

Diese Richtlinie soll sicherstellen, dass nichts konstruiert ist, was einen Anfall oder eine körperliche Reaktion hervorrufen könnte.

Entsprechen „Blitze“ auf dem Bildschirm den Richtlinien?

Regel Nummer eins ist, blinkende Objekte zu vermeiden, aber wenn das nicht möglich ist, stellen Sie sicher, dass es nicht mehr als dreimal in einer Sekunde blinkt oder unter den allgemeinen oder roten Blitzschwellenwerten blinkt.

Richtlinie 2.4 – Navigierbar

Es geht darum, die Navigation durch die Website zu vereinfachen.

Können Sie sich wiederholende Blöcke überspringen?

Stellen Sie sich vor, Sie verwenden einen Bildschirmleser und jedes Mal, wenn er auf eine neue Seite gelangt, liest er die Navigation vor. Das würde jetzt keinen Spaß machen. Sie müssen also in der Lage sein, diese zu überspringen. Ein Beispiel dafür habe ich vorhin gegeben.

Sind alle Seiten richtig betitelt?

Sie brauchen gute aussagekräftige Titel auf allen Seiten. Das ist gut für die Zugänglichkeit, aber auch gut für SEO.

Sie können Screaming Frog verwenden, um alle Seitentitel an einem Ort anzuzeigen:

Bewahrt die Fokusreihenfolge die Bedeutung?

Wenn Sie durch den Inhalt blättern, aber in einer Reihenfolge, die keinen Sinn ergibt, müssen Sie dies korrigieren.

Können Sie den Zweck des Links aus dem Linktext erkennen?

„Hier klicken“ ist kein sehr hilfreicher Ankertext. Sie müssen Wörter haben, die den Inhalt beschreiben, auf den der Link führt.

Was ist Ankertext?

Wenn Sie auf eine andere Seite Ihrer Website oder eine externe Website verlinken, ist der Ankertext der sichtbare Text, den Sie sehen und der sich auf die Seite bezieht, auf die Sie Personen senden. Anstatt nur den Link anzuzeigen, ist es besser, den eigentlichen Text anzuzeigen.

Gibt es mehrere Möglichkeiten, eine Webseite zu finden?

Hier sind einige Beispiele:

• Sitemap – Haben Sie eine Liste aller Seiten auf einer Sitemap
• Quicklinks – Haben Sie Quicklinks, um zu wichtigen Seiten zu gelangen
• Suchen – Suchen Sie nach einer relevanten Seite

Ist der Tastaturfokus sichtbar?

Die Frage sagt alles! Dies wurde auch in einer der früheren Richtlinien behandelt. Wenn Sie mit der Tabulatortaste irgendwo hingehen, müssen Sie in der Lage sein, visuell zu sehen, dass sich der Fokus in diesem Bereich befindet.

Sind Header, Body und Footer klar definiert?

Assistive Technologien müssen in der Lage sein, Header, Footer und Body eindeutig zu identifizieren. Es gibt HTML-Tags, die diese Bereiche definieren.

Richtlinie 2.5 Eingabemodalitäten

Diese Richtlinie bezieht sich auf neuere Schnittstellen, bei denen Sie möglicherweise keine Tastatur oder Maus zum Navigieren verwenden. Zum Beispiel können Sie auf Smartphones wischen, kneifen und zoomen, tippen usw.

Können Funktionen, die Mehrpunkt- oder pfadbasierte Gesten verwenden, mit einem einzigen Zeiger bedient werden, ohne die Geste zu verwenden (sofern nicht unbedingt erforderlich)?

Bei einer pfadbasierten Geste müssen Sie sich auf einem bestimmten Pfad bewegen. Zum Beispiel wischen Sie nach oben, um auf bestimmte Funktionen zuzugreifen, oder nach unten, um auf andere zuzugreifen. Bei einer Mehrpunkt-Geste verwenden Sie zwei oder mehr Berührungspunkte, um auf Funktionen zuzugreifen, z.

Gibt es eine einfache Möglichkeit, eine Aktion zu verlassen, die durch einen einzelnen Zeiger initiiert wurde?

Was ist ein einzelner Zeiger?

Hier können Sie über einen einzigen Interaktionspunkt mit einem Bildschirm auf Funktionen zugreifen, z. B. tippen, klicken, langes Drücken usw.

Mindestens eine der folgenden Aussagen muss zutreffen:

• Kein Down-Ereignis – der Trigger wird implementiert, wenn Sie auf eine Taste drücken
• Abbrechen oder rückgängig machen – Sie verwenden ein up-Ereignis (dh die Funktion wird aktiviert, wenn der Mauszeiger losgelassen wird) und es gibt eine Möglichkeit zum Abbrechen. Zum Beispiel drücken Sie mit Ihrem Finger auf etwas und anstatt Ihren Finger gerade nach oben zu heben, schieben Sie ihn zu einem anderen Teil des Bildschirms und die Funktionalität wird abgebrochen.
• Up-Umkehrung – Das Up-Event kehrt das Down-Event um
• Wesentlich – Die Vervollständigung der Funktion des Down-Ereignisses ist unerlässlich.

Stimmt die sichtbare Bezeichnung einer Komponente mit dem programmatischen Namen dieser Komponente überein?

Wenn ein sehender Benutzer Text-to-Speech verwendet, wird der programmatische Name vorgelesen und es ist eine bessere Erfahrung, wenn dieser mit dem sichtbaren Label übereinstimmt.

Können Funktionen, die durch Bewegung oder Gestik bedient werden, auch von anderen UI-Steuerelementen bedient werden?

Wenn Sie etwas schütteln oder kippen, um es zu steuern, können Sie ein anderes UI-Steuerelement verwenden, um auf diese Funktionalität zuzugreifen?

Verständlich

Hier geht es darum sicherzustellen, dass die auf der Seite verwendete Sprache verständlich ist.

3.1 Lesbar

Wir decken Folgendes ab:

Kann die Sprache der Seite oder von Abschnitten der Seite programmgesteuert bestimmt werden?

Sie sollten so etwas am Anfang jeder Seite sehen. 'Lang' gibt die Sprache der Seite an.

<html class="ie ie7" lang="en-US">

Wenn sich die Sprache auf der Seite ändert, müssen Sie dies ebenfalls erkennen können.

3.2 Vorhersehbar

Sie möchten, dass Ihre Benutzeroberfläche vorhersehbar funktioniert, keine Überraschungen!

Ist die Navigation auf den Seiten in der gleichen Reihenfolge?

Die Navigationsposition auf einer Seite sollte auf allen anderen Seiten gleich sein, es sei denn, der Benutzer ändert die Navigation.

Werden Komponenten, Bilder etc. seitenübergreifend einheitlich benannt?

Wenn Sie ein Bild auf einer Seite und dasselbe Bild auf einer anderen Seite haben, möchten Sie, dass das Bild denselben Namen hat.

Wenn Sie mehrere Seiten eines Beitrags haben und die Seiten Seite 1, Seite 2, Seite 3 nennen, ist das konsistent. Die Kennzeichnung muss nicht gleich sein, wenn es keinen Sinn macht, aber sie muss konsistent sein.

3.3 Eingabehilfe

Hier geht es darum, Benutzern zu helfen, Fehler zu vermeiden oder sich von ihnen zu erholen:

Eingabefehler – Wenn Sie etwas falsch eingeben, sehen Sie möglicherweise, dass es falsch ist, aber es muss auch Text vorhanden sein, der das Problem identifiziert.

Bezeichnungen – Wenn Benutzer einen Text eingeben müssen, gibt es eine zugeordnete Bezeichnung, die das Feld beschreibt.

Eingabefehler – Wenn ein Benutzer einen Fehler macht, gibt es einen Vorschlag, wie er behoben werden kann.

Fehlervermeidung – Sie sollten in der Lage sein, den Fehler entweder rückgängig zu machen, Feedback zum Fehler zu erhalten oder die Möglichkeit zu haben, ihn vor dem Absenden zu bestätigen.

4. Robust

Ihre Inhalte müssen nicht nur barrierefrei sein, sondern auch eine Vielzahl von Browsern, Technologien usw. unterstützen.

Richtlinie 4.1 Kompatibel

Dazu gehört das Testen mit einer Vielzahl von Benutzeragenten und unterstützenden Technologien. Ein guter Anfangstest hierfür ist die Verwendung des W3C-Markup-Validierungstools, um zu sehen, ob es irgendwelche Fehler gibt (dh es validiert, dass die Struktur/Syntax von html, xhml usw. korrekt ist).

Hier ist ein Beispiel für die Ausgabe:

Außerdem müssen Sie mit mehreren Browsern testen, um sicherzustellen, dass der Inhalt korrekt geladen wird.

Und es lohnt sich auch, die Seite in einem Nur-Text-Browser (z. B. Lynx) zu laden.

Können alle Daten korrekt geparst werden?

Gibt es innerhalb von Abschnitten des Inhalts richtige Start- und End-Tags, sodass leicht erkennbar ist, wo ein Abschnitt beginnt und endet?

Sind die Elemente richtig verschachtelt?

Gibt es doppelte Attribute oder IDs, die es schwierig machen, Elemente zu unterscheiden?

Können alle Steuerelemente der Benutzeroberfläche von Hilfstechnologien verstanden werden?

Hier sind einige Beispiele für Kontrollen und was Sie verstehen müssen:

• Kontrollkästchen – ist es aktiviert oder nicht?
• Fokus – Welches Element hat Fokus und kann dies programmatisch verstanden werden (nicht nur visuell)?

Werden Benutzer auf nicht fokussierte Statusmeldungen aufmerksam gemacht, sodass die Arbeit nicht unbedingt unterbrochen wird?

Stellen Sie sich vor, Sie surfen auf einer Seite und während Sie sich auf dieser Seite befinden, erscheint oben auf der Website ein Banner, das einen Verkauf ankündigt.

Sind Formulare richtig gestaltet?

Um Formulare zugänglich zu machen, sollten Sie sicherstellen, dass Folgendes aktiviert ist:

• Möglichkeit, die Tabulatortaste zu verwenden, um durch das Formular zu navigieren
• Möglichkeit, die Tabulatortaste zu verwenden, um durch das Formular zu navigieren

<Formular>

<label for="fname">Vorname:</label><br>

<input type="text" id="fname" name="fname"><br>

<label for="lname">Nachname:</label><br>

<input type="text" id="lname" name="lname">

</form>

• Deutlich gekennzeichnete Pflichtfelder. Wenn ein Feld obligatorisch ist, muss es auch im HTML korrekt beschriftet werden.
• Es gibt Anweisungen für den Benutzer (normalerweise oben im Formular)
• Benutzer erhalten Hilfe, wenn sie beim Ausfüllen eines Formularfelds einen Fehler machen (z. B. falsches Datumsformat, das müssen Sie eingeben).

Zusammenfassung

Wie Sie sehen, gibt es viel zu tun, wenn Sie ein umfassendes Audit zur Barrierefreiheit durchführen. Es zahlt sich jedoch aus und bringt Ihrem Unternehmen viele Vorteile – vom Aufbau eines positiven Markenimages über das Erreichen eines breiteren Publikums bis hin zur Verbesserung Ihrer SEO.