Técnica Técnicas generales WCAG 2.2
G208Incluir el texto visible de un control en su nombre accesible
Nombre oficial en el W3C: Incluir el texto de la etiqueta visible como parte del nombre accesible
En pocas palabras
Cada enlace, botón o campo tiene un nombre interno que usan los lectores de pantalla y los programas de control por voz. Ese nombre debe contener el texto que se ve en pantalla, con las mismas palabras y en el mismo orden. Lo mejor es que empiece por él. Así, quien dice «pulsar Enviar» activa el botón correcto.
Por qué es importante
Las personas que manejan el ordenador con la voz dicen en voz alta lo que ven: «pulsar Buscar». Su programa busca un control cuyo nombre contenga esa palabra.
Si el botón muestra «Ir» pero su nombre interno es «Buscar», la orden no funciona. Pasa mucho con aria-label, que sustituye al texto visible. Es un requisito de nivel A (criterio 2.5.3).
Cómo se hace
- Siempre que pueda, deje que el texto visible sea el propio nombre del control, sin
aria-label. - Si necesita añadir contexto, póngalo después del texto visible: «Leer más» puede ser «Leer más sobre las ayudas al alquiler».
- Al usar
aria-labeloaria-labelledby, copie el texto visible completo, letra por letra. - Para información extra que no forma parte del nombre, use
aria-describedby. No altera el nombre del control. - En campos de formulario, el nombre debe incluir el texto de su etiqueta visible.
Cómo comprobarlo
- Abra las herramientas del navegador (F12), seleccione el control y mire su «Name» en el panel «Accesibilidad».
- Compare ese nombre con el texto visible: debe contenerlo entero y en el mismo orden.
- Si es posible, pruebe con un programa de control por voz: Voice Access en Android, Control por voz en Mac o iPhone, o Dragon en Windows. Diga «pulsar» seguido del texto visible y compruebe que se activa el control.
Ejemplo
Un botón cuyo nombre no coincide con lo que se ve, y un enlace que amplía el texto visible sin romperlo.
<!-- Mal: se ve «Ir», pero el nombre es «Buscar» -->
<button aria-label="Buscar">Ir</button>
<!-- Bien: el nombre empieza por el texto visible -->
<a href="normas.html">
Normas de uso<span class="solo-lector"> del polideportivo</span>
</a>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 G208 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
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 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 G208 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.