So führen Sie ein grundlegendes Audit zur Barrierefreiheit durch

Sie haben also in letzter Zeit viel über Barrierefreiheit gelernt, aber jetzt möchten Sie Ihre Website selbst überprüfen und sehen, wo Sie sich verbessern müssen. Wie gehen Sie dabei vor? Es ist Zeit für ein Barrierefreiheits-Audit! In diesem Tutorial zeige ich Ihnen die Grundlagen einer grundlegenden Überprüfung der Barrierefreiheit, die Sie auf den Weg zu einer zugänglicheren Website bringt.

Wie Sie sich aus meiner Übersichtsserie erinnern, ist eine barrierefreie Website wahrnehmbar, bedienbar, verständlich und robust. Das Testen, um sicherzustellen, dass Ihre Website alle vier Säulen der Zugänglichkeit erfüllt, erfordert kein Programmieren, also machen Sie sich keine Sorgen. Wir installieren vielleicht ein oder zwei Chrome-Erweiterungen, aber Sie werden mir später danken. Lass uns anfangen!

HINWEIS: In diesem Tutorial wird davon ausgegangen, dass Sie mit der Verwendung des Chrome Inspector oder der bereitgestellten grundlegenden Entwicklertools des Browsers vertraut sind.

Wahrnehmbar

Beginnen Sie mit wahrnehmbar, denn wenn Ihre Website vom Benutzer nicht wahrgenommen werden kann, wissen sie nicht, dass sie existiert. Hier konzentrieren wir uns auf drei Dinge: Textalternativen, Bildunterschriften und Farbe.

Für jedes Bild auf Ihrer Website, das mehr als nur dekorativ ist (d. h. es ist ein wichtiger Teil der Informationen und nicht nur eine Verbesserung), sollte das Bild ein alt -Attribut haben. Sie können dies überprüfen, indem Sie den Quellcode des Bildes untersuchen und nach dem Attribut suchen. Wenn es da ist, großartig! Jetzt müssen wir sicherstellen, dass der Wert des Attributs nützlich ist. Ein Alt-Attribut sollte das Bild so beschreiben, dass sehbehinderte Benutzer informiert werden. Dies ist KEINE Gelegenheit, SEO-Schlüsselwörter in Ihre Website zu stopfen. Machen Sie Ihre Beschreibung kurz, auf den Punkt und hilfreich. Längere Beschreibungen sollten für den Seiteninhalt selbst gespeichert werden.

Zu Bildern gesellen sich Video- und Audioinhalte. In beiden Fällen müssen Sie eine Art Untertitelung oder Transkription des Inhalts bereitstellen. Für Ihre Videos sollten Untertitel aktiviert oder vorbeschriftet sein. Um dies zu testen, müssen Sie lediglich ein Video auf Ihrer Website starten und nach Untertiteln suchen.

Schließlich müssen wir unsere Farben testen. Dazu installieren wir eine Chrome-Erweiterung, die einen Graustufenmodus aktiviert. Laden Sie nach der Installation Ihre Website erneut und aktivieren Sie die Erweiterung. Beachten Sie die schwer lesbaren Bereiche. Hier liegen Ihre Probleme aus Kontrastsicht. Deaktivieren Sie von dort aus Graustufen und verwenden Sie den Snook-Farbkontrastprüfer, um Ihre Ergebnisse zu überprüfen. Sie müssen den Inspektor verwenden, um Ihre Hex-Werte abzurufen, wenn Sie sie nicht zur Hand haben. Denken Sie daran, dass alles unter 4,5 (oder 3,0 für großen Text) ein Problem darstellt.

Bedienbar

Der nächste Schritt besteht darin, sicherzustellen, dass die Website funktionsfähig ist. Das bedeutet, dass wir die Tastaturfunktionalität testen werden. Öffnen Sie dazu Ihre Website. Sobald die Seite geladen ist, drücken Sie die Tabulatortaste. Was geschieht? Hoffentlich erscheint ein Skip-Link. Wenn nicht, sollten Sie zumindest einen Umriss um den ersten Link auf der Seite haben. Idealerweise haben Sie benutzerdefinierte :focus -Zustände, aber das absolute Minimum sollte das sein, was der Browser bereitstellt. Drücken Sie von dort aus die Tabulatortaste, um sicherzustellen, dass Sie von Link zu Link in der Reihenfolge wechseln, in der sie auf der Seite erscheinen. Wenn Ihr Fokus ständig herumspringt, haben Sie ein Tab-Index-Problem, das gelöst werden muss. Formular-Plugins sind hier oft der Übeltäter.

Verständlich

