El orden de tabulación predeterminado que proporciona la posición del DOM de los elementos HTML semánticos es el siguiente:
conveniente, pero es posible que, en ocasiones, debas modificar el orden de tabulación. Para mudanza
en el HTML es ideal, pero puede que no sea factible. En estos casos,
Puedes usar el atributo HTML tabindex para configurar explícitamente la pestaña de un elemento
posición.
tabindex se puede aplicar a cualquier elemento, aunque no es necesariamente
útil en todos los elementos y toma un rango de valores enteros. Con
tabindex, puedes especificar un orden explícito para los elementos de página enfocables
insertar un elemento que de otro modo no podría enfocarse en el orden de tabulación y quitar los elementos
del orden de tabulación. Por ejemplo:
tabindex="0": Inserta un elemento en el orden natural de pestañas. El elemento puede
Para enfocar el elemento, presiona Tab, y el elemento se puede enfocar llamando
su método focus()
tabindex="-1": Quita un elemento del orden natural de pestañas, pero el elemento
aún puede enfocarse llamando al método focus().
tabindex="5": Cualquier tabindex superior a 0 coloca ese elemento en primer plano.
del orden natural de tabulación. Si hay varios elementos con un tabindex mayor
que 0, el orden de tabulación empieza desde el valor más bajo que sea superior a cero
y va subiendo.
Esto es especialmente cierto para los elementos que no son de entrada, como encabezados, imágenes o artículos
títulos. Cuando sea posible, es mejor ordenar el código fuente de manera que la secuencia del DOM proporcione una
un orden de tabulación lógico. Si usas tabindex, restríngelo al modo interactivo personalizado.
controles como botones, pestañas, menús desplegables y campos de texto; es decir, los elementos
al que el usuario puede esperar proporcionar una entrada.
Solo agrega tabindex al contenido interactivo. Incluso si el contenido es importante, como una imagen clave, los usuarios de lectores de pantalla pueden entenderlo sin
agregar enfoque.
Administrar el enfoque a nivel de la página
A veces, tabindex es necesario para brindar una experiencia del usuario fluida. Por ejemplo:
si creas una sola página robusta con diferentes secciones de contenido, en las que no
todo el contenido es visible de forma simultánea. Esto podría implicar vínculos de navegación
cambiar el contenido visible, sin tener que actualizar la página.
En este caso, identifica el área de contenido seleccionada y asígnale una tabindex de
-1 y llama a su método focus. Esto garantiza que el contenido no aparezca en
el orden natural de tabulación. Esta técnica, llamada administración de foco, mantiene la
el contexto percibido por el usuario en sincronización con el contenido visual del sitio.
Cómo administrar el enfoque en los componentes
En algunos casos, también deberás administrar el foco a nivel de control, por ejemplo, con componentes personalizados.
Por ejemplo, el elemento select puede recibir un enfoque básico, pero una vez
allí, puedes usar las teclas de flecha para ver opciones adicionales seleccionables.
Si creas un elemento select personalizado, es importante replicarlo.
de modo que los usuarios del teclado aún puedan interactuar con tu control.
Saber qué comportamientos del teclado implementar puede ser difícil. El Autoridad de Aplicaciones de Internet enriquecidas accesibles (ARIA) Prácticas enumera los tipos de componentes y los tipos de acciones de teclado que admiten.
Quizás estás trabajando en elementos personalizados que parecerse a un conjunto de botones de selección, pero con tu aspecto único de el comportamiento de los usuarios.
<radio-group>
<radio-button>Water</radio-button>
<radio-button>Coffee</radio-button>
<radio-button>Tea</radio-button>
<radio-button>Cola</radio-button>
<radio-button>Ginger Ale</radio-button>
</radio-group>
Para determinar qué compatibilidad de teclado necesitan, consulta el Prácticas de creación de ARIA de la guía de YouTube. La sección 2 contiene una lista de patrones de diseño, que incluyen de características para las radios grupos, el componente existente que más coincide con tu nuevo elemento.
Uno de los comportamientos comunes del teclado que debería son las teclas de flecha hacia arriba/abajo/izquierda/derecha. Para agregar este comportamiento a la nueva utilizamos una técnica llamada tabindex itinerante.
El tabindex itinerante funciona estableciendo tabindex en -1 para todos los elementos secundarios, excepto para
activo actualmente.
<radio-group>
<radio-button tabindex="0">Water</radio-button>
<radio-button tabindex="-1">Coffee</radio-button>
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
El componente usa un objeto de escucha de eventos de teclado para determinar qué tecla
presiones del usuario; cuando esto sucede, establece la categoría de servicio del elemento
tabindex en -1, establece en 0 el tabindex del elemento secundario que se debe enfocar y llama a
enfoque en él.
<radio-group>
<!-- Assuming the user pressed the down arrow, we'll focus the next available child -->
<radio-button tabindex="-1">Water</radio-button>
<radio-button tabindex="0">Coffee</radio-button> // call .focus() on this element
<radio-button tabindex="-1">Tea</radio-button>
<radio-button tabindex="-1">Cola</radio-button>
<radio-button tabindex="-1">Ginger Ale</radio-button>
</radio-group>
Cuando el usuario llega al último (o el primero, según la dirección en la que moviendo el foco), el foco se vuelve a girar hacia el primero (o el último) hijo o hija.
Prueba el siguiente ejemplo. Examina el elemento en el Herramientas para desarrolladores para observar el desplazamiento del tabindex de un botón de selección a otro.
Trampas de teclado y modales
Es mejor evitar administrar el enfoque de forma manual, ya que puede conducir a situaciones complicadas. Por ejemplo, un widget de Autocomplete que intenta administrar el enfoque y captura el comportamiento de la pestaña, pero impide que el usuario la abandone hasta que termine. Esto se denomina trampa de teclado y puede ser muy frustrante para el usuario.
La sección 2.1.2 de las WCAG establece que el foco del teclado nunca debe bloquearse o atrapados en un elemento de página en particular. El usuario debe poder navegar hacia y desde todos los elementos de página usando solo el teclado.
La excepción a esta regla son los modales. Sin embargo, debes evitar el uso
tabindex cuando se crea una ventana modal Con inert, puedes hacer lo siguiente:
garantizar que los usuarios no puedan interactuar accidentalmente con un elemento (una
trampa del teclado). Usa la <dialog>.
que está inerte de forma predeterminada, para crear un modal para los usuarios y, al mismo tiempo, bloquear
y las pestañas fuera de la ventana modal. Esto permite que el usuario se enfoque en un
la selección requerida.