lesen Label aria-live Region

Question

ich eine Definitionsliste, wo eines der Elemente ändern können:

// Update dynamic content 
 
setInterval(function() { 
 
    document.getElementById('dynamic-info').textContent++; 
 
}, 3000);

<dl> 
 
    <dt>Static information</dt> 
 
    <dd>Value 1</dd> 
 
    
 
    <dt>Static information 2</dt> 
 
    <dd>Value 2</dd> 
 
    
 
    <dt id="dynamic-info-def">Dynamic number</dt> 
 
    <dd id="dynamic-info" aria-live="polite" aria-labelledby="dynamic-info-def">1</dd> 
 
</dl>

ich aria-live auf den Inhalt gelegt haben, weil es braucht, um gelesen werden ein Screenreader, der funktioniert, aber nur die Nummer wird gelesen. Es muss "Dynamische Nummer: 2" sagen, damit der Benutzer den Kontext hat.

Ich kann aria-live nicht auf die <dl> setzen, weil das zu viel Inhalt zu lesen wäre. Ich habe versucht, ein Wrapper div um das letzte dt/dd Paar, aber das ist illegal HTML.

Ich versuchte mit aria-labelledby (siehe oben), aber das hatte keine Wirkung (in Chrome mit VoiceOver).

Wie kann ich eine Live-Region dazu bringen, zugehörige Inhalte zu lesen?

Answer 1

Ein Bereich, der als ARIA-Live-Region angegeben ist, liest nur seinen Inhalt. Es ignoriert aria-labelledby und aria-describedby.

Sie müssen Ihre Funktion anpassen, um den gesamten Textblock in die Live-Region zu schreiben.

Wenn der zusätzliche Text nicht sichtbar sein soll, verwenden Sie CSS off-screen technique, um ihn zu verbergen.

Answer 2

Haben Sie mit aria-atomic gespielt? Es wird den Vorfahrenbaum hinaufgehen, so dass es auf einem Elternteil des < dd> gesetzt werden müsste. Einstellung auf < dt> wird nicht funktionieren, weil es ein Geschwister ist. Aber Sie könnten möglicherweise eine versteckte < span haben> das ist das Elternteil der < dl> mit "dynamische Zahl" als der Text. Die < Spanne> wuold muss ausgeblendet werden, indem man ihre Höhe auf 1px setzt, anstatt sie wirklich zu verstecken (Sichtbarkeit), weil wirklich verborgene Sachen nicht von einem Screenreader gelesen werden. Aber wenn dann die < Spanne nur 1px hoch ist, dann werden auch alle Kinder ausgeblendet. Bummel.

Sie könnten auch eine Brute-Force-Methode versuchen und eine 1px aria-live < Spanne> haben, die Sie mit "dynamic number 2" aktualisieren. Der vollständige Text wird gelesen, aber nicht angezeigt. Du würdest auch deine < dd aktualisieren, aber es müsste nicht aria-live sein.