Ich arbeite an einem Design-System, das sich vom Bootstrap-Framework erstreckt. Eines der Hauptziele ist die Barrierefreiheit. Beim Implementieren von Bootstrap-Registerkarten sehe ich, dass sie role="presentation" auf die Listenelemente in ihrer Navigationsliste anwenden.Warum haben Bootstrap-Registerkarten role = "presentation"?
Also habe ich ein wenig zusammen Stück HTML-Test aus der Vorlage Bootstrap:
<ul class="nav nav-tabs">
<li role="presentation" class="active"><a href="#">Home</a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages</a></li>
</ul>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Messages</a></li>
</ul>
Die ARIA-Spezifikation sagt, dass Präsentation eine Rolle, für die ist:
Die bestimmungsgemäße Verwendung ist, wenn ein Element wird verwendet, um das Aussehen der Seite zu ändern, aber hat nicht alle funktionalen, interaktiven oder strukturellen Relevanz impliziert durch den Elementtyp,
Es scheint mir, dass die <li> Elemente eine strukturelle Relevanz für jemanden haben, der ein Accessibility-Gerät verwendet, da sie Ihnen sagen, wie viele Tabs vorhanden sind. Wenn Sie beispielsweise feststellen sollten, dass der dritte Tab Informationen enthält, die Sie interessieren, navigieren Sie zur Liste und wissen, dass es drei Tabs gibt, damit Sie schneller zu dem gelangen, was Sie wollen.
Auch beim Zugriff auf diesen HTML-Test mit ChromeVox werden die Listen identisch angekündigt. So scheint es, dass die keine praktische Wirkung hat.
Ich habe diese Frage gegoogled, habe aber keine Diskussion darüber gefunden. Weiß jemand, warum dies Teil des Bootstrap-Frameworks ist?
Wenn Sie nicht haben, möchten Sie vielleicht https://css-tricks.com/navigation-in-lists-to-be-or-not überprüfen -sein/. Es gibt einen Punkt dort - dass Sie nicht wollen, dass eine Navigationsleiste als "Liste von ..." angekündigt wird. Auch in Bezug auf den Unterschied möchten Sie vielleicht die Hyperlinks löschen und sehen, was passiert - die Spezifikation. sagt "role = Präsentation führt nicht dazu, dass der enthaltene Inhalt * innerhalb des Elements * aus der Accessibility-Struktur entfernt wird." – potatopeelings
Ich habe versucht, eine Reihe von Links im Vergleich zu einer Liste in ChromeVox und kann den Unterschied hören. Ich bin nicht sicher, welchen Ansatz Benutzer von Bildschirmlesern bevorzugen würden. Ohne eine Liste scheint die Rolle noch weniger relevant zu sein, da ein Bereich von ChromeVox in jedem Fall ignoriert wird. Durch das Löschen der Hyperlinks wird die Tastaturzugriffe beeinträchtigt, was kontraproduktiv ist. – theJBRU
Ich stimme @theJBRU zu, dass dies keinen Sinn ergibt.Mit der Existenz von Rollen, Tablisten, Tabs und Tabules scheint Bootstrap entschieden zu haben, Dinge auf ihre eigene Art und Weise zu tun, mit einer Rolle, die größtenteils missverstanden wird (wegen der vagen Dokumentation). Bootstrap verwendet Tab-Panel, welches nach Meinung der Dokumentation zusammen mit den anderen 2 Rollen verwendet werden sollte. – Jason