ARIA lässt den Leser nicht fokussierte Elementinhalte lesen

Ich habe Elemente auf einer Seite, die "fokussierbar" sind (Schaltflächen, Elemente mit Tabindex usw.), und der Bildschirmleser liest den Inhalt einwandfrei.

Ich habe jedoch einige andere Elemente, die nicht fokussierbar sind (aufgrund der Tatsache, dass es viele davon gibt - Dropdown-Listenergebnisse usw.), daher möchte ich nicht, dass der Benutzer unzählige Male auf die Registerkarte klickt, aber sie können durch links / rechts / navigiert werden Auf / Ab-Tasten, und sie erhalten die CSS-Klasse "ausgewählt" (obwohl ein anderes Element - ihr übergeordnetes Element - tatsächlich fokussiert ist)

Ich möchte den Leser dazu bringen, diese spezifischen Elemente mit der Klasse "ausgewählt" zu lesen. Wie mache ich es?

(Ich habe versucht, ihnen das Attribut aria-label = "read this" zuzuweisen, aber es hat nicht funktioniert; es funktioniert nur, wenn das Element tatsächlich fokussiert ist.)

Hier sind weitere Details, damit Sie verstehen, was ich erreichen möchte:

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Hier ist die Geige: https://jsfiddle.net/d5gbjst1/1/

Sie können zwischen diesen beiden Divs hin und her wechseln, und jeder Bildschirmleser (ich habe es mit Windows Narrator, NVDA und JAWS versucht) liest "title1" und alle Elemente für das erste und "title2" und alle Elemente für das zweite. je nachdem wo der Fokus liegt .

Beachten Sie die Klasse "ausgewählt" für das erste Element in der ersten Ul. Jetzt stöbere ich mit den Aufwärts- / Abwärtspfeilen durch meine Ul-Listen, und die Klasse "ausgewählt" wechselt entsprechend von Element zu Element. (Dies ist der separate JS-Code, der der Einfachheit halber in diesem Beispiel nicht enthalten ist.)

Wenn die Klasse "ausgewählt" auf das Element angewendet wird, möchte ich den Leser zwingen, es zu lesen. Ist das überhaupt möglich?

Bearbeiten: Ich habe versucht, auch Attribute zu ul und li hinzuzufügen, immer noch kein Glück:

<ul role="list">
 <li role="listitem">

Ich hatte neulich das gleiche Problem. Die Lösung, die ich gewählt habe, bestand darin , die zusätzlichen Informationen von der Seite in dem Element, das derzeit den Fokus hat, zu verwenden aria-describedbyund aria-labelbereitzustellen.

In einem Fall ändern wir den Inhalt von aria-label, um zusätzliche Details nur beim ersten Fokus des Elements bereitzustellen.

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-describedby_attribute

Ich möchte den Leser dazu bringen, diese spezifischen Elemente mit der Klasse "ausgewählt" zu lesen. Wie mache ich es?

Ich denke nicht, dass Sie versuchen sollten, das zu tun. Bildschirmleseprogramme - insbesondere diejenigen, mit denen Sie getestet haben - verfügen über komplexe Tastenkombinationen, mit denen Benutzer zu, von und zwischen bestimmten Elementen navigieren und diese dann ein- und aussteigen können.

Das Erzwingen eines nicht standardmäßigen Verhaltens für zugängliche Technologien kann für diese Benutzer zu einer frustrierenden Erfahrung führen.

Bearbeiten: Ich habe versucht, auch Attribute zu ul und li hinzuzufügen, immer noch kein Glück:

<ul role="list"> <li role="listitem">

Vermeiden Sie das Festlegen von Rollen für Listen, da diese standardmäßig zugewiesen sind. Siehe hier: https://www.w3.org/TR/html53/grouping-content.html#ref-for-allowed-aria-role-attribute-values%E2%91%A1%E2%91%A0

Beachten Sie die Klasse "ausgewählt" für das erste Element in der ersten Ul. Jetzt stöbere ich mit den Aufwärts- / Abwärtspfeilen durch meine Ul-Listen, und die Klasse "ausgewählt" wechselt entsprechend von Element zu Element. (Dies ist der separate JS-Code, der der Einfachheit halber in diesem Beispiel nicht enthalten ist.)

Wenn die Klasse "ausgewählt" auf das Element angewendet wird, möchte ich den Leser zwingen, es zu lesen. Ist das überhaupt möglich?

Ich habe mit Ihrem jsfiddle den Erzähler und Screen Reader Simulator für Chrome getestet. Das erwartete Verhalten und das, was ich reproduzieren konnte, ist das, was Sie anstreben. Korrigieren Sie mich, wenn ich falsch liege?

Zuerst klicke ich auf die Registerkarte und konzentriere mich auf das folgende Markup:

<div tabindex="0" >
  <span>title1</span>
  <ul>
    <li class="selected">item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Was dazu führt, dass der Bildschirmleser zurückkehrt

"Titel1, Artikel1, Artikel2, Artikel3"

in schneller Folge. Wie ich es erwarten würde.

Ich klicke erneut auf die Registerkarte, um mich auf dieses Markup zu konzentrieren:

<div tabindex="0">
  <span>title2</span>
  <ul>
    <li>item1</li>
    <li>item2</li>
    <li>item3</li>
  </ul>
</div>

Und der Bildschirmleser kehrt zurück

"Titel 2, Punkt1, Punkt2, Punkt3"

in schneller Folge. Wieder wie ich es erwarten würde

Schließlich klicke ich erneut auf die Registerkarte, um den Fokus wieder auf das erste Markup zu setzen, und verwende die Abwärtspfeiltaste. Der Bildschirmleser kehrt zurück

"Liste eingeben. Eine von drei. Kugel. Punkt 1"

Ich klicke dann erneut auf die Abwärtspfeiltaste, um zur zweiten Kugel zu gelangen.

"Zwei von drei. Kugel. Punkt 2."

Ich klicke erneut auf die Abwärtspfeiltaste.

"Drei von drei. Kugel. Punkt 3".

Dieses Verhalten ist das, was ich erwarten würde und - aus meiner Erfahrung mit dem Bestehen von zwei Double-A WCAG 2.1-Bewertungen - die Norm.

Welches Verhalten erwarten Sie? Was soll Ihr Bildschirmleser konkret zurückgeben / sagen?

Ich hatte kürzlich das gleiche Problem und fand während der Recherche Informationen zum Attribut aria-activedescendant: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-activedescendant_attribute

In diesem Fall sollte jedes Listenelement eine eindeutige ID attr haben. Wenn das Listenelement ausgewählt ist, sollte seine ID dem arienaktivierten Nachkommenattribut des fokussierten übergeordneten Elements zur Verfügung gestellt werden.

<div tabindex="0" aria-activedescendant="Id1">
  <span>title1</span>
  <ul>
    <li class="selected" id="Id1">item1</li>
    <li id="Id2">item2</li>
    <li id="Id3">item3</li>
  </ul>
</div>

Sie könnten versuchen, diesen spezifischen Elementen einen Registerkartenindex hinzuzufügen, aber Sie sollten vorsichtig sein, wenn Sie ihn verwenden, da dies zu Seiten führen kann, die sehr schwer zu navigieren sind, wenn Sie Werte größer als 0 verwenden. Hier ist ein Link für eine detailliertere Antwort. https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex