So starten Sie das Testen Ihrer Website mit einem Screenreader

Es besteht kein Zweifel, wie wichtig es ist, barrierefreie Websites zu erstellen. Es ist ein ständiges Diskussionsthema in der Webdesign-Community. Und meiner Meinung nach wollen die meisten Designer es richtig machen.

Barrierefreiheit betrifft uns alle auf die eine oder andere Weise. Egal, ob es sich um bestimmte Wörter handelt, die in einem Blogbeitrag verwendet werden, oder um die Möglichkeit, von Seite zu Seite zu navigieren – es spielt eine Rolle.

Wenn Sie jedoch nicht auf Hilfstechnologien wie einen Bildschirmleser angewiesen sind, kann es zu Verbindungsabbrüchen kommen. Es ist allzu leicht zu übersehen, wie sich eine bestimmte Funktion auf die Benutzer auswirkt. Das liegt wahrscheinlich daran, dass wir es in diesem Zusammenhang nicht getestet haben.

Ich gebe zu, dass ich in diesem Bereich gekämpft habe. Und ich wette, dass es viele andere Designer gibt, die das auch haben. Mein Privileg als sehender Benutzer, der mit der Maus navigiert, hat mich nicht immer dazu veranlasst, einige wichtige Aspekte der Barrierefreiheit zu berücksichtigen.

Stimmt, ich teste mit automatisierten Tools. Ich stelle sicher, dass Schriftarten lesbar sind, der Farbkontrast den WCAG-Standards entspricht und Bilder das ALT-Attribut verwenden. Das sind alles gute Dinge. Sie stellen jedoch nicht die vollständige Erfahrung der Nutzung einer Website dar.

Also, wie bringen wir die Dinge auf die nächste Ebene? Das Testen Ihrer Website mit einem Screenreader ist ein guter Anfang. Lassen Sie uns einen Anfängerblick darauf werfen, worum es geht. Von dort werde ich teilen, was ich während meiner Experimente gefunden habe.

Finden Sie eine Screenreader-App

Der erste Schritt in diesem Prozess besteht darin, eine geeignete Screenreader-App zu finden. Möglicherweise müssen Sie nicht sehr weit gehen, da einige Betriebssysteme standardmäßig eines enthalten.

Mac-Benutzer haben Zugriff auf VoiceOver, während Windows-Benutzer auf Narrator zugreifen können. Darüber hinaus stehen für praktisch jedes Betriebssystem mehrere andere Optionen zur Verfügung. Ich für meinen Teil gehe mit der Open-Source-App NVDA. Die Nutzung ist kostenlos (unterstützt durch Spenden) und gehört zu den beliebtesten Optionen.

Unabhängig davon, für welche App Sie sich entscheiden, ist es wichtig, ein grundlegendes Verständnis ihrer Funktionsweise zu haben. Außerdem kann es notwendig sein, vorher ein paar Anpassungen vorzunehmen. Beispielsweise sollten Sie sicherstellen, dass Sie verstehen können, was vorgelesen wird. Möglicherweise möchten Sie auch, dass die Software Inhalte hervorhebt, während sie gelesen werden, um das Verfolgen zu erleichtern.

WebAIM hat einige praktische Anleitungen zum Einrichten verschiedener Screenreader zu Testzwecken zusammengestellt. Sie versetzen Sie in eine gute Position, um zu sehen, wie zugänglich Ihre Website ist.

Rumkommen

Jetzt, da Sie einen zuverlässigen Bildschirmleser zur Hand haben, ist es Zeit zum Testen! Um einen Eindruck von der Benutzererfahrung zu bekommen, versuchen Sie, die verschiedenen Teile Ihrer Website über eine Tastatur mit aktiviertem Screenreader zu durchlaufen.

Einige Tastaturbefehle sind universeller als andere. Die TAB -Taste führt Sie beispielsweise zu verschiedenen Links und Formularsteuerelementen, während die ENTER Sie zum Ziel eines Links führt. Die meisten scheinen die Pfeiltasten zu verwenden, um sich von Zeile zu Zeile zu bewegen.

Es kann jedoch einige spezielle Befehle geben, die für eine Screenreader-App spezifisch sind. Sie ermöglichen das Navigieren zwischen Überschriften, Orientierungspunkten wie Kopf- und Fußzeilen usw. Dazu sollten Sie sich die Dokumentation ansehen.