Als Nächstes überprüfen wir Ihre Website, um sicherzustellen, dass sie lesbar ist. Denn wenn ein Benutzer Ihre Inhalte nicht lesen kann, welchen Sinn hat es dann, sie zu haben? Die Anforderungen hier sind ziemlich einfach: Kann die Sprache Ihrer Website mit Code bestimmt werden? Um dies zu überprüfen, öffnen Sie Ihren Inspektor und sehen Sie sich das Haupt- <html> -Tag an. Hat es ein lang Attribut? Wenn ja, bist du klar. Stellen Sie außerdem sicher, dass auf alle Segmente in einer anderen Sprache das lang-Attribut angewendet wird.

Es gibt andere Lesbarkeitsprüfungen auf AAA-Niveau, aber diese gehen über den Rahmen eines einfachen Audits hinaus. Im Allgemeinen sollten Sie Ihre Inhalte jedoch auf dem Leseniveau der 6. Klasse halten, es sei denn, Ihre Zielgruppe hat ein höheres Bildungsniveau.

Die anderen wichtigen Aspekte der Unterstabilität Ihrer Website drehen sich um Fehlermeldungen und Kontextänderungen. Genauer gesagt, das Fehlen davon. Wenn ein Benutzer den Fokus gibt oder eine Eingabe aktiviert, sollte keine signifikante Änderung auftreten. Die Seite sollte nicht springen, es sei denn, der Benutzer wird auf irgendeine Weise gewarnt (Pfeilsymbol, Hilfstext usw.). Dies sind die Dinge, die Ihnen beim Testen mit der Tastatur aufgefallen wären.

Beim Testen Ihrer Formulare gilt dasselbe für Fehlermeldungen. Fehler sollten dem Benutzer klar angezeigt werden und auf dem Bildschirm bleiben, damit er die Fehler korrigieren kann. Das ist etwas, was selbst große Websites ständig falsch machen. Sie vergessen, den fehlerhaften Teil der Seite zu fokussieren oder ihn zumindest irgendwie zu markieren. Testen Sie Ihre Formulare auf Fehler und vergewissern Sie sich, dass die Meldungen eindeutig sind. Die Verwendung eines Plugins für feste Formulare wird dabei sehr hilfreich sein, aber verlassen Sie sich nicht darauf, dass das Plugin Ihre ganze Arbeit erledigt. Sie sollten auch sicherstellen, dass Sie nicht nur eine Farbe (normalerweise rot) verwenden, um einen Fehler anzuzeigen. Der eigentliche Text „Error“ ist sehr wichtig, besonders für Menschen mit Rot/Grün-Farbenblindheit.

Abgesehen von Fehlern sollten Ihre Formulare und Eingaben klare Anweisungen enthalten. Gehen Sie jede Eingabe auf Ihrer Website durch und stellen Sie sicher, dass völlig klar ist, was der Benutzer tun soll. Beispielsweise sollten Suchformulare etwas anderes als eine Lupe haben. Ein einfaches „Suchen“-Label reicht aus. Stellen Sie sicher, dass Ihre Benutzer wissen, was mit interaktiven Elementen zu tun ist. Nimm niemals an.

Robust

Schließlich muss Ihre Website robust sein. Das bedeutet, dass die Website mit Hilfstechnologien wie Bildschirmleseprogrammen verwendet werden kann. Wenn Ihre Website mit HTML gut gestaltet ist, sollten Sie in Ordnung sein. Denken Sie nur daran, dass einige moderne Browser, einschließlich Chrome, grundlegende HTML-Fehler beheben oder zumindest versuchen, sie zu beheben. Der schnellste Weg, die Robustheit Ihrer Website zu testen, besteht darin, die Website in Safari zu laden und VoiceOver, einen integrierten Bildschirmleser, zu aktivieren. Wenn Ihre Website nicht funktioniert, müssen Sie diese Probleme beheben.

Einpacken

Dieses Audit-Tutorial war schnell, aber das ist der Punkt. Es dauert nicht lange, um sicherzustellen, dass Ihre Website barrierefrei ist, und die erforderlichen Tools sind minimal. Es ist wichtig, sich daran zu erinnern, dass Sie sich in die Lage von jemandem versetzen möchten, der nicht über die Fähigkeiten verfügt, die Sie als durchschnittlicher Benutzer für selbstverständlich halten. Behalten Sie diese Denkweise bei und Ihre Audits werden dafür sorgen, dass Ihre Websites besser zugänglich sind.

Falls Sie es verpasst haben, sehen Sie sich diese Serie zur Barrierefreiheit an:

• Eine Einführung in Barrierefreiheit: Teil 1
• Eine Einführung in Barrierefreiheit: Teil 2
• Eine Einführung in Barrierefreiheit: Teil 3