De acuerdo con las pautas de WAI para pestañas , se debe establecer el tabpanel de rol en cada elemento que contiene contenido con pestañas y luego establecer el valor aria-controls de la pestaña de activación en la ID del contenedor.
Esto funcionaría bien en una situación en la que todas las pestañas están incluidas en el DOM y solo se ocultan mediante CSS.
Sin embargo, en mi aplicación solo estoy agregando el contenido de la pestaña seleccionada actualmente al DOM usando JavaScript. Esto significa que solo habrá un único panel de tabpanel en el DOM y todas las demás pestañas tendrán valores aria-controls establecidos en ID no existentes, lo que dudo que sea una buena práctica.
Así que ahora me pregunto: ¿Debo configurar el rol del panel de pestañas o debería simplemente configurar aria-controls desde las pestañas en el contenedor que terminará mostrando la pestaña seleccionada actualmente al agregar aria-live="polite" y aria-relevant="all" o hay una mejor práctica para esta situación?
Está bien omitir el atributo aria-control , y la lista de pestañas debe colocarse justo antes de los paneles de pestañas.
De la especificación ARIA en el panel de pestañas de roles :
Los autores DEBERÍAN asociar un elemento tabpanel con su pestaña, ya sea usando el atributo aria-controls en la pestaña para hacer referencia al panel de pestañas, o usando el atributo aria-labelledby en el panel de pestañas para hacer referencia a la pestaña.
Por lo tanto, puede omitir la parte aria-controls y seguir cumpliendo.
Dado que la mayoría de los lectores de pantalla no hacen nada aria-controls este momento, la mejor práctica se convirtió simplemente en mantener la tablist de pestañas y el panel de tabpanel muy juntos, sin contenido en el medio.
También de la especificación:
Los elementos de la lista de pestañas se colocan normalmente cerca, generalmente antes, de una serie de elementos del panel de pestañas. Consulte las Prácticas de creación de WAI-ARIA para obtener detalles sobre cómo implementar un patrón de diseño de conjunto de pestañas.
De esta manera, los usuarios saben que simplemente deben continuar leyendo después de cambiar de pestaña y volver a subir desde un panel de pestañas para cambiar de pestaña. En la mayoría de los artículos que leo, esto es muy recomendable.
Por supuesto, no debemos omitir la indicación de la semántica solo porque la implementación aún no está allí (por ejemplo, como lo hicieron la mayoría de los desarrolladores con inputmode ). Pero si plantea un problema en su caso, puede omitir el atributo aria-controls .