{"id":1365,"date":"2026-05-29T07:00:00","date_gmt":"2026-05-29T05:00:00","guid":{"rendered":"https:\/\/programaraciegas.net\/?p=1365"},"modified":"2026-05-14T10:08:34","modified_gmt":"2026-05-14T08:08:34","slug":"atributo-tabindex-y-su-efecto-en-la-accesibilidad","status":"publish","type":"post","link":"https:\/\/programaraciegas.net\/?p=1365","title":{"rendered":"Atributo Tabindex y su efecto en la accesibilidad"},"content":{"rendered":"

El atributo tabindex<\/strong> forma parte de HTML y permite modificar la forma en la que un elemento recibe el foco del teclado. Su uso puede mejorar la accesibilidad de una interfaz, pero tambi\u00e9n puede empeorarla si se utiliza para corregir problemas que deber\u00edan resolverse con una estructura HTML adecuada.
La navegaci\u00f3n con teclado es una parte esencial de la accesibilidad web. Muchas personas no utilizan rat\u00f3n, bien porque trabajan con lector de pantalla, porque emplean otros productos de apoyo o porque simplemente prefieren desplazarse por la interfaz mediante la tecla de tabulaci\u00f3n y otros comandos del teclado. En esos casos el foco indica en qu\u00e9 elemento se encuentra la interacci\u00f3n en cada momento.
Los elementos de HTML ya forman parte del orden de tabulaci\u00f3n por defecto. Un enlace con href<\/strong>, un bot\u00f3n, un campo de formulario o un control nativo pueden recibir el foco sin necesidad de a\u00f1adir atributos adicionales. Esto es importante porque HTML ya incorpora mucho comportamiento accesible cuando se utiliza correctamente.
El problema aparece cuando se intenta forzar el comportamiento de una p\u00e1gina mediante tabindex<\/strong> sin tener en cuenta las expectativas de las personas que navegan con teclado.<\/p>\n

Qu\u00e9 hace tabindex<\/h2>\n

El atributo tabindex<\/strong> permite alterar el orden natural del foco. Puede hacer que un elemento no interactivo pueda recibir el foco, puede retirar un elemento interactivo del orden de tabulaci\u00f3n y tambi\u00e9n puede reorganizar el orden en el que se recorren los elementos de la p\u00e1gina.
Su valor es num\u00e9rico. Cuando se utiliza tabindex=\u00bb-1″, el elemento puede recibir el foco mediante JavaScript, pero no queda incluido en la navegaci\u00f3n secuencial con la tecla Tab. Cuando se utiliza tabindex=\u00bb0″, el elemento entra en el orden de tabulaci\u00f3n respetando la posici\u00f3n que ocupa en el c\u00f3digo HTML. Cuando se utiliza un valor positivo, como tabindex=\u00bb1″ o tabindex=\u00bb2″, se fuerza un orden de navegaci\u00f3n distinto al orden natural del documento.
En la pr\u00e1ctica, los valores positivos suelen ser una mala se\u00f1al. Si el orden de foco no coincide con el orden visual o l\u00f3gico de la p\u00e1gina, lo correcto normalmente no es a\u00f1adir n\u00fameros para reconstruir artificialmente la navegaci\u00f3n. Lo adecuado es revisar la estructura del HTML y utilizar CSS para ajustar la presentaci\u00f3n visual cuando sea necesario.<\/p>\n

<a href=\"\/inicio\">Inicio<\/a>
<div tabindex=\"0\">Contenido desplazable<\/div>
<a href=\"\/contacto\">Contacto<\/a><\/pre>\n
En este ejemplo, el div entra en el orden de tabulaci\u00f3n en el lugar que ocupa dentro del documento. Esto puede ser correcto si ese contenedor tiene alg\u00fan comportamiento interactivo real. Pero si se trata solo de un bloque de texto, a\u00f1adirlo al foco puede introducir ruido innecesario en la navegaci\u00f3n.<\/p>\n
El foco no debe sustituir a la sem\u00e1ntica<\/h2>\n
Una regla sencilla para evaluar el uso de tabindex consiste en preguntarse si el elemento deber\u00eda ser interactivo. Si se necesita un bot\u00f3n, se debe utilizar un elemento button. Si se necesita un enlace, se debe utilizar un enlace. Si se necesita un campo de formulario, se debe utilizar el control correspondiente.<\/p>\n
Crear un bot\u00f3n con un div y a\u00f1adirle tabindex=\u00bb0″ no convierte ese elemento en un bot\u00f3n completo. Puede recibir el foco, pero no incorpora autom\u00e1ticamente el comportamiento esperado con teclado, la sem\u00e1ntica adecuada ni la comunicaci\u00f3n correcta con los productos de apoyo. En muchos casos, ese tipo de soluci\u00f3n obliga a reproducir manualmente caracter\u00edsticas que HTML ya ofrece de forma nativa.<\/p>\n
La accesibilidad no consiste solo en que algo pueda recibir el foco. Tambi\u00e9n importa qu\u00e9 anuncia el lector de pantalla, qu\u00e9 teclas activan el componente, c\u00f3mo se informa del estado, c\u00f3mo se integra en el flujo del documento y si la interacci\u00f3n coincide con lo que la persona usuaria espera.<\/p>\n
Cu\u00e1ndo puede ser \u00fatil tabindex=\u201d-1\u201d<\/h2>\n
El valor -1 resulta \u00fatil cuando un elemento no debe aparecer en la navegaci\u00f3n normal con Tab, pero necesita recibir el foco en una situaci\u00f3n concreta. Un caso habitual es un mensaje de error despu\u00e9s de enviar un formulario.<\/p>\n
Si una persona env\u00eda un formulario y existen errores, mover el foco al resumen de errores puede ayudar a comprender qu\u00e9 ha ocurrido. Para una persona que navega con teclado, evita tener que volver a recorrer toda la p\u00e1gina hasta localizar el problema. Para una persona que utiliza lector de pantalla, permite que el mensaje sea anunciado en el momento adecuado.<\/p>\n
<div id=\"errores\" tabindex=\"-1\">
Hay errores en el formulario. Revisa los campos indicados.
<\/div><\/pre>\n
Despu\u00e9s, mediante JavaScript, se puede enviar el foco a ese elemento cuando se detecten errores.<\/p>\n
document.getElementById('errores').focus();<\/pre>\n
Este patr\u00f3n tambi\u00e9n puede ser \u00fatil en ventanas modales, paneles que se abren din\u00e1micamente o zonas de la interfaz que aparecen como consecuencia de una acci\u00f3n de la persona usuaria. El objetivo no es a\u00f1adir m\u00e1s paradas al teclado, sino colocar el foco en un punto l\u00f3gico cuando cambia el contexto de interacci\u00f3n.<\/p>\n
Cu\u00e1ndo puede ser \u00fatil tabindex=\u201c0\u201d<\/h2>\n
El valor 0 debe utilizarse con m\u00e1s cuidado. Su funci\u00f3n es incorporar un elemento al orden natural de tabulaci\u00f3n. Esto puede tener sentido cuando existe una zona que debe poder recibir interacci\u00f3n con teclado, pero que por defecto no forma parte del orden de foco.<\/p>\n
Un ejemplo frecuente son los contenedores con desplazamiento interno creados con CSS mediante overflow.<\/p>\n
Si un bloque tiene contenido desplazable y una persona solo utiliza el teclado, necesita poder situar el foco en esa regi\u00f3n para desplazarse por ella. En ese caso, tabindex=\u00bb0″ puede hacer que el contenedor sea alcanzable saltando con la tecla de tabulador.<\/p>\n
<section aria-labelledby=\"condiciones\" tabindex=\"0\" style=\"overflow: auto; max-height: 12rem;\">
<h2 id=\"condiciones\">Condiciones de uso<\/h2>
<p>Texto de las condiciones de uso...<\/p>
<\/section><\/pre>\n
En este tipo de componentes no es suficiente con hacer que el contenedor reciba el foco. Tambi\u00e9n conviene proporcionar una etiqueta accesible y una estructura sem\u00e1ntica clara. Una persona que usa lector de pantalla debe poder entender qu\u00e9 contiene esa regi\u00f3n y por qu\u00e9 ha llegado hasta ella.<\/p>\n
Los valores positivos rompen expectativas<\/h2>\n
Los valores positivos de tabindex permiten definir un orden de tabulaci\u00f3n independiente del orden del documento.<\/p>\n
Esta pr\u00e1ctica debe realizarse con mucho cuidado ya que es muy sencillo romper el orden coherente y comprensible del orden de tabulaci\u00f3n.<\/p>\n
Cuando el foco salta de una parte a otra de la p\u00e1gina en un orden inesperado, la interfaz se vuelve m\u00e1s dif\u00edcil de comprender. La persona que navega con teclado puede perder la relaci\u00f3n entre la posici\u00f3n visual, la estructura del contenido y el punto real de interacci\u00f3n. Para quien utiliza lector de pantalla, esa separaci\u00f3n entre orden del c\u00f3digo, orden visual y orden de foco puede resultar especialmente confusa.<\/p>\n
<div tabindex=\"3\">Tercer elemento<\/div>
<div tabindex=\"1\">Primer elemento<\/div>
<div tabindex=\"2\">Segundo elemento<\/div><\/pre>\n
Este c\u00f3digo fuerza una secuencia que no coincide con el orden del documento. Si el dise\u00f1o necesita mostrar visualmente los elementos de otra manera, CSS deber\u00eda encargarse de la presentaci\u00f3n. El HTML debe conservar un orden l\u00f3gico, comprensible y coherente.<\/p>\n
Componentes personalizados<\/h2>\n
Existen componentes interactivos que no tienen una equivalencia directa en HTML nativo. Un sistema de pesta\u00f1as, determinados widgets complejos o algunos controles de aplicaci\u00f3n pueden requerir una gesti\u00f3n espec\u00edfica del foco.<\/p>\n
En estos casos, tabindex puede formar parte de la soluci\u00f3n, pero no debe utilizarse de forma aislada. Un patr\u00f3n de pesta\u00f1as accesible, por ejemplo, puede necesitar que la pesta\u00f1a activa tenga tabindex=\u00bb0″ y que las pesta\u00f1as inactivas tengan tabindex=\u00bb-1″ para permitir una navegaci\u00f3n controlada con flechas y una gesti\u00f3n correcta del foco.<\/p>\n
Revisar el uso de tabindex<\/h2>\n
Una revisi\u00f3n de accesibilidad deber\u00eda incluir la b\u00fasqueda de usos de tabindex en el c\u00f3digo. Cada aparici\u00f3n merece una comprobaci\u00f3n concreta. Si un elemento nativo interactivo tiene tabindex=\u00bb0″, probablemente no lo necesita. Si un elemento no interactivo tiene tabindex=\u00bb0″, conviene revisar si realmente debe recibir el foco. Si aparece un valor positivo, normalmente deber\u00eda corregirse el orden del documento en lugar de mantener ese valor.<\/p>\n
Tambi\u00e9n es importante revisar los casos con tabindex=\u00bb-1″. No son necesariamente incorrectos, pero deben estar asociados a una gesti\u00f3n del foco clara. Si ning\u00fan script env\u00eda el foco a ese elemento, puede que el atributo no est\u00e9 cumpliendo ninguna funci\u00f3n.<\/p>\n
Las herramientas autom\u00e1ticas pueden localizar estos casos, pero la decisi\u00f3n final requiere criterio humano. Una herramienta puede indicar que existe un tabindex, pero no siempre puede determinar si su uso responde a una necesidad real de interacci\u00f3n.<\/p>\n
Una herramienta que debe usarse con criterio<\/h2>\n
tabindex no es un atributo prohibido. Es una herramienta potente para gestionar el foco en situaciones concretas. Pero precisamente por afectar directamente a la navegaci\u00f3n con teclado, debe utilizarse con prudencia.<\/p>\n
En una p\u00e1gina bien estructurada, la mayor parte del orden de tabulaci\u00f3n deber\u00eda venir dado por el propio HTML. Los enlaces, botones y campos de formulario ya tienen comportamiento accesible cuando se usan correctamente. A\u00f1adir tabindex sin una raz\u00f3n clara puede introducir barreras donde antes no las hab\u00eda.<\/p>\n","protected":false},"excerpt":{"rendered":"
El atributo tabindex forma parte de HTML y permite modificar la forma en la que un elemento recibe el foco del teclado. Su uso puede mejorar la accesibilidad de una interfaz, pero tambi\u00e9n puede empeorarla si se utiliza para corregir problemas que deber\u00edan resolverse con una estructura HTML adecuada.La navegaci\u00f3n con teclado es una parte … <\/p>\n
Continuar leyendo \u00abAtributo Tabindex y su efecto en la accesibilidad\u00bb<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,542],"tags":[11,333,94],"class_list":["post-1365","post","type-post","status-publish","format-standard","hentry","category-desarrollo","category-html-2","tag-accesibilidad-2","tag-html","tag-web"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1365","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1365"}],"version-history":[{"count":0,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=\/wp\/v2\/posts\/1365\/revisions"}],"wp:attachment":[{"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1365"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1365"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/programaraciegas.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1365"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}