Testen mit Screenreadern

Testing with Screen Readers

Ein Screenreader ist eine Software, die Inhalte auf dem Bildschirm ankündigt. Es ist eine von wenigen unterschiedlichen Möglichkeiten, wie blinde Menschen mit dem Internet und der Technologie im Allgemeinen interagieren.

Wie verwenden die Leute also den Bildschirmleser, um verschiedene Inhalte zu lesen? Mit der Tastatur .

Verwenden der Tastatur

Wenn jemand die Tabulatortaste verwendet, um auf einer Seite zu navigieren, wird der Fokus von einem Element zum nächsten verschoben, wodurch der Tastaturcursor zu jedem fokussierbaren Element bewegt wird. Mit Shift + Tab bewegt sich der Cursor auf der Seite rückwärts.

Lesen Sie lange Inhaltsstücke ohne fokussierbare Elemente? Verwenden Sie die Leertaste , um den Inhalt um eine Seite nach unten zu verschieben (die Höhe des aktuellen Ansichtsfensters). Drücken Sie Umschalt + Leertaste , um die Seite nach oben zu verschieben.

Alternativ kann jemand den sogenannten virtuellen Cursor verwenden, der in jeden verfügbaren Bildschirmleser integriert ist. Die Methode zur Verwendung des virtuellen Cursors hängt vom Screenreader ab, da jeder seinen eigenen Satz von Tastaturkombinationen und Tastenanschlägen hat, um sich auf dem Bildschirm zu bewegen.

Der Inhalt, der angekündigt wird, ist das aktuell fokussierte Element

Eine Sache, die mir nicht klar war, als ich zum ersten Mal etwas über die Entwicklung von Barrierefreiheit erfuhr, war, dass der Inhalt, der angekündigt wird, das aktuell fokussierte Element ist.

Wenn beispielsweise jemand eine Website in seinem Browser lädt und das erste fokussierbare Element auf der Seite ein Link mit dem Website-Logo ist, wird der Tastaturfokus bei aktivierter Tabulatortaste auf den Link verschoben und der Bildschirmleser wird dies tun Kündigen Sie die Link-Präsenz über ihre Rolle und den zugänglichen Namen an; seine semantische Bedeutung.

Sehen wir uns einige Screenreader-Befehle an, die uns beim Testen unserer Benutzeroberflächen helfen.

Allgemeine Screenreader-Befehle

Die beiden Screenreader-Plattformen, auf die wir uns konzentrieren werden, sind:

  • Auf einem Apple -Desktop, -Laptop oder -Mobilgerät haben Sie einen Bildschirmleser namens VoiceOver direkt zur Hand.
  • Wenn Sie einen Windows -PC verwenden, steht ein kostenloser Open-Source-Screenreader namens NVDA zur Installation zur Verfügung.

Sehen wir uns gängige Screenreader-Befehle und Navigationsmethoden an, um unsere Apps und Websites zu testen.

Inbetriebnahme

Um VoiceOver (VO) zu starten, drücken Sie die Tasten Cmd + F5 . VO beginnt mit dem Vorlesen der Seite oder Anwendung, die Sie gerade ansehen. Sie können Cmd + F5 erneut verwenden, um VO zu verlassen.

Wenn Sie sich auf einem Macbook mit einer TouchBar befinden, müssen Sie alternativ dreimal Cmd + Pwr drücken , um VO zu starten.

Starten Sie NVDA durch Drücken von Strg + Alt + N . Alternativ können Sie den Windows-Ausführen-Dialog verwenden und "nvda" eingeben. Eine Methode zum Beenden von NVDA besteht darin, den Ausführen-Dialog erneut zu verwenden und "nvda -q" einzugeben.

Sie können NVDA auch über das Desktop-Symbol starten und dann über das Taskleistenmenü deaktivieren.

Bildschirmleser Anlaufen
Voice-over Cmd + F5
NVDA Strg + Alt + N

Ankündigungen pausieren

Wahrscheinlich ist einer der wichtigsten Tastaturbefehle, die Sie beim Testen kennen sollten, wie Sie den Bildschirmleser dazu bringen können, vorübergehend keine Ansagen zu machen. Dies scheint die einzige universelle Wahrheit unter Screenreader-Anbietern für verschiedene Betriebssysteme zu sein.

Homer Simpsons Finger schwebt über der Strg-Taste.

Um entweder VO oder NVDA (auch andere Screenreader) anzuhalten, drücken Sie einfach die Strg -Taste.

