Listening to the Web, Part Three: Working with Screen Readers

Internet hören, Teil 3: Arbeiten mit Screenreadern

Nachdem wir nun gelernt haben, wie wichtig es ist, an Barrierefreiheit zu denken und native Elemente zu verwenden , wenn es um das Entwerfen von benutzerfreundlichen Websites geht, wenden wir uns dem Lernen über Screenreader zu.

Als ich anfing, mit Screenreadern zu arbeiten, war es reine Neugier, die mich dazu trieb, furchtlos einzutauchen. Ich wusste, dass ich das lernen wollte, also krempelte ich die Ärmel hoch und machte mich an die Arbeit. In diesem Beitrag werde ich mit Ihnen die Grundlagen von Screenreadern teilen: wie sie verwendet werden und welche Befehle Sie kennen sollten. Ich habe eine Demo hinzugefügt, um einige häufig auftretende Probleme mit Lösungen zu zeigen, während Sie beginnen.

Denken Sie daran, dass jede Reise, die Lernen beinhaltet, andauert. Lassen Sie Ihre zugängliche und integrative Denkweise eine solide Grundlage bilden, auf der Sie neues Wissen hinzufügen können.

Wie Menschen Screenreader verwenden

Ich nahm an einem Kommunikationskurs in der High School teil, und während jedes Unterrichts wurden wir ermutigt, die Zeitung zu lesen, um über aktuelle Ereignisse auf dem Laufenden zu bleiben. Beim Lesen der Zeitung wurde uns eine praktische Technik beigebracht, die darin bestand, schnell jede Schlagzeile der Top-Storys zu überfliegen. Wenn etwas so Interessantes auffiel, konnten wir uns eine mentale Notiz machen und die Geschichte nachlesen, nachdem wir die restlichen Zeitungsüberschriften durchgesehen hatten.

Auf die gleiche Weise können Personen, die Screenreader verwenden, die Überschriften einer Webseite scannen und lesen (ich zeige Ihnen später in diesem Artikel, wie Sie dies auch tun können). Dies ist eine großartige Möglichkeit, schnell zu gewinnen ein Verständnis der auf der Seite verfügbaren Inhalte und ob sie interessant sind und es wert sind, darauf zurückzukommen.

Aus diesem Grund ist es wichtig sicherzustellen, dass Überschriftenelemente vorhanden und in einer logischen Reihenfolge strukturiert sind. Beginnen Sie mit einem <h1> , das den allgemeinen Zweck der Seite beschreibt, die Haupt-„Überschrift“. Darauf würden Unterabschnitte des Inhalts mit <h2> -Elementen und vielleicht ein Unterabschnitt dieses Abschnitts mit einem <h3> und so weiter folgen.

Tipp! Verwenden Sie ein Überschriftenelement nicht nur für die stilistische Wirkung. Wenn Sie eine Überschrift benötigen, die auf eine bestimmte Weise aussieht, fügen Sie ein Klassenattribut hinzu und verwenden Sie CSS, um sie so aussehen zu lassen, wie Sie es benötigen.

Denken Sie auch daran, dass das visuelle Erscheinungsbild von Überschriften wichtig ist, da es Menschen mit Leseschwierigkeiten oder anderen kognitiven Problemen hilft, auch die Seitenstruktur zu verstehen.

Personen, die Screenreader verwenden, können die Seite auch schnell nach Inhalten durchsuchen, indem sie Links verwenden. Screenreader bieten oft eine Möglichkeit, durch den Seiteninhalt zu navigieren, indem sie jeden Link auf der Seite in einem Listenformat ankündigen. Nutzer können anhand des Linktextes entscheiden, ob sie dem Link folgen möchten oder nicht. Aus diesem Grund ist es entscheidend, dass der Linktext sowohl einzigartig als auch beschreibend ist. Es kann zu einer frustrierenden Benutzererfahrung werden, wenn alle Links auf einer Seite als „Weiterlesen“ angekündigt werden und kein zusätzlicher Kontext dazu gegeben wird, wohin der Link führt.

Sie können sich auch einfach mit der Tabulatortaste bewegen und interaktive Inhalte entdecken. Dies ist eine gängige Methode zur Navigation und zum Verständnis der Seite, aber sie ist nicht ganz so schnell wie die Navigation nach Elementtyp und greift nur auf Elemente zu, die fokussierbar sind.

Und was ist mit nicht fokussierbaren Elementen, fragen Sie sich vielleicht? Keine Sorge, im nächsten Abschnitt zeige ich Ihnen, wie Sie auf Dinge wie einfachen Text und Bilder zugreifen können!

Sehen wir uns einige Screenreader-Befehle genauer an.

Screenreader-Befehle, die Entwickler kennen sollten

Wenn Sie sich auf einem Apple-Desktop oder -Laptop (oder sogar einem Mobilgerät) befinden, haben Sie einen Bildschirmleser namens VoiceOver direkt zur Hand. Wenn Sie Windows verwenden, steht ein kostenloser Open-Source-Screenreader namens NVDA zur Installation zur Verfügung.

Tipp! Koppeln Sie VoiceOver mit Safari und NVDA mit Firefox. Dies sind die am häufigsten verwendeten Browser mit diesen Screenreadern.

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 beenden.

Starten Sie NVDA durch Drücken von Ctrl + 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.

Verwenden Sie den Lautstärkeregler Ihres Computers, um die Sprachlautstärke nach Bedarf anzupassen.

Modifikatortasten

