html - w3school - aria-labelledby para que sirve
Dónde colocar el atributo aria-controls en el marcador de mis pestañas (2)
Coloque aria-controls en el elemento que obtiene role="tab" .
aria-controls es lo que crea la relación entre una pestaña y su panel. Consulte la tercera viñeta en la descripción de aria-controls de la especificación: https://www.w3.org/TR/wai-aria/states_and_properties#aria-controls
Para responder a su pregunta de seguimiento, coloque role="tab" en la <a href> ya que está preparado para recibir el enfoque del teclado y puede ser procesable por el navegador. Eso también significa que no necesitarás usar tabindex en absoluto.
Considere también lanzar un role="presentation" en los <li> elements and role="tablist" en el <ul> (especialmente desde que hace el <li> inerte con role="presentation" ).
Esté preparado para administrar también la navegación con la tecla de flecha, ya que al usar las funciones de pestaña básicamente le está diciendo a un usuario experto que estas pestañas se comportarán como pestañas en el sistema operativo, que respetan las teclas de flecha para alternar entre pestañas.
Recursos adicionales que vale la pena consultar:
- https://www.marcozehe.de/2013/02/02/advanced-aria-tip-1-tabs-in-web-apps/ (del chico que trabaja en accesibilidad en Mozilla y es un usuario de lector de pantalla)
- http://heydonworks.com/practical_aria_examples/#tab-interface (de un tipo que consulta y repara soluciones de accesibilidad)
Después de todo esto, pruébelo en lectores de pantalla para asegurarse de que se comporte como espera.
Estoy configurando una sección de contenido con pestañas en mi página usando un script que sigue la siguiente sintaxis:
<!-- 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>
Estableceré varios roles ARIA ( role="tablist" , role="tab" , role="tabpanel" , etc.) en este marcado estructural a través de javascript (ya que si no hay secuencias de comandos, entonces no hay pestañas) pero estoy no estoy seguro de dónde colocar mis atributos ''aria-controls''. ¿Deberían ir en el elemento <li> o en su <a> elemento hijo? ¿O no importa? De hecho, la misma pregunta podría hacerse acerca de role="tab" y tabindex="0" - ¿deberían estas cosas ir al elemento de la lista o al delimitador?
Esta demostración muestra un lector de pantalla que usa tabpanels con ARIA . El lector de pantalla Jaws proporciona un acceso directo para pasar de la pestaña al tabpanel correspondiente en función de la relación creada por el atributo aria-controls.
Si tiene curiosidad, esta demostración muestra un lector de pantalla que utiliza tabpanels sin ARIA .
Cuando crea un conjunto de tablas de pestañas, desea que el widget represente una sola tabulación en el orden del teclado. Cuando alguien usa la tecla de tabulación para pasar al conjunto de pestañas, el enfoque debe ir a la pestaña seleccionada en ese momento, y al presionar nuevamente la tecla de tabulación se debe enfocar de nuevo en el contenido.
Puede usar un tabindex itinerante para hacer esto. Solo la pestaña seleccionada actualmente debe ser enfocable. Todas las demás pestañas (específicamente los <a> elementos que las representan) deben tener tabindex = "- 1" establecido. Esto evita que se incluyan en la secuencia de pestañas del teclado.
La secuencia de comandos que permite a alguien recorrer las pestañas usando las teclas de flecha izquierda / derecha también debe actualizar los valores del atributo tabindex en cada pestaña, de modo que todas las pestañas menos la actualmente seleccionada tengan tabindex establecido en -1. Aquí hay una demo de pestañas en funcionamiento .