Ayuda contextual de los formularios más accesible con "aria-describedby" (WAI-ARIA)

Hace una semanas os explicaba lo sencillo que es usar del atributo aria-live para mejorar la accesibilidad de los contenidos que se actualizan automáticamente (ver Live Regions y WAI-ARIA. Cómo mejorar la accesibilidad de contenidos que se actualizan automáticamente)

Hoy os voy a poner otro sencillo ejemplo de aplicación de WAI-ARIA, en este caso para mejorar la accesibilidad de las ayudas contextuales en los campos de formulario.

Podéis acceder directamente al ejemplo que os voy a explicar a continuación en: Ejemplo de aria-describedby para ayuda contextual en un campo de formulario

Descripción del problema: formulario con ayuda contextual

Imaginemos que tenemos un sencillo formulario de registro como el siguiente:

Formulario con dos campos de texto: Usuario obligatorio y Contraseña obligatorio, y un botón Registrarme. Bajo el campo contraseña hay un texto de ayuda La contraseña debe tener mínimo 6 caracteres

Tenemos dos campos de formulario obligatorios. Uno de ellos, "Contraseña", tiene una ayuda contextual que nos indica que la contraseña debe tener como mínimo 6 caracteres.

Este requisito del campo "Contraseña" puede pasar inadvertido al usuario que accede con un lector de pantalla. Nuestro objetivo es asociar semánticamente el campo "Contraseña" con el texto informativo sobre sus requisitos, y asegurarnos de que le será leído al usuario cuando el campo coja el foco, evitando de esta manera que cometa un error al rellenar el campo.

Descripción de la solución: uso de la propiedad `aria-describedby`

La propiedad aria-describedby de la especificación WAI-ARIA identifica el elemento o los elementos que le proporcionan una descripción al objeto que contiene esta propiedad, es decir, que le proporcionan una información adicional.

En nuestro caso vamos a incluir la propiedad al campo contraseña, indicándole que la información adicional nos la proporciona la ayuda contextual bajo el campo:

<label for="contra">Contraseña (obligatorio):</label> <input name="contra" id="contra" type="password" aria-describedby="descripcionContra" aria-required="true" /> <p id="descripcionContra" class="ayuda">La contraseña debe tener mínimo 6 caracteres</p>

¿Cómo leerá ahora el lector de pantalla el campo contraseña?

Puedes comprobarlo abriendo el ejemplo Ejemplo de aria-describedby para ayuda contextual en un campo de formulario y un lector de pantalla. Accede con el tabulador al campo de formulario "Contraseña". Como observarás, cuando el campo "Contraseña" coge el foco (accediendo al mismo con el tabulador) el lector de pantalla lee:

NVDA 2013 (con IE11, FF25 y Chrome31) lee el campo de la siguiente manera: "Contraseña obligatorio. Edición contraseña. Requerido. La contraseña debe tener mínimo 6 caracteres. En blanco"
JAWS 15 (con IE11, FF25 y Chrome31) lee el campo de la siguiente manera: "Contraseña abre paréntesis obligatorio cierra paréntesis. Password edit required. La contraseña debe tener mínimo 6 caracteres"
VoiceOver (iPad) lee el campo de la siguiente manera: "Contraseña obligatorio. Seguro. Campo de texto para varias líneas. Obligatorio. La contraseña debe tener mínimo 6 caracteres. Pulse dos veces para editar"

Es decir, nos lee la descripción que hemos indicado, de esta manera al usuario no le pasará inadvertido el requisito para rellenar el campo.

Por tanto, aunque versiones antiguas de navegadores o productos de apoyo no interpreten este atributo, esto no interfiere en el funcionamiento ni la accesibilidad del formulario, por el contrario, añadiendo algo tan simple con una propiedad podemos mejorar la accesibilidad del formulario para muchos usuarios.

Otro detalle es que, gracias a la inclusión de la propiedad aria-required="true", nos anuncia que el campo es obligatorio.

Puedes usar la propiedad aria-describedby tanto con HTML 5 como con HTML 4 o XHTML (en el caso de aria-required en HTML5 es solo required)

Solo es importante recordar que si usas (X)HTML, como en mi ejemplo, debes incluir un DOCTYPE específico para que el validador de sintaxis del W3C no te dé errores:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+ARIA 1.0//EN" "http://www.w3.org/WAI/ARIA/schemata/xhtml-aria-1.dtd">

Otros usos de `aria-describedby`

Esta propiedad también se puede utilizar para clarificar enlaces, botones, abreviaturas, widgets o descripciones de imágenes. Pero es importante advertir que antes de aplicarlo como única técnica valores si existe una alternativa accesible con mayor soporte.

La técnica ARIA1: Using the aria-describedby property to provide a descriptive label for input controls muestra otro uso de aria-describedby dentro de los formularios, concretamente para describir el propósito de un botón.
Se puede utilizar para describir un widget. Ver ejemplo en: Using the aria-describedby attribute
También puede clarificar el propósito de un enlace. Ver ejemplos en: Using aria-describedby for link purpose
Puede relacionar una imagen con su descripción larga. Ver por ejemplo:
- Using aria-describedby to provide descriptions of images
- Long Description Example 1: Using aria-describedby to point to a link to an external description
Un ejemplo similar al mío sería que la ayuda contextual estuviera en un tooltip, visible al coger el foco, en el siguiente ejemplo se ve la utilización de aria-describedby en este contexto: Overview of Tooltip Examples

Por último, me gustaría recalcar que no hay que confundir aria-describedby con aria-labelledby.

aria-labelledby hace referencia al ID del elemento que lo etiqueta, mientras que aria-describedby hace referencia al ID del elemento que lo describe, que le proporciona más información. Podéis ver usos de aria-labelledby en Using the aria-labelledby attribute