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:
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:
- 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
Artículos relacionados:
- WAI-ARIA. Introducción, referencias, ejemplos, herramientas
- Live Regions y WAI-ARIA. Cómo mejorar la accesibilidad de contenidos que se actualizan automáticamente
- Navegación más accesible y semántica en 2 minutos con Landmark Roles (WAI-ARIA)
- Novedades WAI-ARIA 1.1
- Nuevas técnicas ARIA en las WCAG 2.0. Novedades de la actualización del documento "Techniques for WCAG 2.0" del 11 de marzo de 2014
- Descripción extensa de una imagen: accesible con lector de pantalla y visible sin imágenes activas
- Reseña de “Pro HTML5 Accessibility”
- Textos alternativos, imágenes accesibles. Herramientas de ayuda: mapa de decisión y wizard online
Interesante, gracias por la publicación.
Eliminar comentario de ' Alejandro Cañizares ' con fecha de 16 de diciembre de 2013, 16:40