skip-link
El enlace de salto debe tener un destino resoluble y utilizable
Comprueba que el fragmento href de un enlace "skip to ..." resuelva a un elemento real y actualmente utilizable en el documento.
Ámbito de aplicación. Se aplica a elementos <a href="#fragment"> que son enlaces de salto por una de dos señales:
- el nombre accesible sigue una redacción habitual de enlace de salto en uno de los idiomas incluidos: "skip" o "jump to" (inglés); "aller au contenu", "passer au contenu", "accéder au contenu", "accès direct", "évitement" (francés); "springen", "überspringen", "direkt zum", "zum Inhalt" (alemán); "saltar", "ir al contenido" (español); "スキップ", "本文へ" (japonés). "jump to" está junto a "skip" porque los enlaces de salto reales usan ambas convenciones (por ejemplo, un enlace "Jump to section");
- o es el primer enlace del documento y aparece antes del elemento
main(o un elemento cuyo atributo role se resuelve en main, su primer token de rol real sin distinguir mayúsculas de minúsculas): el lugar habitual de un enlace de salto, sea cual sea su redacción.
Los demás enlaces de ancla a la misma página no son enlaces de salto y se dejan como están. Cuando la página no tiene <main> ni role="main", un elemento personalizado cuyos ElementInternals le dan el rol main (this.attachInternals().role) es el main respecto al que se mide la posición de un enlace.
Resultado esperado. El fragmento del enlace resuelve a un elemento existente en el documento (mediante un id coincidente, o un <a name="..."> heredado), y ese destino está actualmente utilizable (no oculto del árbol de accesibilidad; y, cuando hay geometría del navegador disponible, renderizado con un área que ningún ancestro reduce a nada: uno con overflow: hidden contraído a tamaño cero, u overflow: clip que lo deja fuera). Un enlace de salto cuyo destino falta o es efectivamente inutilizable no proporciona un destino de bypass fiable. Un destino vacío (sin ningún elemento ni texto dentro), como <a id="content" tabindex="-1"></a> o un <a name> heredado, no tiene área por naturaleza: seguir el enlace mueve el foco, o el punto de inicio de la navegación secuencial del foco, hasta él (HTML, "scroll to the fragment"), así que el siguiente Tab continúa desde ahí. Se mide en su lugar lo que marca: su ancestro más cercano con contenido propio, como el <main> que abre. Un destino con display: contents no tiene caja propia, y se mide por la de sus hijos.
Qué informa un hallazgo.
href: elhrefdel enlace.lean(un hallazgo con tendencia): la dirección de la tendencia,failopass, la misma que ellean.towardde la ocurrencia, para que el mapeo de un estándar, que leedata.details, pueda dirigir el hallazgo según ella. Ausente cuando el hallazgo no tiene tendencia.unusableReasonCode(un destino que no se puede usar): por qué no se puede:ACC_TREE_INELIGIBLEcuando está oculto del árbol de accesibilidad,NO_CLIENT_RECTScuando no se renderiza,ZERO_AREA_TARGETcuando él, o en un destino vacío el contenido que marca, no tiene área o queda reducido a nada.targetSelector(un destino que no se puede usar): un selector del destino.geometryCheckEnabled(un destino que no se puede usar): si se pudo medir la geometría del destino, lo que requiere un navegador.viewport.width,viewport.height(un destino cuya geometría se midió): el viewport en el que se maquetó la página, en píxeles CSS. Un destino oculto con un ancho puede ser utilizable con otro.
Estos campos de data.details ayudan a leer y reproducir un hallazgo. Salvo reasonCode y los pocos campos que Esquema de salida indica como estables, no son un contrato estable: un campo puede cambiar de nombre o desaparecer en una versión menor, así que no construyas sobre ellos.
Ejemplos
<a href="#target">Skip to content</a><div id="target">Target content</div>
El destino del fragmento existe y es utilizable.
<a href="#missing">Skip to main content</a>
El destino del fragmento del enlace no existe en ninguna parte de la página, así que activarlo no lleva a ningún sitio.
<a href="#contenu">Aller au contenu</a>
También se reconoce la redacción francesa de los enlaces de salto, y falta el destino.
Cómo comprobarlo
Cuando esta regla no puede decidir, informa cantTell y deja la pregunta a una persona. Cada pregunta que puede plantear aparece aquí bajo su código de motivo, con los pasos para responderla. Un hallazgo lleva los mismos pasos en howToCheck, en el idioma del análisis. Consulta Esquema de salida.
SKIP_LINK_TARGET_MISSING
- Cargar la página, pulsar Tab una o dos veces hasta que aparezca el enlace de salto que indica el informe, y anotar su href.
- Pulsar Intro para seguirlo.
- Pulsar Tab una vez más y ver dónde queda el foco.
Se cumple. Al seguir el enlace se pasa al contenido principal y el siguiente Tab va al primer control que contiene.
No se cumple. No ocurre nada o el foco se queda arriba, porque ningún elemento coincide con el destino del enlace, así que el enlace no permite saltar el contenido repetido (buena práctica, G1).
SKIP_LINK_TARGET_UNUSABLE
- Cargar la página con el ancho de ventana que da el informe (si lo da), pulsar Tab hasta que aparezca el enlace de salto y pulsar Intro.
- Observar si la página se desplaza hasta el destino y si la zona de destino es visible.
- Pulsar Tab una vez más y ver dónde queda el foco.
Se cumple. La página pasa al contenido principal visible y el siguiente Tab va al primer control que contiene.
No se cumple. El destino está oculto, no se muestra o no tiene tamaño, así que el foco no pasa más allá del contenido repetido (buena práctica, G1).