Wenn Sie wieder mit der Navigation beginnen, erwacht die Stimme des Screenreaders wieder zum Leben und kündigt fröhlich den Inhalt an, mit dem Sie gerade interagieren.

Herumtappen

Wenn Sie entweder VO oder NVDA aktiviert haben, verwenden Sie die Tab -Taste, um sich vorwärts durch interaktive Elemente auf der Seite zu bewegen, oder Shift + Tab , um sich rückwärts zu bewegen.

Abhängig von Ihren Browsereinstellungen sind Elemente auf der Seite, zu denen Sie mit der Tabulatortaste gelangen können, standardmäßig fokussierbarer Seiteninhalt; Elemente wie Links, Schaltflächen oder Formularsteuerelemente. Sich auf diese Weise zu bewegen, wird als Verwendung des "Browser-Cursors" betrachtet. Der Browser-Cursor verschiebt den Fokus von einem fokussierbaren Element zum nächsten.

Während dies für reine Tastaturbenutzer ziemlich praktisch ist, gibt es einen weiteren Cursor, der sich zu nicht fokussierbaren Elementen bewegen kann und den Inhalt auf der Seite detaillierter beschreibt, den "virtuellen Screenreader-Cursor".

Virtueller Bildschirmleser-Cursor

Der virtuelle Cursor ist eine Funktion, die in jeden Screenreader, Desktop und Mobile, integriert ist und es dem Benutzer ermöglicht, jede Art von Inhalt zu entdecken und zu konsumieren. Im Gegensatz zum Browser-Cursor, der nur entlang interaktiver Elemente auf der Seite anhält, enthält der virtuelle Cursor diese und vieles mehr. Einfacher Text, Bilder, Überschriften und alles andere, was auf dem Bildschirm sichtbar ( oder manchmal verborgen ) ist.

Der virtuelle Cursor ist die Art und Weise, wie ein Screenreader-Benutzer den von Ihnen erstellten Inhalt konsumiert.

In Bezug auf das Testen ist der virtuelle Cursor eine großartige Möglichkeit, um zu testen und zu hören, wie Ihre Inhalte klingen oder ob ein beschreibender Bild- alt -Text mit dem, was im Bild angezeigt wird, sinnvoll ist.

Um den virtuellen VO-Cursor zu verwenden, halten Sie Strg + Opt gedrückt , und verwenden Sie dann die Links- oder Rechtspfeiltaste , um sich zu bewegen und VO alle Arten von Inhalten auf der Seite ankündigen zu lassen.

Der virtuelle Cursor von NVDA wird mit den Aufwärts- und Abwärtspfeiltasten bewegt. Dadurch wird jeweils eine Inhaltszeile gelesen.

Bildschirmleser Virtueller Cursor
Voice-over Strg + Opt + Links- oder Rechtspfeil
NVDA Pfeil nach oben oder unten

Erweiterte Navigation

Sowohl VO als auch NVDA bieten eine Möglichkeit, durch Seiteninhalte zu navigieren, indem gleiche Elemente gruppiert werden. Jeder Bildschirmleser kann eine Liste oder ein Menü ähnlicher Elemente anzeigen, die nach Kategorien getrennt sind, um schnell auf der aktuellen Seite zu navigieren und leicht zu entdecken, welche Inhalte verfügbar sind.

VO-Rotor

Der VO Rotor ist im Wesentlichen ein Menü mit verschiedenen Arten von Elementen auf der Seite, die in Kategorien unterteilt sind. Um den Rotor zu öffnen, halten Sie Strg + Opt gedrückt und drücken Sie dann die U -Taste. Über der Seite erscheint ein neues VO-Fenster mit einer Liste von Elementen.

Wenn der Rotor geöffnet und für die Navigation verfügbar ist, verwenden Sie die Pfeiltasten nach links und rechts , um zwischen Elementkategorien wie Überschriften, Links, Orientierungspunkten oder Formularsteuerelementen zu wechseln. Verwenden Sie die NACH- OBEN- und NACH -UNTEN-TASTE, um durch die aufgelisteten Elemente zu navigieren. Verwenden Sie die Esc- Taste, um den Rotor zu verlassen.

NVDA-Elementliste

NVDA hat auch ein Menü mit Elementen auf der Seite namens Elementliste. Um die Liste zu öffnen, verwenden Sie die Tasten Einfügen + F7 .

Wenn die Elementliste geöffnet ist, verwenden Sie die Links- und Rechtspfeiltasten , um sich durch die Elementtypen zu bewegen. Drücken Sie die Tabulatortaste , um sich in der Liste nach unten zu bewegen. Wenn Sie sich in der Liste befinden, verwenden Sie die Aufwärts- und Abwärtstasten , um sich durch die Listenelemente zu bewegen.

