Descripción accesible
Una descripción accesible es la descripción de un elemento de la interfaz de usuario y aporta información adicional para ayudar a los usuarios de tecnologías de asistencia a comprender ese elemento y su contexto. Está asociada a un elemento HTML o SVG y proporciona contexto adicional a los usuarios sobre su propósito, más allá de lo que ofrece el nombre accesible del elemento. Esto es especialmente importante para quienes dependen de tecnologías de asistencia como los lectores de pantalla. La descripción accesible de un elemento forma parte del árbol de accesibilidad.
Por ejemplo, el nombre accesible de un elemento <table> lo proporciona su primer <caption>. En el caso de las tablas de datos complejas, una o dos oraciones que describan la tabla pueden servir de descripción. Puede ser un párrafo situado justo antes o justo después de la tabla, tanto visualmente como en el orden del código fuente. Si el texto está en otra parte del código fuente, o si quieres que la asociación sea explícita, puedes usar el atributo aria-describedby para asociar la tabla con su descripción.
Del mismo modo, cuando se pide a un usuario que cree una contraseña, la etiqueta <label> del elemento <input> de tipo password proporciona su nombre accesible. Una buena descripción accesible incluye los requisitos de la contraseña de manera que sean visibles para todos los usuarios. Se puede asociar de forma explícita con el elemento input mediante su atributo aria-describedby, lo que la añade al árbol de accesibilidad como la 'descripción' de ese nodo.
Las descripciones se reducen a cadenas de texto. En nuestro ejemplo de la contraseña, si el valor del atributo aria-describedby del elemento <input> es el id de un elemento <ul> de HTML con una lista de requisitos, la descripción es la concatenación del texto y los equivalentes de texto de todos los elementos de la lista.
Puedes inspeccionar la descripción accesible de cualquier elemento de tu página: consulta la pestaña de accesibilidad en las herramientas para desarrolladores de tu navegador, que muestra la información de accesibilidad del elemento que tengas seleccionado.
Cálculo de la descripción accesible
En los elementos HTML, si un elemento no tiene descripción accesible, esta debe asociarse mediante programación con el elemento correspondiente. El modelo de objetos de accesibilidad (AOM, por sus siglas en inglés) calcula la descripción accesible comprobando las siguientes características, en orden, hasta que esta quede definida:
-
El atributo
aria-describedby. -
El atributo
aria-description. -
Las características específicas del lenguaje que participan en el cálculo de la descripción, siempre que no se estén usando ya para definir el nombre accesible. Por ejemplo:
- Un elemento
<summary>se describe con el contenido del elemento<details>en el que está anidado. - Los botones
<input>(con el atributotypeigual abutton,submitoreset) se describen con el valor de su atributovalue. - En SVG, se usa el contenido del elemento
<desc>, si está presente; de lo contrario, el texto de los elementos descendientes contenedores de texto (es decir,<text>), siempre que no se usen ya para definir el nombre accesible.
- Un elemento
-
Si ninguno de los anteriores proporciona una descripción, se usa el atributo
title, siempre quetitleno sea el nombre accesible de ese elemento. -
Si ninguna de las opciones anteriores define una descripción accesible, entonces la descripción accesible queda vacía.
Los pasos para definir la descripción accesible en HTML se detallan en HTML-AAM Accessible Description. La descripción accesible de los elementos SVG sigue los mismos pasos, con pequeñas diferencias que se enumeran en SVG-AAM Accessible Description.