ARIA es un acrónimo de Accessible Rich Internet Applications (Aplicaciones Enriquecidas de Internet Accesibles), que utiliza esta norma para hacer el sitio web más accesible a las personas con discapacidades, como las auditivas o visuales. Veamos qué pueden hacer los desarrolladores para facilitarles la vida.
Una forma de utilizar esta norma es añadir ARIA a tu marcado HTML. Es probable que esté familiarizado con los elementos semánticos de HTML, como nav, button o header. Es fácil ver para qué se pueden utilizar estos elementos. Dan más significado al contenido de la página y podemos utilizar una combinación de estos elementos y ARIA en el marcado. Sin embargo, hay que tener en cuenta algunas cosas al utilizarlos juntos.
Roles de ARIA
Los roles ARIA se añaden al marcado HTML como atributos. Definen el tipo de elemento y especifican la finalidad que tiene. En el siguiente ejemplo, el elemento se identifica como un banner:
<header role="banner">Otro ejemplo: aquí el rol informa que el elemento contiene información sobre el contenido de la página.
<div role="contentinfo">
Este sitio web fue construido por Growuz.
</div>La alerta tendrá un aspecto similar al siguiente:
<div role="alert">
Por favor, actualiza la última versión de tu navegador para una mejor experiencia.
</div>Importante
role=”alert” funciona plenamente con los elementos que se añaden dinámicamente al DOM o cuando la visualización cambia, por ejemplo, de display:none a display:block.
El siguiente rol es uno de mis favoritos, lo utilizo cuando un elemento se utiliza de forma puramente decorativa. Si presentas a una persona con un lector de pantalla, piensa en los elementos cuyo contenido no tiene sentido leer en voz alta. Pueden ser elementos decorativos o elementos en blanco utilizados como fondo.
<span class="frame-corner" role="presentation"></span>Nota
Los elementos span (así como div) en la mayoría de los casos no necesitan especificar role="presentation", ya que no son objetos en el árbol de accesibilidad (accessibility tree) del navegador. Pero, para los elementos semánticos h1-h6 tiene sentido.
Atributos ARIA
Los atributos ARIA son ligeramente diferentes de los roles ARIA. También se añaden al marcado, pero ya existe una gama definida de atributos ARIA. Todos los atributos utilizan el prefijo aria- y se dividen en dos grupos: estados y propiedades.
- Los valores del estado de los atributos cambian como resultado de la interacción del usuario.
- Los valores de las propiedades de los atributos suelen permanecer inalterados.
Un ejemplo de atributo de estado ARIA es aria-checked, utilizado en elementos como casillas de verificación y botones de radio.
<input type="radio" aria-checked="true">Nota
De hecho, el uso del atributo ARIA en el botón de radio nativo es superfluo, la vinculación de input type="radio" y aria-checked se hace automáticamente.
El ejemplo de atributo-propiedad es aria-label. Este atributo se utiliza cuando la etiqueta de un elemento de formulario no es visible en la página (esto puede ser dictado por el diseño o simplemente no tiene sentido). Para los casos en que el texto de la etiqueta es visible, el atributo aria-labelledby es apropiado. Se utiliza de la misma manera que el anterior, el valor de este atributo es el mismo que el valor del id de la etiqueta.
<label id="address">Dirección</label>
<input type="text" aria-labelledby="address">Esto también puede hacerse en el elemento figure.
<figure aria-labelledby="operahouse_1">
<img src="operahousesteps.jpg" alt="La Ópera de Sídney">
<figcaption id="operahouse_1">Vimos la ópera <cite>El Barbero de Sevilla</cite> aquí!</figcaption>
</figure>Puedes encontrar más información sobre los estados y las propiedades de los atributos en la página web de W3.
Normas ARIA
Antes de precipitarte, recuerda que no debes añadir ARIA a todos los elementos por varias razones.
Intenta utilizar elementos HTML semánticos en la medida de lo posible
La semántica por defecto de ARIA se refiere a la semántica aplicada a los elementos en el navegador. Elementos como nav, article y button tienen los roles role="navigation", role="article" y role="button", respectivamente.
Antes de la llegada de los elementos semánticos de HTML, era común el marcado como <div class="main-navigation" role="navigation">. Ahora podemos usar nav en lugar de div y no tenemos que añadir el role="navigation" al elemento semántico porque este rol está implícito por defecto. Puedes consultar esta tabla del W3C para ver si el elemento tiene atributos ARIA o no.
Un elemento sólo puede tener un rol
Un elemento no puede tener varios roles. Según la definición, un rol es:
Indicador de tipo básico. Esta asociación semántica permite que las herramientas muestren y mantengan la interacción con los objetos de forma coherente con las expectativas del usuario respecto a otros objetos del mismo tipo.
Un elemento HTML no puede tener dos roles. Todos los roles son semánticos de una manera u otra y, como se ha definido anteriormente, un elemento no puede ser de dos tipos. ¿Puedes tener un botón de encabezado? No, sólo uno de los dos. Elige el rol que mejor describa la función del elemento.
No cambiar la semántica nativa
No debes aplicar un rol que no coincida con la semántica de un elemento, ya que el rol añadido reescribe la semántica nativa del elemento. Por ejemplo:
<footer role="button">Sin embargo, la segunda regla ARIA permite el uso del anidamiento de elementos si es necesario.
<footer><button>Comprar este libro electrónico</button></footer>¿De qué otra Forma se puede hacer más Accesible el Marcado?
Aprovecha los elementos semánticos
Esto viene con la experiencia, pero si estás pensando en la funcionalidad de lo que estás construyendo, podría darte una buena idea sobre el uso de elementos que se adaptan a tus propósitos mejor que div o span. En la práctica, puedes utilizar la lista de elementos HTML del sitio web del W3C para familiarizarte con ellos.
Uno de mis ejemplos favoritos es la etiqueta blockquote, que a menudo se utiliza mal. Hay otros elementos similares que sirven para fines específicos:
q– se utiliza para especificar las citas en minúsculas, como las citas dentro del texto de un párrafo.cite– se utiliza para citar trabajos de texto creativo, como los poemas.
He aquí un ejemplo que utiliza los dos elementos mencionados:
<p>En <cite>La canción de amor de J. Alfred Prufock</cite> de T.S. Eliot, las imágenes clínicas de la línea <q>Como un paciente eterizado sobre una mesa</q> sugieren temas de soledad.</p>
Hay muchos más elementos HTML que quizás no estés considerando, incluyendo algunos nuevos, así que una vez más recomiendo evaluar las posibilidades.
Atributo alt
Esta es una parte del marcado que a menudo se pasa por alto y que puede afectar seriamente a la accesibilidad, especialmente en el caso de los lectores de pantalla. Este atributo ha aparecido en la especificación desde HTML2, y se describe como sigue:
texto que se utilizará en lugar de una imagen si ésta no está disponible debido a alguna limitación o preferencia del usuario.
Debido a las limitaciones o a las preferencias del usuario. Independientemente de las razones por las que una imagen no se carga, los usuarios con discapacidad visual no tienen realmente preferencias. Simplemente tienen problemas para ver la imagen. Aunque la especificación no dice nada sobre el término “accesibilidad“, asume que la imagen no puede cargarse correctamente y que el usuario tiene la opción de desactivar la carga de imágenes. Aunque vivimos en un mundo en el que la segunda opción parece menos probable, no podemos predecir lo que el usuario está haciendo en el otro extremo. Por tanto, debemos ofrecer a los usuarios una alternativa.
La gente suele rellenar el atributo alt de forma no informativa, por ejemplo escribiendo un texto como “perro” para una foto de su perro jugando en el parque. Desgraciadamente, este texto no definirá nada para los discapacitados visuales. El siguiente enfoque es más aceptable:
<img src="bobby.jpg" alt="Mi perro Bobby jugando a atrapar en el parque">Ten en cuenta que el atributo alt no se crea con el mismo propósito que el elemento figcaption: el propósito de alt es crear un texto alternativo para la imagen, mientras que figcaption es simplemente el título correcto de la figura. Si desarrollamos nuestro ejemplo anterior el figcaption tiene el siguiente texto:
<figcaption>¿No es lindo Bobby?</figcaption>Ejemplo de Marcado con HTML Semántico y ARIA Centrado en la Accesibilidad
Si has mirado los ejemplos de este artículo, esperarías ver lo siguiente como ejemplo:
- uso de HTML semántico para la imagen y la cabecera
- uso previsto del elemento
cite - adición del atributo
alt - utilizando uno de los atributos ARIA
<figure aria-labelledby="operahouse_1">
<img src="operahousesteps.jpg" alt="La Ópera de Sídney"/>
<figcaption id="operahouse_1">¡Vimos la ópera <cite>El barbero de Sevilla</cite> aquí!</figcaption>
</figure>Conclusión
Las funciones y atributos de ARIA tienen un gran impacto cuando su contenido es manejado por lectores de pantalla y otras tecnologías de asistencia. Con la proliferación de las tecnologías de asistencia, deberíamos considerar la integración de ARIA en nuestro código como una práctica continua.
