Wo die aria-controls-Attribut in meinen tabs markup

Ich bin einrichten einer tabbed Inhalt-Abschnitt in meine Seite mit einem Skript, das folgt der folgenden syntax:

<!-- Clickable tab links -->
<ul class="js-tablist">
    <li id="tab1" class="js-tab active"><a href="#tabpanel1">Tab 1</a></li>
    <li id="tab2" class="js-tab"><a href="#tabpanel2">Tab 2</a></li>
    <li id="tab3" class="js-tab"><a href="#tabpanel3">Tab 3</a></li>
</ul>

<!-- Tab panels -->
<div id="tab-set" class="js-tabpanel-group">
    <section id="tabpanel1" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel2" class="js-tabpanel">__CONTENT__</section>
    <section id="tabpanel3" class="js-tabpanel">__CONTENT__</section>
</div>

Werde ich die Einstellung von verschiedenen ARIA-roles (role="tablist", role="tab", role="tabpanel", etc) auf das strukturelle markup mit javascript (weil wenn es kein Skript gibt, dann gibt es keine tabs), aber ich bin ziemlich unsicher, wo meine " aria-controls Attribute. Sollten Sie gehen auf die <li> element oder auf seine <a> Kind-element? Oder ist es egal? In der Tat, die gleiche Frage könnte gefragt werden role="tab" und tabindex="0" -- sollten diese Dinge gehen Sie auf das Listenelement oder der Anker?

InformationsquelleAutor Rick Lecoat | 2016-05-22
  1. 8

    Setzen aria-controls auf das Element, das bekommt role="tab".

    aria-controls ist, was schafft die Beziehung zwischen einem Reiter und seinem panel. Siehe die Dritte Kugel in der Beschreibung für aria-controls aus der spec: https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls

    Beantworten Folge-Frage, setzen die role="tab" auf die <a href> da, die ist schon grundiert, um den Tastatur-Fokus erhalten und werden umsetzbare durch den browser. Das bedeutet auch, dass Sie nicht brauchen, um zu verwenden tabindex überhaupt.

    Beachten Sie auch werfen eine role="presentation" auf die <li> Elemente und role="tablist" auf die <ul> (vor allem, da Sie das Rendern der <li> inert mit role="presentation").

    Bereit sein auch verwalten aus-Taste, navigation, wie Sie mithilfe der Registerkarte Rollen, die Sie im wesentlichen zu sagen, ein Experte Benutzer, die diese Register Verhalten sich wie tabs im OS, die Ehre Pfeiltasten, um zwischen Registerkarten zu wechseln.

    Zusätzliche Ressourcen lohnt sich:

    Nachdem alle diese, bitte testen Sie es im Bildschirm-Lesegeräte, um sicherzustellen, dass es sich so verhält, wie Sie erwarten.

    InformationsquelleAutor aardrian
  2. 2

    Diese demo zeigt ein screen-reader mit tabpanels mit ARIA. Die Jaws Bildschirm reader bietet einen shortcut für den Wechsel von der Registerkarte auf die entsprechende tabpanel basiert auf der Beziehung, erstellt von der aria-controls-Attribut.

    Wenn du neugierig bist, diese demo zeigt ein screen-reader mit tabpanels ohne ARIE.

    Wenn Sie ein set erzeugen des tabpanels Sie wollen das widget zur Darstellung einer einzelnen tab-stop in der Tastatur um. Wenn jemand nutzt die tab-Taste, um den Cursor auf den Satz von Registerkarten, konzentrieren sollten, gehen Sie auf die derzeit ausgewählte Registerkarte, und das nächste drücken der Tabulator-Taste sollte den Fokus Rücken, die in den Materialien wieder.

    Können Sie eine wechselnde tabindex, dies zu tun. Nur die derzeit ausgewählte Registerkarte werden sollte, justierbares. Alle anderen Registerkarten (speziell die <a> Elemente, die Sie vertreten) sollte der tabindex="-1" eingestellt. Dies verhindert, dass Sie enthalten in der Tabulator-Reihenfolge.

    Skripts, die ermöglicht einer Person, um durch die Registerkarten mit den Links/rechts Pfeil-Tasten sollten ebenfalls aktualisieren Sie die Werte der tabindex-Attribut auf jede Registerkarte, so dass alle, aber die derzeit ausgewählte Registerkarte haben die tabindex-Eigenschaft auf -1 gesetzt. Es ist ein arbeiten tabpanels demo hier.

    • Vielen Dank für diese Demos Léonie. Die Verwendung von tabindex in eine Barrierefreiheit Kontext war schon immer ein bisschen ein Rätsel für mich; zuerst mithilfe von tabindex empfohlen wurde, dann war es nicht zu empfehlen (um nicht in Konflikt mit bereits vorhandenen Tastatur-Kurzbefehle), und jetzt ist es ' s empfohlen, aber mit einem ziemlich arkanen Regeln. Definitiv etwas, was ich brauche, zu schauen, mehr. Cheers.
    • Das tabindex-Attribut wurde aktualisiert in HTML5. Es ist immer noch möglich, es zu benutzen, um die Dinge schrecklich, aber es ist auch ok. Dieser Artikel auf <ein href="Verwendung von" >paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/..., das tabindex-Attribut</a> könnte hilfreich sein.
    • Klasse, vielen Dank Léonie. Ich habe bereits eine Reihe von Lesezeichen für Seiten an paciellogroup.com und ich werde hinzufügen, dass man die Sammlung. FWIW, dein link scheint sich verstümmelt; die richtige URL ist paciellogroup.com/blog/2014/08/using-the-tabindex-attribute (obwohl, wenn die Verstümmelung eingetreten als Teil des Stack-Overflow-kommentieren-system dann natürlich von mir bekommen könnte ähnlich entstellt).
    InformationsquelleAutor Léonie Watson
Schreibe einen Kommentar