Un skip link \u2014o \u00absaltar al contenido\u00bb\u2014 es un enlace oculto que aparece cuando el usuario pulsa la tecla Tab por primera vez en la p\u00e1gina. Al hacer clic, puerta directamente al contenido principal, salt\u00e1ndose el men\u00fa de navegaci\u00f3n y cualquier otro bloque repetitivo que aparezca en todas las p\u00e1ginas.<\/p>\n
El criterio WCAG 2.4.1 exige que los webs tengan un mecanismo para evitar bloques de contenido que se repiten en m\u00faltiples p\u00e1ginas. El skip link es la implementaci\u00f3n est\u00e1ndar para cumplirlo.<\/p>\n
Imag\u00ednate navegar por un web con teclado. En cada p\u00e1gina nueva, tienes que tabular por todos los elementos del men\u00fa (7, 8, 10 links de navegaci\u00f3n) antes de poder acceder al contenido que te interesa. P\u00e1gina detr\u00e1s p\u00e1gina. Cada vez.<\/p>\n
Para usuarios con discapacidad motriz que navegan con teclado, o para usuarios de lectores de pantalla, esto es extremadamente ineficiente y frustrante. El skip link soluciona este problema con una sola l\u00ednea de c\u00f3digo.<\/p>\n
A\u00f1\u00e1delo como primer elemento del El enlace tiene que ser invisible para los usuarios de rat\u00f3n pero visible cuando recibe el focus por teclado:<\/p>\n El error m\u00e1s com\u00fan: el elemento destino (lo Otro error: el skip link tiene Muchos temas WordPress modernos incluyen un skip link por defecto. Divi incluye un b\u00e1sico. Si tu tema no tiene, puedes a\u00f1adirlo editando el fichero header.php o usando el hook Puedes verificar si tu web tiene skip link funcional con la herramienta de autoevaluaci\u00f3 de webaccessible.cat, o simplemente pulsando Tab en tu web: si el primer elemento que recibe focus es un link de \u00abSaltar al contenido\u00bb, todo funciona correctamente.<\/p>\n 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><body><\/code>:<\/p>\n<body><\/code>
\n <a href=\"#contingut-principal\" class=\"skip-link\"><\/code>
\n Saltar al contingut principal<\/code>
\n <\/a><\/code>
\n <header>...<\/code>
\n <main id=\"contingut-principal\">...<\/code><\/p>\nCSS: visible solo en focus<\/h3>\n
.skip-link {<\/code>
\n position: absolute;<\/code>
\n top: -100px;<\/code>
\n left: 16px;<\/code>
\n background: #000;<\/code>
\n color: #fff;<\/code>
\n padding: 8px 16px;<\/code>
\n z-index: 9999;<\/code>
\n text-decoration: none;<\/code>
\n}<\/code><\/p>\n.skip-link:focus {<\/code>
\n top: 16px;<\/code>
\n}<\/code><\/p>\nErrores habituales<\/h2>\n
<main id=\"contingut-principal\"><\/code>) no existe o tiene un ID diferente. El link lleva a #contenido-principal pero el main tiene id=\u00bbmain-content\u00bb. El resultado es un skip link que no funciona.<\/p>\ndisplay:none<\/code> o visibility:hidden<\/code> en lugar de estar posicionado fuera de la pantalla. Un elemento con display:none<\/code> no puede recibir focus y por tanto no funciona para usuarios de teclado.<\/p>\nWordPress y skip links<\/h2>\n
wp_body_open<\/code>.<\/p>\n