it-swarm.com.de

Warum haben Bootstrap Tabs role = "presentation"?

Ich arbeite an einem Design-System, das vom Bootstrap Framework ausgeht. Eines der Hauptziele ist die Barrierefreiheit. Bei der Implementierung von Bootstrap Registerkarten sehe ich, dass sie zutreffen role="presentation" zu den Listenelementen in ihrer Navigationsliste.

Also habe ich ein kleines Stück Test-HTML aus dem Bootstrap Template zusammengestellt:

<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 besagt, dass die Präsentation eine Rolle ist, für die:

Die beabsichtigte Verwendung besteht darin, dass ein Element verwendet wird, um das Erscheinungsbild der Seite zu ändern, jedoch nicht die gesamte funktionale, interaktive oder strukturelle Relevanz aufweist, die der Elementtyp impliziert.

Es scheint mir, dass die <li> -Elemente haben eine strukturelle Relevanz für jemanden, der ein Eingabehilfengerät verwendet, da er angibt, wie viele Registerkarten vorhanden sind. Wenn Sie beispielsweise feststellen, dass der dritte Tab die Informationen enthält, die Sie interessieren, können Sie durch Navigieren zu der Liste und das Wissen, dass es drei Tabs gibt, schneller zu dem gelangen, was Sie möchten.

Wenn Sie mit ChromeVox auf diesen Test-HTML-Code zugreifen, werden die Listen identisch angesagt. Es scheint also, dass role keine praktischen Auswirkungen hat.

Ich habe diese Frage gegoogelt, aber keine Diskussion darüber gefunden. Weiß jemand, warum dies Teil des Bootstrap Frameworks ist?

22
theJBRU

Lesen Sie den Artikel über barrierefreie Tabs von Marco unter https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/

Seine Implementierung hat role="presentation" auf dem li, um anzugeben, "dass der Bildschirmleser die Listenelemente selbst ignorieren soll" und fügt dann die Rolle "tab" zu den Links "Zuordnen der Rollen zu dem beabsichtigten erkennbaren Bildschirmleser-Elementtyp" hinzu.

Ein Punkt, der in einem Problem im bootstrap accessibility project ( https://github.com/Paypal/bootstrap-accessibility-plugin/issues/59 ) gemacht wurde ist, dass (richtige oder falsche) Registerkarten ziemlich häufig als Navigation verwendet werden, so dass es unangebracht wäre, immer den Tablist und die Registerkarte der Rollen einzuschließen.

Übrigens wird unsere Arbeit nicht dadurch erleichtert, dass einzelne Kombinationen von Screenreader und Browser dies nicht in gleicher Weise unterstützen. (Siehe diesen Artikel für eine Beschreibung: http://john.foliot.ca/aria-hidden/ )

7
peater

Es dient hauptsächlich der Barrierefreiheit. http://john.foliot.ca/aria-hidden/ . Sie können die "Rolle" entfernen oder ändern

2
user2557504