Screenreader Techniken

Der Screenreader muss neben der Tastatursteuerung, von der er übrigens das meiste selbst mitbringt, auch alle textbasierten Informationen korrekt vorlesen. Dazu gehören auch die ARIA-Attribute, die dem Screenreader zusätzliche Informationen geben, wenn das, was HTML beinhaltet, nicht ausreicht.

Auf dieser Seite sind Beispiele für Screenreader-Verhalten. Es wird gezeigt, wie eine DOM-Veränderung vorgelesen wird, wie Abkürzungen und fremde Sprachen funktionieren und wie eine Drag and Drop Tastatur-Bedienung funktioniert und vorgelesen wird .

ARIA Verhalten

Login


Fremdsprachen

Screenreader sind wie unterschiedliche Browser auch, jeder hat so seine Fähgkeiten oder auch nicht. Dazu kommt, dass sich Screenreader über die Einstellungen sehr weitegefächert konfigurieren lassen. Jeder Benutzer wird sich ihn so eingestellt haben, wie er mächte. Insofern sind keine Vorhersagen für ein Verhalten möglich. Man hält sich also an die Standards des semantischen HTMLs und der ARIA-Fähigkeiten.

Teilnehmer:innen oder TeilnehmerInnen oder Teilnehmer*Innen?

Gender-Schreibweisen: "Teilnehmer:innen" mit Doppelpunkt wird vom Screenreader mit kleiner Sprechpause vorgelesen. Binnen-Majuskel, also "TeilnehmerInnen" enthält je nach Screenreader keine Sprechpause. Das ist für Screenreader ungünstig. Der Stern wird in der Regel vorgelesen. Das sollte vermieden werden.

NASA

안녕하세요

Jó napot kívanók

Hello world.

(Kan)(ji)


Drag 'n Drop

Tastaturbedienung

Drag and Drop kann mit der Tastatur bedient werden.

Wörter und Ablageflächen können als Komponenten über die Tab-Taste erreicht werden. Die Auswahl der Wörter und der Ablagefläche funktioniert dann über die Pfeiltasten, die Bestätigung durch die Space-Taste.

Wenn ein Wort in der Ablagefläche durch die Space-Taste abgelegt wurde, könnte vielleicht mit der Pfeiltaste das nächste Wort ausgewählt werden.

Screenreader

Grundsätzlich macht es die Sprachausgabe möglich, dass das Drag and Drop auch von blinden Benutzern bedient werden kann. Jedes Feld oder jedes Ziel muss eine vorlesefähigen Namen haben.

Im Beipiel ist es schwierig, dass ein Feld nicht vorliest, dass bereits etwas drin liegt. Auch die Ablage im falschen Feld berücksichtigt das nicht. Es ist also weitere Programmierung notwendig.

Rot
Grün
Blau

VoiceOver als Entwickler testen

Barrierefreiheit ist wichtig, um Webseiten für alle Nutzer zugänglich zu machen. Entwickler sollten daher regelmäßig testen, wie Inhalte mit einem Screenreader wahrgenommen werden. VoiceOver ist auf jedem Mac vorinstalliert und kann direkt genutzt werden.

Erste Schritte

  1. VoiceOver aktivieren: Command + F5 drücken.
  2. VoiceOver-Einführung: VO + Fn + Command + F8, um eine interaktive Einführung zu starten.
  3. Grundlegende Navigation:
    • Mit VO + Pfeiltasten durch Elemente bewegen. VO + Leertaste, um ein Element zu aktivieren. VO + A, um eine Seite vorlesen zu lassen.

Wichtige Testmethoden