Wie beschreibe ich eine Lade-Animation für WAI-ARIA?

Question

Ich arbeite daran, einige Probleme mit der Zugänglichkeit auf einer Webseite zu beheben. Ich habe dieses div, das als ein Dialog fungiert, und an einem Punkt wird ein div angezeigt, das eine Lade-Animation und einen Text "Working ..." enthält.

Ich bin nicht sicher, wie diese zwei Elemente beschriftet werden, um den blinden Benutzer korrekt zu benachrichtigen, dass es eine Fortschrittsanimation gibt und dass es funktioniert und er warten sollte.

<div id="loading" style="display: none;"> 
     <div class="mgBot15"><span class="txt16" role="alert">Working...</span></div> 
     <img src="loading.png" role="progressbar" aria-busy="true"/> 
    </div> 

Ich habe versucht, die Rolle und die Arie-busy Eigenschaften zum img Hinzufügen (auch an der Mutter div, zuerst).

Wenn dieses div erscheint (durch Ändern der Display-Stil-Eigenschaft), liest es korrekt "Working ...", aber ich höre keinen Hinweis, dass es beschäftigt ist und dass der Benutzer warten sollte, fehlt mir etwas?

Ich habe überall nach Beispielen für das Laden von Animationen gesucht, bis jetzt vergeblich.

Hinweis: Ich verwende NVDA als Screenreader zum Testen.

Dank

Answer 1

Die beste Lösung, die ich mir vorstellen konnte, war die Verwendung von Rollenalarm und aria-busy = "true".

<div id="loading" style="display: none;"> 
    <div class="mgBot15"><span class="txt16" role="alert" aria-busy="true">Working...</span></div> 
    <img src="loading.png" /> 
</div> 

Answer 2

Versuchen Sie role="alertdialog" aria-busy="true" auf Ihrer Spanne mit?

Answer 3

Beachten Sie, dass dies auch hier beantwortet wurde How do you make the Loading icon accessible for screen-readers like JAWS? mit dieser Combo: role = "Alertdialog" aria-busy = "true" aria-live = "durchsetzungsfähig"