Es ist auch erwähnenswert, dass es Übung braucht, um auf diese Weise effektiv auf einer Website zu navigieren. Die ersten paar Versuche können etwas umständlich sein. Aber sobald Sie sich mit den verschiedenen Befehlen vertraut gemacht haben, sollten die Dinge intuitiver werden.

Meine Erfahrung mit einem Screenreader

Nur zur Klarstellung – ich bin kein Experte für Screenreader. Meine Kenntnisse sind bestenfalls rudimentär. Aber meine Erfahrung mit NVDA war aufschlussreich.

Ich habe ein paar Seiten meiner Unternehmenswebsite als Testgelände verwendet. Und was ich fand, waren nicht unbedingt große Mängel. Der Text konnte gelesen und die Seite navigiert werden.

Vielmehr habe ich einige Ärgernisse entdeckt – Dinge, die Benutzer verständlicherweise frustrieren würden. Sehen wir uns einige Beispiele an:

Ein Slider, der unterbricht

In einem Interview mit der Zugänglichkeitsexpertin Taylor Arndt erwähnte sie Karussells/Diashows als Funktionen, die die Zugänglichkeit beeinträchtigen können. Das Testen mit einem Screenreader bringt dies zum Vorschein.

Das automatische Karussell, das ich benutzte, war navigierbar, hatte aber die unangenehme Angewohnheit, sich jedes Mal selbst anzukündigen, wenn die nächste Folie in Sicht kam. Dadurch war es für den Bildschirmleser sehr schwierig, sehr weit in andere Abschnitte der Seite vorzudringen, bevor er unterbrochen wurde.

Ich habe eine einfache Lösung gefunden. Das von mir verwendete WordPress-Slider-Plugin (Soliloquy) hat eine Option, um die ARIA-Live-Region auf eine weniger aggressive Einstellung zu ändern. Dies, zusammen mit der Verwendung der manuellen Navigation für das Karussell, beseitigte das Ärgernis.

Sich wiederholender Text

Die Verwendung des ALT Attributs mit Bildern ist ein allgemeiner Ratschlag zur Barrierefreiheit. Bei rein dekorativen Bildern kann es jedoch überflüssig sein, beschreibenden Text bereitzustellen. Ich bin bei verschiedenen Gelegenheiten darauf gestoßen.

Blogpost-Listings waren der Hauptschuldige. Sowohl der Beitragstitel als auch die ALT -Attribute des vorgestellten Bildes waren identisch – was bedeutet, dass der Screenreader sie zweimal gelesen hat. Das Ergebnis ist, dass selbst eine relativ kurze Post-Listing für eine schmerzhafte UX sorgt.

Der Knackpunkt ist, dass der von mir verwendete WordPress-Post-Listing-Block keine Option zum Verlassen leerer ALT-Attribute hat. Daher kann eine Problemumgehung erforderlich sein.

Entdecken Sie, wie barrierefreie Websites in der Praxis funktionieren

Das Erstellen von Websites, die den WCAG-Standards entsprechen, fühlt sich befriedigend an – und das ist es, was wir als Webdesigner tun sollen . Aber das Abhaken von Kästchen auf einer To-Do-Liste erzählt nicht die ganze Geschichte.

Ein besseres Verständnis dafür zu bekommen, wie andere Ihre Arbeit erleben werden, erfordert ein wenig zusätzlichen Aufwand. Das Testen mit einem Screenreader bietet einen Weg, um mehr Einblick zu gewinnen. Und obwohl dies keineswegs ein vollständiger Leitfaden ist, hoffe ich, dass es Ihnen hilft, Ihr Interesse zu wecken und zu experimentieren.

Wie ich festgestellt habe, bedeutet das nicht, dass ein Artikel einfach zu verwenden ist, selbst wenn er nach den Buchstaben eines Standards als zugänglich angesehen wird. Deshalb lohnt es sich, etwas tiefer zu graben. Es kann der Unterschied zwischen einer Website sein, die lediglich benutzbar ist, oder einer Website, die das bestmögliche Erlebnis bietet.

Hinweis: Wie oben erwähnt, bin ich ein Neuling, was diese Technologie angeht. Wenn Sie Screenreader-Tipps teilen möchten, können Sie sich gerne über Twitter an mich wenden.