Für diese Screenreader stehen noch viele weitere Tastenkombinationen und Tastenanschläge zur Verfügung, aber dies sind nur einige wenige, die Sie leicht lernen können, um Ihnen den Einstieg zu erleichtern.

Als Nächstes werfen wir einen Blick auf eine Demo-Website und verwenden VoiceOver, um durch die Seitenelemente zu navigieren und nach potenziellen Barrierefreiheitsproblemen zu suchen.

Demo!

Sehen wir uns ein Vorher-Nachher-Beispiel einer Demoseite an. Es ist wichtig, sich daran zu erinnern: Wenn Sie Probleme untersuchen, überprüfen Sie immer zuerst, ob Sie die richtigen Elemente so verwendet haben, wie sie verwendet werden sollten. Oft ist es nicht erforderlich, eine komplexe Lösung zu erstellen, um ein Problem zu beheben, wenn eine semantisch strukturiertere Lösung ausreicht.

In den beiden unten verlinkten Demo-Sites werden Sie feststellen, dass die Beispielseiten gleich aussehen, der Code darunter jedoch ganz anders ist. Wenn Sie Ihre Maus zum Navigieren und Absenden des Formulars verwenden würden, funktionieren sie genauso gut. Was passiert jedoch, wenn jemand nur mit einem Screenreader oder der Tastatur auf der Seite navigiert und versucht, das Formular auszufüllen?

Hören Sie sich das folgende Video an, während ich mit VoiceOver durch die Seitenelemente navigiere. Was fällt dir auf?

( Probieren Sie es selbst aus! )

Es sieht so aus, als hätte sich der Bildschirmleser bei einigen Dingen aufgehängt:

  • Als das Logo-Link-Bild fokussiert wurde, klang es nicht wie eine beschreibende Information. Was sollte es darstellen?
  • Haben Sie bemerkt, dass die Navigationslinks vollständig übersprungen wurden? Was ist da passiert?
  • Jede input wurde als solche angekündigt, aber wozu dienten sie? Welche Art von Daten wurde erwartet?
  • Die button zum Absenden des Formulars wurde anscheinend auch übersprungen? Wie könnte jemand dieses Formular nur mit einer Tastatur absenden?

Lassen Sie uns diese Probleme angehen und sehen, was schief gelaufen ist.

  • Logo-Link

    Problem: Als der Logo-Link den Fokus erhielt, wurde der alt -Attributtext des eingebetteten Bildes angesagt. Da in diesem Fall kein alt -Attribut vorhanden war, wurde der Bilddateiname angesagt.

    Lösung: Dies kann leicht behoben werden, indem ein geeigneter alt -Textwert für das Bild hinzugefügt wird. In diesem Fall sollte es mit dem Text des Bildes selbst übereinstimmen.

  • Navigationslinks

    Problem: Wenn wir das Markup für die Navigationslinks untersuchen, sehen wir, dass es ein benutzerdefiniertes JavaScript-Ereignis onclick() und kein href -Attribut gibt. Links ohne das href Attribut erhalten keinen Tastaturfokus, weshalb sie übersprungen wurden.

    Lösung: Wir können dies ganz einfach beheben, indem wir jedem Link ein href -Attribut hinzufügen, die entsprechende Seiten-URL als Wert hinzufügen und das benutzerdefinierte JavaScript-Ereignis onclick() entfernen, da dies nicht mehr erforderlich ist.

  • Formulareingaben

    Problem: Die input gaben keinen Kontext für ihren beabsichtigten Zweck oder die erwarteten Daten. Dies ist darauf zurückzuführen, dass die Eingaben keine zugeordnete label haben, um den Zweck des Steuerelements zu erklären.

    Lösung: Wir müssen ein label -Element hinzufügen und sein for -Attribut so einstellen, dass es mit dem Wert des id -Attributs der input übereinstimmt. Wenn das Element nun den Fokus erhält, wird sein label angesagt.

  • Senden-Schaltfläche

    Problem: Der Submit- button wurde übersprungen, weil es überhaupt kein button ist. Das Element ist eigentlich eine span mit einem benutzerdefinierten JavaScript-Ereignis onclick() und CSS-Stilen, damit es als button angezeigt wird .

    Lösung: Wir können dieses Element Tastatur leicht zugänglich machen, indem wir die span in ein button ändern. Mit dieser Änderung ist die button fokussierbar und gibt ihre Rolle als „Schaltfläche“ bekannt, was darauf hinweist, dass die Leertaste zum Senden des Formulars verwendet werden kann.