Modifikatortasten sind Screenreader-spezifische Tastenkombinationen. Sie werden zusammen mit anderen Tasten auf der Tastatur verwendet, um verschiedene Anweisungen an den Bildschirmleser auszuführen.

Die Zusatztaste für VO ist Ctrl + Opt . Für NVDA ist die Zusatztaste standardmäßig Insert . Dies kann in der Konfiguration auf Caps lock geändert werden, wenn Sie sich auf einem Laptop befinden.

Um beispielsweise mit dem Lesen einer Webseite mit NVDA zu beginnen, können Sie Insert + Down drücken, und NVDA beginnt an der aktuellen Position mit dem Lesen.

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 Dinge 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

VO und NVDA haben ihre eigenen integrierten Cursor, mit denen Benutzer sich auf der Seite bewegen und andere Inhalte lesen können, nicht nur fokussierbare Elemente.

Um den VO-Cursor zu verwenden, halten Sie Ctrl + Opt , und verwenden Sie dann die Left oder Right , um sich zu bewegen und VO alle Arten von Inhalten auf der Seite ankündigen zu lassen. Der Cursor von NVDA wird mit den Up und Down bewegt. Dadurch wird jeweils eine Inhaltszeile gelesen.

Wenn Sie die Seite auf diese Weise lesen, wird mehr Seiteninhalt angezeigt, einschließlich reinem Text, Bild-Alt-Text und Seitenüberschriften. Dies ist eine großartige Möglichkeit, um zu testen und zu hören, wie Textinhalte klingen, und ob beschreibender alternativer Bildtext mit dem, was im Bild angezeigt wird, sinnvoll ist.

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 Ctrl + 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 Left und Right , um zwischen Elementkategorien wie Überschriften, Links, Orientierungspunkten oder Formularsteuerelementen zu wechseln. Verwenden Sie die NACH- Up und Down -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 Insert + F7 .

Wenn die Elementliste geöffnet ist, verwenden Sie die Left und Right , um sich durch die Elementtypen zu bewegen. Drücken Sie die Tab , um sich in der Liste nach unten zu bewegen. Wenn Sie sich in der Liste befinden, verwenden Sie die Up und Down , 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 Formulareingabe wurde als solche angekündigt, aber wozu dienten sie? Welche Art von Daten wurde erwartet?
  • Die Schaltfläche 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 onclick Ereignis 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 onclick Ereignis 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 input 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 neben der Elementrolle 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 onclick Ereignis und CSS-Stilen, um es als Schaltfläche erscheinen zu lassen.
    Lösung: Wir können dieses Element Tastatur leicht zugänglich machen, indem wir die span in ein button ändern. Mit dieser Änderung wird die Schaltfläche fokussierbar sein und ihre Rolle als " Schaltfläche " ankündigen, was anzeigt, 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 die Tastaturinteraktionen, die einem button zur Verfügung stehen (Leertaste oder Eingabetaste).

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, beim Betreten der Liste zu erkennen, wie viele Links vorhanden sind, im Gegensatz dazu, dass jemand jeden Link mit der Tabulatortaste durchgehen muss, um dieses Verständnis zu erlangen.
  • Der Haupttitel 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 Ihr Code ist und ob er 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.

Wie bereits erwähnt, ist Screenreader-Kompatibilität nicht gleichbedeutend mit vollständiger Zugänglichkeit (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.

Beginnen Sie mit der Zugänglichkeit im Hinterkopf. Testen Sie mit verschiedenen Screenreader + Browser-Kombinationen. Testen Sie früh und testen Sie oft. Stellen Sie sicher, dass Sie nach dem Start keine Barrierefreiheit als Funktion hinzufügen, da dies am Ende selten funktioniert und die Leute es bemerken werden.

Mit großer Kraft …

Ich habe Ihnen genug gegeben, um damit anzufangen, wie Screenreader verwendet werden und wie Sie Ihre Seiten mit Screenreadern testen können, aber ich wäre nachlässig, wenn ich Ihnen nicht das vielleicht Wichtigste über die Entwicklung von Barrierefreiheit hinterlassen würde : Screenreader sind nur der Anfang.

Sogar in unserem eigenen Team haben einige von uns ihre Reise zur Barrierefreiheit mit Screenreadern begonnen. Entwickler sind von der Technologie fasziniert und das ist das Erste, worauf wir uns einlassen. Das Erlernen der Verwendung und des Testens mit ihnen ist jedoch nur ein Anfang. Es ist der erste Punkt auf einer viel längeren Reise, die die Berücksichtigung der vielfältigen Fähigkeiten, Situationen und Anwendungsfälle von Menschen beinhaltet.

Ich hoffe, diese Serie zum Thema „Das Web hören“ hat Sie dazu inspiriert, positive Veränderungen in Ihrem täglichen Arbeitsablauf vorzunehmen. Ich fordere Sie, lieber Webentwickler, auf, den Sprung zu wagen und tiefer in die Zugänglichkeit des Webs einzutauchen. Lernen Sie alles, was Sie können, und teilen Sie, was Sie lernen. Erhalten Sie Feedback und Unterstützung von der größeren Web-Community. Investieren Sie den zusätzlichen Aufwand, auch wenn er nicht budgetiert ist. Letztendlich ist es überhaupt kein zusätzlicher Aufwand, sondern einfach Teil Ihres täglichen Arbeitsablaufs. Eine Person kann einen Unterschied machen.

Beginnen Sie mit Barrierefreiheit, hören Sie dem Internet zu und machen Sie großartige Dinge für alle.

Zurück zum Blog