Técnica HTML WCAG 2.2 obsoleta
H93Que cada valor de id se use una sola vez en la página (técnica obsoleta)
Nombre oficial en el W3C: Garantizar que los atributos id sean únicos en una página web
Técnica obsoleta: el W3C ya no la recomienda. |
En pocas palabras
Técnica obsoleta desde WCAG 2.2, que eliminó el criterio 4.1.1 de análisis del código. Pedía que ningún id se repitiera en la página. Ya no cuenta para ese criterio, pero un id repetido aún puede romper etiquetas y descripciones, y eso sí incumple otros criterios.
Por qué es importante
El atributo id sirve para identificar un elemento concreto. Muchas relaciones de accesibilidad dependen de él: <label for>, aria-labelledby, aria-describedby o las celdas de encabezado de una tabla.
Si dos elementos comparten id, el navegador suele quedarse con el primero. Por ejemplo, en un formulario con dos campos id="nombre", el segundo campo se queda sin etiqueta para el lector de pantalla.
Cómo se hace
- Dé a cada elemento un
iddistinto dentro de la página. - Cuidado con los componentes que se repiten (tarjetas, acordeones, formularios incluidos dos veces): genere un
idúnico para cada copia. - Revise que
for,aria-labelledbyyaria-describedbyapuntan al elemento correcto. - Pase la página por un validador de vez en cuando: avisa de los
idrepetidos.
Cómo comprobarlo
- Pase la página por el validador del W3C (validator.w3.org) y busque el aviso «Duplicate ID».
- Para cada id repetido, compruebe si lo usa una etiqueta, una descripción o una tabla.
- Con las herramientas del navegador (F12, pestaña Accesibilidad), confirme que los campos afectados tienen el nombre correcto.
- Recuerde: según WCAG 2.2 un id repetido ya no es un fallo por sí mismo, solo si provoca otro problema.
Ver el texto completo del W3C (traducción al español)
Esta es una traducción no oficial al español de la técnica H93 de Techniques for WCAG 2.2, del W3C. Puede contener errores. El único documento oficial y normativo es la versión original en inglés, publicada en el sitio web del W3C.
Aplicabilidad
Todas las páginas HTML
Descripción
El objetivo de esta técnica es evitar los errores que se producen cuando un mismo atributo id se utiliza varias veces en la misma página. Estos errores pueden evitarse asegurándose de que la página no tenga valores de id duplicados. Esto puede hacerse manualmente o utilizando el mecanismo de HTML para especificar la tecnología y su versión y validando el documento respecto a esta condición. Hay varios validadores que puede usar quien desarrolla; los informes de validación suelen mencionar este tipo de error. La declaración de tipo de documento no es estrictamente necesaria para este tipo de evaluación, pero especificarla facilita el uso de un validador.
Ejemplos
Atributos id duplicados en elementos de formulario
En este ejemplo, los campos de nombre y de apellidos tienen ambos un atributo id con el mismo valor. Debido a la forma en que se calculan los nombres accesibles, esto hace que el campo de apellidos no tenga nombre accesible.
<label for="fname">First Name</label>
<input autocomplete="given-name" id="fname" type="text">
<label for="lname">Last Name</label>
<input autocomplete="family-name" id="fname" type="text">Validadores de HTML
Las páginas HTML incluyen una declaración de tipo de documento (a veces denominada declaración !DOCTYPE). Quien desarrolla puede usar validadores en línea o sin conexión (véanse los Recursos más abajo) para comprobar que los valores de los atributos id se usan solo una vez en la página. El validador del W3C, por ejemplo, informará de «Duplicate ID» (ID duplicado) cuando encuentre los usos posteriores de un valor de id.
Pruebas
Procedimiento
- Comprobar que todos los valores de los atributos
idson únicos en la página.
Resultados esperados
- La comprobación n.º 1 es verdadera.
Recursos
-
HTML -
idattribute (el atributo id) - Nu HTML Checker
- Do not forget to add a doctype (no olvide añadir un doctype), de la W3C Quality Assurance Initiative, explica qué son los doctypes y por qué debe usarlos
Para otros recursos, consulte G134: Validar las páginas web.
Cómo lo comprobamos en ADDAW
En cada auditoría de ADDAW revisamos esta técnica página a página y le entregamos los errores con capturas y la forma de corregirlos.
Basado en la técnica H93 del W3C (WCAG 2.2). Explicación y ejemplos: ADDAW. Traducción no oficial del texto del W3C © W3C, licencia de documentos del W3C. ¿Ha visto un error? Escríbanos.