Ich richte einen Tabbed-Content-Bereich auf meiner Seite mit einem Skript ein, das der folgenden Syntax folgt:
%Vor% Ich werde verschiedene ARIA-Rollen ( role="tablist" , role="tab" , role="tabpanel" , usw.) auf dieses strukturelle Markup über Javascript setzen (da, wenn es kein Scripting gibt, gibt es keine Tabs), aber ich bin mir nicht sicher wo um meine 'aria-controls' Attribute zu platzieren. Sollten sie auf das <li> Element oder auf sein <a> Kind Element gehen? Oder spielt es keine Rolle? In der Tat könnte die gleiche Frage über role="tab" und tabindex="0" gestellt werden - sollten diese Dinge auf den Listenpunkt oder den Anker gehen?
Setze aria-controls auf den Gegenstand, der role="tab" bekommt.
aria-controls erzeugt die Beziehung zwischen einer Registerkarte und ihrer Anzeige. Siehe das dritte Aufzählungszeichen in der Beschreibung für aria-controls aus der Spezifikation: Ссылка
Um Ihre Follow-on-Frage zu beantworten, geben Sie role="tab" auf <a href> ein, da diese bereits aktiviert ist, um den Tastaturfokus zu erhalten und vom Browser verwertbar zu sein. Das bedeutet auch, dass Sie tabindex überhaupt nicht verwenden müssen.
Denken Sie auch daran, einen role="presentation" auf die <li> Elemente und role="tablist" auf den <ul> zu werfen (besonders, da Sie <li> inert mit role="presentation" rendern).
Bereiten Sie sich darauf vor, auch die Navigation per Pfeiltaste zu verwalten, indem Sie über die Registerkartenfunktionen einem Experten mitteilen, dass diese Registerkarten sich wie Registerkarten im Betriebssystem verhalten und die Pfeiltasten zwischen den Registerkarten wechseln.
Weitere nützliche Ressourcen:
Nach all dem testen Sie es bitte in Screenreadern, um sicherzustellen, dass es sich wie erwartet verhält.
Diese Demo zeigt einen Bildschirmleser, der Tabulatoren mit ARIA verwendet . Der Jaws Screenreader bietet eine Abkürzung für den Übergang von der Registerkarte zu der entsprechenden Registerkarte basierend auf der Beziehung, die durch das Attribut aria-controls erstellt wurde.
Wenn Sie neugierig sind, zeigt diese Demo einen Screenreader, der Tabulatoren ohne ARIA verwendet .
Wenn Sie mehrere Tab-Panels erstellen, soll das Widget einen einzelnen Tab-Stop in der Reihenfolge der Tastatur darstellen. Wenn jemand die Tabulatortaste verwendet, um auf die Registerkarten zu wechseln, sollte der Fokus auf die aktuell ausgewählte Registerkarte gesetzt werden, und das nächste Drücken der Tabulatortaste sollte den Fokus wieder auf den Inhalt zurückführen.
Sie können einen Roving Tabindex verwenden Dies. Nur die aktuell ausgewählte Registerkarte sollte fokussierbar sein. Auf allen anderen Tabs (insbesondere den <a> -Elementen, die sie darstellen) sollte tabindex="- 1" gesetzt sein. Dies verhindert, dass sie in die Tastaturregisterfolge aufgenommen werden.
Das Scripting, das es jemandem ermöglicht, mit den Pfeiltasten nach links / rechts durch die Registerkarten zu navigieren, sollte auch die Werte des Tabindex-Attributs auf jeder Registerkarte aktualisieren, so dass alle Registerkarten bis auf die aktuell ausgewählte Registerkarte auf -1 gesetzt sind. Es gibt hier eine Tabellendemo .
Tags und Links html accessibility tabs wai-aria