Técnica Técnicas generales WCAG 2.2
G208Incluir el texto de la etiqueta visible como parte del nombre accesible
En resumen
Esta técnica pide que, cuando el nombre accesible de un control (enlace, botón, campo) sea distinto de su etiqueta visible, el texto visible aparezca íntegro dentro de ese nombre accesible, preferiblemente al principio. Beneficia a quienes manejan la web por voz, que pronuncian lo que ven en pantalla para activar controles. Úsela siempre que amplíe un nombre accesible con texto oculto, aria-label o aria-labelledby.
Aplicabilidad
Esta técnica se aplica a todas las tecnologías web que incluyen controles interactivos (como enlaces o campos de formulario)
Descripción
El objetivo de esta técnica es garantizar que los usuarios de entrada por voz puedan manejar el contenido web de forma fiable.
Cuando los usuarios de entrada por voz interactúan con una página web, normalmente pronuncian una orden seguida de la referencia a alguna etiqueta visible (como el texto de un botón, el texto de un enlace o el texto que etiqueta un campo de entrada). Por ejemplo, pueden decir «clic buscar» para activar un botón de búsqueda.
Cuando el software de reconocimiento de voz procesa la entrada hablada y busca coincidencias, utiliza el «nombre accesible» de los controles, que puede ser distinto de la etiqueta visible. Por ejemplo, un botón situado tras un campo de búsqueda puede contener el texto "go" (ir), pero usar un atributo aria-label invisible con el valor "search" (buscar). Dado que aria-label tiene prioridad sobre el texto incluido en el botón, el nombre accesible de este botón será "search", no "go". La especificación Accessible Name and Description Computation define cómo se construye el nombre accesible.
En las situaciones en las que la etiqueta visible se considere insuficiente como nombre accesible, es posible complementar el texto del nombre accesible. Sin embargo, para cumplir el criterio de conformidad 2.5.3 Etiqueta en el nombre, la cadena de texto que forma la etiqueta visible debe aparecer en su totalidad dentro del nombre accesible. En la mayoría de las situaciones en las que se considere necesario añadir contexto, se recomienda que el texto visible preceda al texto adicional. Cuando quien desarrolla se asegura de que la etiqueta visible de un control esté incluida, intacta, en el nombre accesible de ese control, los usuarios de entrada por voz pueden confiar en que su entrada se interpretará correctamente.
Puede resultar más apropiado incluir el contexto adicional mediante la descripción accesible (por ejemplo, usando aria-describedby). Esto tiene la gran ventaja de mejorar el contexto para algunos usuarios de tecnologías de asistencia sin alterar el nombre accesible.
Ejemplos
El texto del enlace coincide con el comienzo del nombre accesible
Un enlace contiene texto visible y texto oculto. Ambos juntos forman el nombre accesible del enlace. El texto visible va primero. La idea es que el enlace resulte más descriptivo para los usuarios de tecnologías de asistencia.
<p>Go to <a href="code-of-conduct.html">Code of conduct <span class="hidden_accessibly"> of ACME Corporation</span></a><p>
Texto de enlace genérico concatenado con el encabezado
Un enlace genérico se combina con el encabezado del párrafo para darle contexto. Es una variante del primer ejemplo, esta vez usando aria-labelledby. La ventaja de esta implementación es que utiliza texto visible ya existente en la página, por lo que es más probable que se traduzca correctamente en cualquier proceso de localización.
<h4 id="poor">Insufficient Link Names Invade Community</h4>
<p>Citizens are reeling from the growing invasion of useless "read more" links appearing in their online resources. <a href="poor.html" aria-labelledby="generic poor"><span id="generic">More...</span></a>
Insufficient Link Names Invade Community
[El siguiente enlace no abre nada] Citizens are reeling from the growing invasion of useless "read more" links appearing in their online resources. More...
Texto del enlace incluido en aria-label
Cuando dos cadenas no pueden combinarse de forma gramatical o fluida mediante aria-labelledby, puede usarse aria-label para crear un nombre nuevo que incluya la etiqueta visible.
...end of news story. <a href="poor.html" aria-label="Read more about Insufficient link names">Read more</a>
El texto visible del botón coincide con el comienzo del nombre accesible
El texto visible dentro de un elemento button coincide con el comienzo del nombre accesible, que además incluye texto oculto. La idea del texto oculto es que el botón resulte más descriptivo para los usuarios de tecnologías de asistencia.
<button>Send <span class="accessibly-hidden"> Mail</span></button>
Recursos
Pruebas
Procedimiento
Para todos los controles con una etiqueta visible, comprobar que:
- El nombre accesible del control contiene las mismas letras, en el mismo orden, que la etiqueta visible.
Resultados esperados
- La comprobación n.º 1 es verdadera.
Si esta es una técnica suficiente para un criterio de conformidad, no superar este procedimiento de prueba no significa necesariamente que el criterio de conformidad no se haya satisfecho de otra manera, sino solo que esta técnica no se ha implementado correctamente y no puede utilizarse para declarar la conformidad.
Cómo lo comprobamos en ADDAW
En las auditorías de accesibilidad de ADDAW revisamos cada criterio de conformidad siguiendo este catálogo de técnicas: comprobamos si la web aplica una técnica suficiente y documentamos cada fallo común con capturas y el código afectado, para que el equipo de desarrollo sepa exactamente qué corregir. Los informes siguen la metodología del Observatorio de Accesibilidad y la norma UNE-EN 301 549.
Fuente y licencia
Traducción al español, no oficial, realizada por ADDAW a partir de la técnica G208 del documento «Techniques for WCAG 2.2» del W3C (versión del repositorio público del W3C a 22/10/2026). Copyright © W3C® (MIT, ERCIM, Keio, Beihang). Se publica conforme a la licencia de documentos del W3C. El texto normativo de referencia es el original en inglés; si detecta un error en la traducción, escríbanos.
