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">
quelle
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.
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
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:
Was dazu führt, dass der Bildschirmleser zurückkehrt
in schneller Folge. Wie ich es erwarten würde.
Ich klicke erneut auf die Registerkarte, um mich auf dieses Markup zu konzentrieren:
Und der Bildschirmleser kehrt zurück
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
Ich klicke dann erneut auf die Abwärtspfeiltaste, um zur zweiten Kugel zu gelangen.
Ich klicke erneut auf die Abwärtspfeiltaste.
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?
quelle
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.
quelle
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
quelle