Lückentexte  

Dynamische Anpassung für Screenreader mit dem aria-labelledby-Attribut

Lückentext: Bitte füllen Sie die Lücke aus!

Lückentexte kennen wir von Prüfungen. Natürlich wird dieses Konzept auch im E-Learning übernommen. Damit Lückentexte von Screenreadernutzern ausgefüllt werden können, bedarf es an dynamischen Anpassungen.

Stellen Sie sich eine Prüfung aus dem Bereich Hauswirtschaft vor. Dort geht es darum, wie ein Tisch gedeckt wird und wo das Besteck hingelegt werden soll:

Lückentext in der Browseransicht, Code folgt unmittelbar

 

<p>Der
<input aria-label="Lücke" name="antwort1">
steht daumenbreit von der
<input aria-label="Lücke" name="antwort2">
entfernt. Das bedeutet zwischen Teller und Tischkannte passt mein
<input aria-label="Lücke" name="antwort3">
.</p>

Im einfachen Fall kann zur Barrierefreiheit gesagt werden:

  • Die Eingabefelder haben alle durch das aria-label-Attribut einen accessible Namen.
  • Im Kontext der Sätze müssten die Eingabefelder mit Sprachausgabe und Braille-Zeile ausgefüllt werden können.

Wenn ein Screenreadernutzer den Text im Lesemodus des Screenreaders liest, wird der Text in etwa wie folgt lauten:

„Der Lücke steht daumenbreit von der Lücke entfernt. Das bedeutet zwischen Teller und Tischkannte passt mein Lücke.“

Die Eingabefelder sind allerdings nicht voneinander unterscheidbar. Das ist leicht erkennbar, wenn mit einem Screenreader durch die Seite navigiert wird oder die Screenreaderfunktion für die Auflistung der Formularelemente genutzt wird. Alle Eingabefelder haben den gleichen Namen.

Liste der Formularfelder in Jaws, sie lauten alle gleich.

 

Erweiterung von aria-label

Damit die Eingabefelder beim Lesen mit einem Screenreader unterscheidbar werden, müssen zunächst die einzelnen Bezeichnungen angepasst werden:

<p>Der
<input aria-label="[Lücke 1]" name="antwort1">
steht daumenbreit von der
<input aria-label="[Lücke 2]" name="antwort2">
entfernt. Das bedeutet zwischen Teller und Tischkannte passt mein
<input aria-label="[Lücke 3]" name="antwort3">
.</p>

Jetzt sind die Eingabefelder unterscheidbar, aber die Bezeichnungen sind immer noch nicht aussagekräftig:

Liste der Formularfelder in Jaws, Eingabefelder können unterschieden werden. 

Lösungsansatz mit dem aria-labelledby-Attribut

Die Eingabefelder müssen mit mehr Kontext beschriftet werden. Der zweite Satz könnte wie folgt ausgezeichnet werden:

<span id="id1">Das bedeutet zwischen Teller und Tischkannte passt mein</span>
<input aria-label="[Lücke 3]" id="id2" aria-labelledby="id1 id2" name="antwort3">.

Da das aria-labelledby-Attribut Vorrang vor dem aria-label-Attribut bei der Bestimmung des accessible name hat, lautet der accessible name des dritten Eingabefelds jetzt:

“ Das bedeutet zwischen Teller und Tischkannte passt mein [Lücke 3]“

Der accessible name ist jetzt eindeutig bestimmbar, aber im Lesemodus eines Screenreaders wird der Text schwieriger zu lesen. Der letzte Satz würde wie folgt im Lesemodus lauten:

“ Das bedeutet zwischen Teller und Tischkannte passt mein Das bedeutet zwischen Teller und Tischkannte passt mein [Lücke 3].“

Kurzum: Der Einsatz des aria-labelledby-Attributs darf nur bei Fokus vorgenommen werden

Lesemodus und Bearbeitungsmodus

Screenreader verfügen über mehrere Modi. Für die Webentwicklung ist der Unterschied zwischen Lese- und Bearbeitungsmodus wichtig:

  • Im Lesemodus eines Screenreaders werden die meisten Tastenschläge vom Screenreader abgefangen. Lediglich einige wenige Tastendrücke wie Eingabe, Leertaste oder Escape werden an den Browser durchgereicht. Beim Lesen orientiert sich der Screenreader an den Strukturen in HTML; der Screenreader stellt 1-Tastenbefehle für die Navigation bereit (z.B. das Drücken der Taste „H“ führt direkt zur nächsten Überschrift).
  • Im Bearbeitungsmodus – Formularmodus (JAWS) oder Fokusmodus (NVDA) – werden sämtliche Tastendrücke hingegen an den Browser durchgereicht – erst dann können Screenreader Formulare und Widgets per Tastatur bedienen. Der Bearbeitungsmodus ist zum Lesen von Mengentexten nicht gut geeignet.

Bei einigen Formularelementen (z.B. Eingabefelder) springen Screenreader automatisch in den Bearbeitungsmodus, wenn der Fokus auf das Formularelement steht. Es ist bei solchen Komponenten notwendig, eine Eingabe über die alphanumerische Tastatur vorzunehmen, was den Bearbeitungsmodus erforderlich macht.

Bei weiteren Formularelementen (z.B. Checkboxen, Buttons) ist es abhängig von der Situation – ein Bearbeitungsmodus wird meist nicht erzwungen, weil Eingabe/Leertaste ohnehin an den Browser durchgereicht werden. Diese Elemente sind im Lesemodus bedienbar.

Event-Listener hinzufügen

Um den Absatz mit den drei Eingabefeldern so aufzubereiten, dass er bei Fokus einen erweiterten accessible Name bekommt, müssen zwei Anpassungen vorgenommen werden:

  1. Die einzelnen Texte und Eingabefelder müssen alle eine ID bekommen.
  2. Die einzelnen Eingabefelder müssen die einzelnen Teile der Beschriftung „kennen“. Das kann mit einem data-*-Attribut gemacht werden:

    <p><span id="id1">Der</span>
    <input aria-label="[Lücke 1]" id="id2" data-labelldby="id1 id2 id3" name="antwort1">
    <span id="id3">steht daumenbreit von der</span>
    <input aria-label="[Lücke 2]" id="id4" data-labelledby="id3 id4 id5" name="antwort2">
    <span id="id5">entfernt.</span> <span id="id6">Das bedeutet zwischen Teller und Tischkannte passt mein
    </span> <input aria-label="[Lücke 3]" id="id7" data-labelledby="id6 id7 id8" name="antwort3">
    <span id="id8">.</span></p>

Mit ein wenig JavaScript kann aria-labelledby bei Fokus eingesetzt werden:

var obj = document.querySelectorAll('input[data-labelledby]');
for (var i=0; i<obj.length; i++) {
obj[i].addEventListener('focus', function(ev) {
this.setAttribute('aria-labelledby', this.getAttribute('data-labelledby'));
}, false);
obj[i].addEventListener('blur', function(ev) {
this.removeAttribute('aria-labelledby');
}, false);
}

Bei Fokus (z.B. auf das erste Eingabefeld) erhält der accessible name jetzt mehr Kontext:

Liste der Formularfelder in Jaws, fokussierte Formularfeld wird mit Zusatztext ergänzt.

 

Das Beispiel steht als Demo bereit.

Weitere Hinweise

Das Beispiel zeigt nur den Ansatz für zugänglichere Lückentexte. Lückentexte gibt es in zahlreichen Formen z.B. kombiniert mit Auswahllisten. Daher muss der Code weiter ausgebaut werden.

Es gibt auch noch ein Problem im Screenreader. Obwohl die aria-labelledby-Attribute korrekt hinzugefügt und entfernt werden, kann es trotzdem passieren, dass mit einem Screenreader das aria-labelledby-Attribut nicht entfernt wird. Wenn ein Screenreadernutzer händisch vom Bearbeitungsmodus in den Lesemodus wechselt, bleibt der Fokus in dem Eingabefeld stehen (Fokus ist eine Browserfunktion, nicht eine Screenreaderfunktion). Das heißt, dass dann ein Eingabefeld die ausführliche Bezeichnung beibehält und das Lesen der Aufgabe im Lesemodus eines Screenreaders führt zu einer doppelten Ausgabe der verknüpften Texte. Das Hinzufügen und die Entfernung des aria-labelledby-Attributs funktioniert hier nur unter Verwendung der Tab-Taste.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert