ARIA lässt den Leser nicht fokussierte Elementinhalte lesen

8

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">
Dalibor
quelle

Antworten:

2

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

David Bradshaw
quelle
Ich bin mir nicht sicher ob ich das verstehe. Mein Element mit der Klasse "ausgewählt" und es erhält nie Fokus. Sein Zustand ist niemals fokussiert (wie im Browser fokussiert, Regel (": focus") ist niemals wahr)
Dalibor
Sie verstehen mich falsch. Fügen Sie zu dem Element, das den Fokus hat, ein Arienetikett hinzu, das Informationen zu dem Element enthält, das Sie auslesen möchten. Sie können nicht direkt tun, was Sie tun möchten, aber Sie können es vortäuschen
David Bradshaw
Es ist mir unmöglich, "ul" -Elementbeschriftungen für jedes "li" -Element hinzuzufügen
Dalibor
Sie können aria-discribedby verwenden, um die IDs jedes LI aufzulisten, damit sie alle ausgelesen werden. Es ist nicht schön, aber leider ist es oft der einzige Weg.
David Bradshaw
Warum sollte ich das tun? Warum sollte ich nicht einfach ein Arienetikett verwenden, anstatt ein anderes Element zu verwenden? Sie verpassen den Punkt, ich möchte nicht, dass "li" -Elemente fokussiert werden.
Dalibor
0

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?

dvro
quelle
Ich verstehe die Ergebnisse nicht so wie Sie. Wenn ich Windows Narrator verwende, erhalte ich nur "Abwärtspfeil" und "Aufwärtspfeil", wenn ich auf Abwärts- und Aufwärtspfeile klicke. Bei NVDA ist das Auf- und Ab-Verhalten aus irgendeinem Grund blockiert (einige Hotkeys haben es wahrscheinlich hochgesteckt), und bei JAWS haben Auf- und Ab-Pfeile den gleichen Effekt wie das Hin- und Herbewegen.
Dalibor
Es hört sich so an, als ob Ihr Erzähler - und möglicherweise andere unterstützende Technologien - Ihre Tastendrücke ankündigen, anstatt tatsächlich Ihrer Bildschirmnavigation zu folgen. Ich habe heute Morgen erneut mit Narrator bestätigt und das Verhalten meiner obigen Antwort wiederholt.
dvro
Ich hatte das gleiche Ergebnis (Abwärtspfeil / Aufwärtspfeil), als ich Screen Reader Simulator für Chrome installiert habe. Ich benutze Win10 und das neueste Chrome. Ich weiß nicht, wie es mir möglich ist, ein anderes Ergebnis zu erzielen als Sie.
Dalibor
Überprüfen Sie Folgendes: Scrollen Sie in Ihren Narrator-Einstellungen nach unten zu "Ändern, was Sie beim Tippen hören" und stellen Sie sicher, dass die Kontrollkästchen 1, 2 und 5 aktiviert sind. Das sind die Standardeinstellungen.
dvro
Ich habe Standardeinstellungen von Narrator, und der Narrator funktioniert einwandfrei
Dalibor
0

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>
Paweł Głosz
quelle
-1

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

Jón Ólafsson
quelle
Ich habe ausdrücklich gesagt, dass Elemente nicht fokussierbar sein sollten, und das tabindex-Attribut macht sie fokussierbar.
Dalibor