Nachdem wir diese Probleme behoben haben, hören wir uns die Seite noch einmal an und sehen, wie sich die Dinge anhören.

( Probieren Sie es selbst aus! )

Nachdem wir die Seite noch einmal durchgehört haben, gewinnen wir eine viel klarere Vorstellung vom Inhalt:

  • Das Hauptlogobild hat ein alt -Attribut, das den in das Bild eingebetteten Text ankündigt.
  • Jeder der Hauptnavigationslinks kann fokussiert werden und wird als Linkelement angekündigt.
  • Jede input wird zusammen mit ihrer label angekündigt, die angibt, welche Art von Inhalt erwartet wird.
  • Die button zum Absenden des Formulars wird als solche angekündigt, erhält den Fokus und unterstützt vollständig die Tastaturinteraktionen, die einem Schaltflächenelement zur Verfügung stehen ( Space oder Eingabetaste drücken).

Es wurden auch einige zusätzliche Anpassungen vorgenommen, um den Elementen auf der Seite noch mehr semantische Bedeutung zu verleihen:

  • Die header , nav und main HTML-Elemente wurden als Wrapper für ihre jeweiligen Inhalte hinzugefügt. Diese schaffen "Orientierungspunkte" innerhalb der Seite. Jemand, der einen Bildschirmleser verwendet, könnte jetzt die Option haben, anhand von Orientierungspunkten sowie Überschriften und Links usw. zu navigieren, wenn er den VO-Rotor oder andere Tastenkombinationen verwendet.
  • Ein ul Listenelement wurde verwendet, um dem Navigationsbereich zusätzlichen Kontext und Struktur zu verleihen. Dies hilft dabei, beim Betreten der Liste zu erkennen, wie viele Links vorhanden sind, im Gegensatz dazu, dass jemand jeden Link mit der Tab durchgehen muss, um dieses Verständnis zu erlangen.
  • Der title der Seite ist jetzt mit einem h1 -Element umschlossen, das die Überschriftennavigation ermöglicht und den allgemeinen Zweck der Seite ankündigt. Ein weiteres optionales Attribut, das diesem Element hinzugefügt wurde, war tabindex . Wenn Sie diesem Attribut den Wert 0 zuweisen, wird das Element zur natürlichen Browser-Tab-Reihenfolge hinzugefügt, was bedeutet, dass dieses Element den Fokus erhält und vom Screenreader angekündigt wird.

Das Testen mit einem Screenreader (und das Navigieren durch Ihre Seiten nur mit einer Tastatur), indem Sie den Browser- oder Screenreader-Cursoren folgen und versuchen, Aufgaben nur mit einer Tastatur zu erledigen, wird Ihnen viel darüber sagen, wie zugänglich Ihre Benutzeroberfläche ist und ob es sinnvoll ist für Menschen, die assistive Technologien nutzen.

Wenn etwas nicht ganz richtig klingt oder nicht erreichbar ist, gibt es Probleme, die vor dem Versand an eine Produktionsumgebung behoben werden müssen.

Es ist erwähnenswert, dass Screenreader-Kompatibilität nicht gleichbedeutend mit vollständiger Zugänglichkeit ist (es gibt viele andere Überlegungen für andere Arten von Benutzern), aber das Erstellen von semantisch strukturiertem Code, der für eine Tastatur vollständig zugänglich ist, trägt wesentlich dazu bei, sowohl sehenden als auch nicht sehenden Menschen zu helfen -sehende Tastaturnutzer.

Screenreader + Browser-Kombinationen

Hier sind die gängigsten Kombinationen aus Browser und Screenreader. Diese werden am häufigsten verwendet, da sie die beste Unterstützung in Bezug auf Funktionen und die Übermittlung von Informationen durch natives HTML und ARIA bieten.

Betriebssystem Browser Bildschirmleser
Windows Internet Explorer KIEFER
Fenster Feuerfuchs NVDA
Fenster Feuerfuchs KIEFER
Mac OS Safari Voice-over
iOS Safari Voice-over
Android Chrom TalkBack

Weitere Einzelheiten finden Sie in der Screenreader-Benutzerumfrage .

Sehen Sie sich „ Testen von Bildschirmlesegeräten für Mobilgeräte“ an, um Tipps zum Testen mit Bildschirmlesegeräten für Mobilgeräte zu erhalten!

Ressourcen:

Zurück zum Blog