Addaw, ir a inicio Donar

Técnica ARIA WCAG 2.2

ARIA1Relacionar instrucciones y ayudas con su control mediante aria-describedby

Nombre oficial en el W3C: Usar la propiedad aria-describedby para proporcionar una etiqueta descriptiva a los controles de la interfaz de usuario

En pocas palabras

El atributo aria-describedby une un control, como un campo o un botón, con un texto de ayuda que ya está en la página. Así, el lector de pantalla lee primero el nombre del control y después esa ayuda. Sirve para instrucciones, formatos esperados o avisos que no caben en la etiqueta.

Por qué es importante

Una persona ciega usa un lector de pantalla (programa que lee en voz alta lo que hay en la pantalla). Suele saltar de campo en campo con el tabulador. Si las instrucciones están en un párrafo aparte, no las oye al llegar al campo.

Por ejemplo, en el registro de una sede electrónica, la regla «mínimo 8 caracteres y un número» aparece debajo de la contraseña. Sin esa relación, la persona descubre la regla cuando el formulario le da error.

Cómo se hace

  1. Mantenga la etiqueta visible del campo con <label>. La descripción completa a la etiqueta; no la sustituye.
  2. Ponga el texto de ayuda en un elemento con un id único, por ejemplo id="ayuda-clave".
  3. Añada al control aria-describedby="ayuda-clave". El texto tiene que estar en la misma página, no en otro documento.
  4. Si hay varias ayudas, escriba sus id separados por espacios, en el orden en que deben leerse.
  5. También sirve en botones. Un botón «Eliminar cuenta» puede enlazar el aviso de que la acción no se puede deshacer.
  6. Use textos breves. El lector de pantalla los leerá cada vez que la persona llegue al control.

Cómo comprobarlo

  1. Abra las herramientas del navegador (tecla F12), seleccione el control y busque el panel «Accesibilidad». En «Description» debe aparecer el texto de ayuda.
  2. Compruebe que cada id de aria-describedby existe en la página y no está repetido.
  3. Con NVDA o VoiceOver, llegue al campo con el tabulador. Debe oír la etiqueta y, a continuación, la ayuda.
  4. Lea la ayuda y confirme que de verdad aporta información sobre ese control.

Ejemplo

Campo de contraseña de un formulario de registro con sus requisitos asociados.

<label for="clave">Contraseña</label>
<input type="password" id="clave" aria-describedby="ayuda-clave">
<p id="ayuda-clave">
  Mínimo 8 caracteres, con al menos un número.
</p>
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 ARIA1 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

Tecnologías compatibles con Accessible Rich Internet Applications (WAI-ARIA).

Descripción

El propósito de esta técnica es mostrar cómo usar la propiedad aria-describedby de WAI-ARIA para proporcionar información descriptiva, determinable por software, sobre un elemento de la interfaz de usuario. La propiedad aria-describedby puede utilizarse para vincular información descriptiva a uno o más elementos mediante una lista de referencias de id. La lista de referencias de id contiene uno o más id únicos de elementos.

Consulte ARIA in HTML para obtener información sobre cómo proporcionar estados y propiedades de WAI-ARIA con HTML. Los estados y propiedades de WAI-ARIA también son compatibles con otros lenguajes; consulte la documentación de dichos lenguajes.

La propiedad aria-describedby no está diseñada para hacer referencia a descripciones situadas en un recurso externo: como se trata de un id, debe hacer referencia a un elemento del mismo documento DOM.

Ejemplos

Usar aria-describedby para asociar instrucciones a campos de formulario

Ejemplo de campo de formulario que usa aria-describedby para asociar instrucciones a los campos de formulario cuando ya existe una etiqueta de formulario.

<form>
  <label for="fname">First name</label>
  <input aria-describedby="int2" autocomplete="given-name" id="fname" type="text">
  <p id="int2">Your first name is sometimes called your "given name".</p>
</form>

Usar la propiedad aria-describedby para proporcionar información más detallada sobre el botón

<div>
  <span id="fontDesc">Select the font faces and sizes to be used on this page</span>
  <button aria-describedby="fontDesc" id="fontB" type="button">Fonts</button>
</div>
<div>
  <span id="colorDesc">Select the colors to be used on this page</span>
  <button aria-describedby="colorDesc" id="colorB" type="button">Colors</button>
</div>
<div>
  <span id="customDesc">Customize the layout and styles used on this page</span>
  <button aria-describedby="customDesc" id="customB" type="button">Customize</button>
</div>

Pruebas

Procedimiento

  1. Comprobar que existe un control de la interfaz de usuario con un atributo aria-describedby que hace referencia a uno o más elementos mediante un id único.
  2. Comprobar que el elemento o elementos referenciados proporcionan información adicional sobre el control de la interfaz de usuario.

Resultados esperados

  • Las comprobaciones n.º 1 y n.º 2 son verdaderas.

Recursos

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.

Solicitar una auditoría

Basado en la técnica ARIA1 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.