Entmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices

Dies ist die dritte Rate in unserer Serie zu zugänglichen Webformularen. Wenn Sie den vorherigen Beitrag verpasst haben, lesen Sie "Verwalten des Benutzerfokus mit: Fokus-Issible". In diesem Artikel wird die Bildschirmlesernavigation in Formularen untersucht und umrissen Best Practices für zugängliche Formgestaltung.

Anmerkung des Editors: Dieser Beitrag wurde aktualisiert, um die aktuellen Best Practices widerzuspiegeln, und enthält zusätzliche Code -Beispiele. Ihr Feedback ist willkommen!

Bildschirmleser verstehen

Bildschirmleser sind assistive Technologien (AT), die digitale Text in Audio oder Braille umsetzen. Sie sind wesentliche Tools für sehbehinderte Benutzer. Diese Anleitung verwendet Mac Vo (Voice-Over) als Beispiel einen integrierten Bildschirmleser für Apple-Geräte. Die spezifischen Methoden zur Aktivierung und Verwendung von VO können je nach Gerät geringfügig variieren.

Aktivieren von Voiceover auf macOS

Aktivieren Sie bei neueren MacBook -Profis VO, indem Sie die Befehlstaste gedrückt halten und die Touch -ID dreimal schnell drücken. Ältere MacBook -Profis (mit einer Touch -Bar) verwenden die Verknüpfung CMD F5. Verwenden Sie für herkömmliche Tastaturen die äquivalente Verknüpfung oder aktivieren Sie VO über Barrierefreiheiteinstellungen. Bei der Aktivierung bietet VO eine einleitende Nachricht.

Sie können mit einer Kombination aus Registerkarten-, Steuer-, Options-, Verschiebungs- und Pfeiltasten navigieren oder den Voiceover -Rotor für eine direktere Navigation verwenden.

Modifikatortasten in Voice -Over

Die Standard -Voice -Over -Modifikator -Schlüssel sind Steuerungsoption, dies kann jedoch an Caps -Sperre oder eine Kombination aus beiden angepasst werden.

Verwenden des Voiceover -Rotors

Aktivieren Sie den Rotor mit Ihren Modifikatortasten "U" (z. B. Caps Lock U). Verwenden Sie die linken und rechten Pfeiltasten, um durch die verschiedenen Optionen zu navigieren.

navigieren durch Überschrift Level

Navigieren Sie durch Überschrift mit Ihren Modifikatortasten CMD H. Verwenden Sie Modifikatortasten. Verschiebender CMD H, um die Dokumentstruktur wieder nach oben zu verschieben.

Barrierefreiheit Best Practices für Webformen

Webformen sind für die Webinteraktion von grundlegender Bedeutung. Hier sind einige Best Practices zum Erstellen von zugänglichen Formularen:

1. explizite und implizite Bezeichnungen: Während die implizite Kennzeichnung (mit dem Attribut for zu verknüpfen) Beschriftungen und Eingaben) ist akzeptabel, explizite Kennzeichnung (<label>...</label>) wird im Allgemeinen für Klarheit bevorzugt.

<label for="name">Name:</label> <input type="text" id="name">

2. Erforderliche Felder: Verwenden Sie das Attribut required für obligatorische Felder. Geben Sie immer einen visuellen Hinweis (z. B. ein Sternchen) an, um die erforderlichen Felder für alle Benutzer anzugeben.

<label for="email">Email (required):<span style="color:red">*</span></label> <input type="email" id="email" required>

3. Verwenden Sie native HTML -Schaltflächen: Verwenden Sie immer <button></button> Elemente für die Formulareingabe; Vermeiden Sie die Verwendung von Divs als Schaltflächen.

Demo und Ressourcen

Besuchen Sie für ein Code -Beispiel die Voiceover Demo Github Repo . Eine Live -Demo mit Voice -Over ist bei ein Webformular mit Voice -Over .

verfügbar

Software -Optionen für Bildschirmleser

• nvda: Ein kostenloser und open-Source-Bildschirmleser für Windows.
• JAWS: Ein beliebter kommerzieller Bildschirmleser für Windows.
• Erzähler: Ein integrierter Bildschirmleser für Windows 11.
• orca: Ein Bildschirmleser für GNOME-basierte Linux-Verteilungen.
• Talkback: Der integrierte Bildschirmleser für Android.

Browser- und Bildschirmleserkompatibilität

Informationen zur Browser -Unterstützung für HTML -Elemente und ARIA -Attribute finden Sie in Caniuse.com und der Barrierefreiheit Support -Dokumentation für ARIA. Denken Sie daran, dass die Kompatibilität für Bildschirmleser von der Browser -Unterstützung abhängt. Artikel von Digitala11y, "Bildschirmleser und Browser! Was ist die beste Kombination für Barrierefreiheitstests?" bietet hilfreiche Erkenntnisse.

ANERKENNUNG

Dank Adrian Roselli, Karl Groves, Todd Libby, Scott O’Hara, Kev Bonnett und anderen für ihre Beiträge.

Weitere Lesen

• Apple Voice -Over -Unterstützung
• Wai-Aria Authoring Practices
• wai-aria in html
• Google Talkback -Unterstützung
• Interaktionsmodi für Bildschirmleser verstehen
• Erforderliche Attributanforderungen

Das obige ist der detaillierte Inhalt vonEntmystifizierende Bildschirmleser: Zugrunde Formen und Best Practices. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!