self disable button, accessibility

Question

Gibt es eine Möglichkeit, nicht 'nicht verfügbar' oder 'gedimmt' in einem Selbst-Deaktivieren-Button zu lesen?

Siehe Beispiel Example

var saveBtn = document.getElementById("saveBtn"); 
var helper = document.getElementById("helper"); 
var content = document.getElementById("content"); 
saveBtn.onclick = function(e) { 
    saveBtn.setAttribute("disabled", "disabled"); 
    saveBtn.setAttribute("aria-disabled", true); 
    content.innerHTML = 'Lorem input a lot of stuffs'; 
    helper.innerHTML = "Content added, please read it"; 
    setTimeout(function(){ 
    helper.innerHTML = ""; 
    saveBtn.removeAttribute("disabled"); 
    saveBtn.setAttribute("aria-disabled", false); 
    }, 5000); 
}; 

• Stimme nur sagt: 'Content hinzugefügt, bitte lesen'
• NVDA sagt: ‚Content hinzugefügt, bitte lesen. '

Ich weiß, dass es passiert, weil der Button immer noch Fokus hat. Aber ich muss eine Lösung dafür finden, weil ich das aktuelle Verhalten meiner Seite nicht ändern kann.

Ich verwende den HTML-Helfer, um Übergänge zu informieren, wie Sie https://stackoverflow.com/a/38137593/3438124 sehen können.

Sorry für hässlichen Code, das ist nur mein wirkliches Verhalten zu simulieren.

Danke Jungs!

Answer 1

Sie müssen den Fokus auf das neue Element verschieben. Gib es tabindex=0 und dann focus().

aria-live ist für, wenn Sie möchten, dass der Bildschirmleser Änderungen für den Inhaltsbereich mit dem Attribut aria-live spricht. Da Sie es für ein Geschwister-Div verwenden, fehlt Ihnen die Möglichkeit, einfach das zu tun, was es tut. Alternative, können Sie den tabindex/ Ansatz überspringen und einfach aria-live auf einen Container für Ihren neuen Inhalt setzen.

Auch können Sie die aria-disabled Graben und nur auf disabled für die Schaltfläche lehnen. aria-disabled ist für Elemente, die disabled nicht unterstützen.

Answer 2

Sie antworteten Ihre eigene Frage, als Sie sagten: "Ich weiß, dass es passiert, weil der Knopf immer noch Fokus hat" und dann zeigte aardrian es explizit, als er sagte: "Sie müssen den Fokus auf das neue Element verschieben".

Denken Sie jedoch daran, dass die Frage, ob der Fokus auf einem deaktivierten Objekt verbleibt, vollständig vom Benutzeragenten (Browser) abhängt. Einige Browser verlassen den Fokus auf das deaktivierte Objekt und andere verschieben es auf das übergeordnete Objekt.

Aardrians Kommentar über die Verwendung von tabindex war, wenn Sie den Fokus auf ein Objekt verschieben wollten, das normalerweise nicht fokussierbar ist (dh, wenn es ein Element ist, zu dem Sie normalerweise nicht wechseln können). Also, wenn Sie den Fokus auf einen einfachen Text verschieben möchten (nur um ihn von der Schaltfläche zu entfernen), dann würde ich den Vorschlag von aardrian optimieren und tabindex='-1' anstelle von tabindex='0' verwenden. Dadurch können Sie focus() für dieses Element aufrufen, es dem Benutzer jedoch nicht erlauben, mit TAB zu arbeiten.

Wenn Sie den Fokus auf eine andere Schaltfläche auf der Seite oder auf ein anderes Element verschieben möchten, das den Fokus erhalten kann (Kontrollkästchen, Eingabefeld usw.), brauchen Sie nicht tabindex.

Wenn Sie den Fokus auf den Text richten, der gerade hinzugefügt wurde, brauchen Sie nicht wirklich aria-live, weil der Bildschirmleser den Text liest, auf den Sie gerade fokussiert haben. Aber das ist nur relativ zu dem Beispiel, das du gepostet hast. Ich verstehe, dass es nur ein Beispiel ist, um das Problem zu zeigen. Ihre tatsächliche App fügt möglicherweise keinen Text hinzu.

Und ich will zweite aardrian Empfehlung von nicht Einstellung aria-disabled, wenn Sie bereits die disabled Eigenschaft. Es ist überflüssig. Die Eigenschaft aria-disabled ist für das Simulieren eines deaktivierten Objekts vorgesehen.

Answer 3

Wie der Text gelesen wird, variiert von Leser zu Leser. Nichts ist richtig oder falsch. Wenn Sie möchten, dass der ausgelesene Text auf allen Lesern gleich und konsistent ist. Fügen Sie Ihrer Schaltfläche ein aria-label = "gewünschter Text" hinzu. Dies überschreibt alles, was innerhalb des Schaltflächen-Tags vorhanden ist.

zB

<button aria-label="desired text button">This text will be ignored</button> 

NVDA wird die Taste als "gewünschte Text-Taste" lesen. Text innerhalb der Schaltfläche wird ignoriert. Jetzt können Sie das Attribut disabled und aria-label mit JS bearbeiten (hinzufügen/entfernen).

Im Rahmen Ihrer Frage können Sie versuchen:

Statt:

helper.innerHTML = "Content added, please read it"; 

Versuchen Sie es mit:

saveBtn.setAttribute("aria-label", "Content added, please read it."); 
setTimeout(function(){ 
saveBtn.removeAttribute("aria-label");}, 5000); 

Dann wird der Text für die Leser gleich sein wird.