Labordatei für <output>-Elements

Fragestellungen

• Wie kann das Element die Barrierefreiheit unterstützen?
• Wie verhalten sich Screen Reader in verschiedenen Browsern?

Testbereich

Testvorbereitung

1. Aktiviere einen Screen Reader.
2. Gib ein kurzes Wort ein und klicke auf „Buchstabieren“.
3. Höre zu, was dir der Screen Reader sagt.

Testformular

Beobachtungen

• Das Ergebnis wird nach Drücken von ENTER beziehungsweise des Schalters "Buchstabieren" vorgelesen und der Fokus bleibt im Eingabefeld beziehungsweise dem Submit-Schalter . (JAWS und NVDA in Chrome und Firefox, Voice Over in Safari)
• Die Darstellung der Beschriftung ist nicht konsistent:
  • Wenn das output-Element über ein assoziiertes label.Element verfügt, wird die Beschriftung von JAWS in Chrome der Ausgabe vorangestellt.
    Buchstabiertes Wort: E v a
  • NVDA fügt in Chrome die Beschriftung am Ende der Ausgabe hinzu:
    E v a Buchstabiertes Wort
  • Firefox und Safari ignorieren jedoch die vorhandene Beschriftung bei der Ausgabe.

Über diese Testdatei

Entwicklung

Diese Testdatei basiert auf einem von ChatGPT erstellten Code.

Der von der KI vorgeschlagene Code wurde für die vorliegende Testdatei analysiert und angepasst (HTML, CSS, Script). Um die Ausgabe durch Screen Reader auf das Wesentliche zu reduzieren, wurde auf die Fehlerbehandlung verzichtet.

Testumgebung

Getestet wurde für die Beobachtungen in den jeweils aktuellen Betriebssystemen und Browsern zum Stand November 2025.