{"id":863,"date":"2026-03-24T11:53:48","date_gmt":"2026-03-24T11:53:48","guid":{"rendered":"https:\/\/webaccessible.cat\/guia-wcag\/navegacion-por-teclado\/"},"modified":"2026-05-29T16:48:18","modified_gmt":"2026-05-29T16:48:18","slug":"navegacion-por-teclado","status":"publish","type":"guia_wcag","link":"https:\/\/webaccessible.cat\/es\/guia-wcag\/navegacion-por-teclado\/","title":{"rendered":"Navegaci\u00f3n por teclado"},"content":{"rendered":"<h2>\u00bfQui\u00e9n necesita la navegaci\u00f3n por teclado?<\/h2>\n<p>La navegaci\u00f3n por teclado no es solo para personas con discapacidad visual. La necesitan principalmente usuarios con discapacidad motriz \u2014tremores, p\u00e9rdida de movilidad de las manos, dificultades para controlar el rat\u00f3n\u2014 que usan el teclado como dispositivo principal. Tambi\u00e9n la usan personas que utilizan dispositivos de control alternativo (conmutadores, barras de jefe) que emiten pulsaciones de teclado.<\/p>\n<p>El criterio WCAG 2.1.1 exige que todas las funcionalidades disponibles con rat\u00f3n sean accesibles con teclado, sin excepciones para funciones que requieran un trayecto de rat\u00f3n dependiente del camino.<\/p>\n<h2>Las teclas b\u00e1sicas de navegaci\u00f3n<\/h2>\n<ul>\n<li><strong>Tab:<\/strong> avanza al siguiente elemento interactivo (link, bot\u00f3n, campo de formulario).<\/li>\n<li><strong>Shift + Tab<\/strong>: retrocede al elemento anterior.<\/li>\n<li><strong>Enter \/ Espacio:<\/strong> activa el elemento que tiene el foco (bot\u00f3n, link, checkbox).<\/li>\n<li><strong>Flechas:<\/strong> navega dentro de componentes como men\u00fas desplegables, grupos de radio, pesta\u00f1as.<\/li>\n<li><strong>Escape:<\/strong> cierra elementos como modales, men\u00fas desplegables, tooltips.<\/li>\n<\/ul>\n<h2>La prueba b\u00e1sica de teclado<\/h2>\n<p>Puedes hacer una prueba b\u00e1sica de accesibilidad de teclado en menos de 5 minutos:<\/p>\n<ol>\n<li>Abre tu web en un navegador.<\/li>\n<li>Cierra el rat\u00f3n o ap\u00e1rtalo.<\/li>\n<li>Pulsa <strong>Tab<\/strong> y observa qu\u00e9 elemento recibe el foco (tiene que ser visible).<\/li>\n<li>Contin\u00faa pulsando Tab por todos los elementos interactivos.<\/li>\n<li>Comprova que pots activar cada bot\u00f3, link i camp de formulari.<\/li>\n<li>Comprueba que los men\u00fas desplegables se abren y se pueden navegar.<\/li>\n<li>Comprueba que los modales o popups se pueden cerrar con <strong>Escape<\/strong>.<\/li>\n<\/ol>\n<h2>El focus visible<\/h2>\n<p>Uno de los errores m\u00e1s habituales: el focus visible se elimina por razones est\u00e9ticas. Muchos dise\u00f1adores y developers eliminan el outline del foco porque \u00abqueda feo\u00bb. Pero sin indicador de focus, el usuario de teclado no sabe donde est\u00e1 en la p\u00e1gina.<\/p>\n<p>WCAG 2.4.7 exige que el focus del teclado sea siempre visible. Puedes personalizar el estilo del focus para integrarlo con el dise\u00f1o, pero no puedes eliminarlo:<\/p>\n<p><code>\/* MAL: elimina el focus *\/<br \/>\n*:focus { outline: none; }<\/code><\/p>\n<p><code>\/* B\u00c9: personalitza el focus *\/<br \/>\n*:focus {<br \/>\noutline: 2px solid #a9552d;<br \/>\noutline-offset: 2px;<br \/>\n}<\/code><\/p>\n<h2>Zonas con scroll inaccesibles<\/h2>\n<p>La regla axe-core <strong>scrollable-region-focusable<\/strong> detecta un problema espec\u00edfico: zonas de la p\u00e1gina que tienen scroll (overflow: auto o scroll) pero que no su accesibles por teclado porque no reciben focus.<\/p>\n<p>Si una tabla de datos, un listado de elementos o una zona de contenido puede hacer scroll con el rat\u00f3n pero no con el teclado, es un error de accesibilidad. La soluci\u00f3n es a\u00f1adir <code>tabindex=\"0\"<\/code> al elemento para hacerlo focusable:<\/p>\n<p><code>&lt;div class=\"taula-scroll\" tabindex=\"0\"&gt;<br \/>\n&lt;!-- contingut amb scroll horitzontal --&gt;<br \/>\n&lt;\/div&gt;<\/code><\/p>\n<h2>Errores habituales en webs WordPress<\/h2>\n<p>Los errores de navegaci\u00f3n por teclado m\u00e1s frecuentes en webs WordPress son: men\u00fas desplegables que se abren en hover pero no en focus de teclado, modales que no devuelven el foco al bot\u00f3n que les abri\u00f3 al cerrarse, sliders y carruseles sin controles de teclado, y mapas integrados (Google Maps) sin alternativa accesible.<\/p>\n<p>Con la herramienta de autoevaluaci\u00f3n de webaccessible.cat puedes detectar autom\u00e1ticamente zonas con scroll no accesibles. Para los otros errores, la prueba manual con teclado es imprescindible.<\/p>\n<div class=\"et_pb_section_0 et_pb_section et_pb_section--fixed et_section_regular et_flex_section et-interaction-target-03o12ngdyu\" data-interaction-target=\"03o12ngdyu\"><div class=\"et_pb_row_0 et_pb_row et_flex_row\"><div class=\"et_pb_column_0 et_pb_column et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\"><div class=\"et_pb_text_0 et_pb_text et_pb_bg_layout_light et_pb_module et_flex_module preset--module--divi-text--default\"><div class=\"et_pb_text_inner\"><p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.<\/p>\n<\/div><\/div><\/div><div class=\"et_pb_column_1 et_pb_column et-last-child et_flex_column et_pb_css_mix_blend_mode_passthrough et_flex_column_24_24 et_flex_column_24_24_tablet et_flex_column_24_24_phone\"><div class=\"et_pb_icon_0 et_pb_icon et_pb_module et_flex_module\" data-interaction-trigger=\"4bs8z0k0z5\"><span class=\"et_pb_icon_wrap\"><span class=\"et-pb-icon\">M<\/span><\/span><\/div><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Muchos usuarios con discapacidad motriz navegan exclusivamente con teclado. Aprende como verificar que tu web es navegable con Tab, Entero y las flechas, y qu\u00e9 elementos fallan habitualmente. <\/p>\n","protected":false},"featured_media":0,"template":"","class_list":["post-863","guia_wcag","type-guia_wcag","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/guia_wcag\/863","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/guia_wcag"}],"about":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/types\/guia_wcag"}],"wp:attachment":[{"href":"https:\/\/webaccessible.cat\/es\/wp-json\/wp\/v2\/media?parent=863"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}