Una web verdaderamente abierta e inclusiva necesita tecnologías que permitan a los usuarios discapacitados que dependen de tecnologías de asistencia disfrutar de contenido web dinámico y aplicaciones web modernas. Los estándares web de accesibilidad de W3C tienen como objetivo poblar la web con Aplicaciones de Internet enriquecidas accesibles (ARIA) que los usuarios con discapacidades pueden usar de manera eficiente.
ARIA es uno de los numerosos estándares y pautas de accesibilidad publicados por Web Accessibility Intitiative (WAI). Proporciona un marcado adicional que se puede insertar fácilmente en documentos HTML. WAI-ARIA es una solución multiplataforma y multidispositivo que apunta a la plataforma web abierta, por lo que no solo piense en sitios web, sino también en juegos, entretenimiento digital, atención médica, dispositivos móviles y otros tipos de aplicaciones.
En esta publicación, veremos cómo puede agregar accesibilidad a sus documentos HTML con la ayuda de los estándares WAI-ARIA.
30 siglas que todos los desarrolladores web deben conocer
Una web verdaderamente abierta e inclusiva necesita tecnologías que permitan a los usuarios discapacitados que dependen de tecnologías de asistencia disfrutar de contenido web dinámico y una web moderna. Leer más
El Marco ARIA
La sintaxis de HTML no siempre permite a los desarrolladores describir los elementos correctamente, identificar sus roles y especificar las relaciones entre ellos.
Si bien eso rara vez es un problema para los visitantes que están en plena posesión de sus sentidos, puede impedir que los usuarios de tecnología de asistencia entiendan lo que sucede en la pantalla y exploren sus opciones.
Este es el punto donde ARIA viene en nuestra ayuda, ya que permite definir el propósito de diferentes elementos con la ayuda de roles emblemáticosy describir su naturaleza con atributos con prefijo aria.
Los atributos con el prefijo Aria tienen dos tipos: propiedades que describen características que tienen menos probabilidades de cambiar a lo largo del ciclo de vida de la página, y estados que proporcionan información sobre cosas que pueden cambiar con frecuencia debido a la interacción del usuario.
Roles emblemáticos
roles emblemáticos son las formas más conocidas del modelo de roles de ARIA (otros son los roles abstractos, los roles de widget y los roles de estructura de documento). Los roles emblemáticos permiten a los desarrolladores identificar grandes regiones perceptibles en la página web a la que los usuarios de tecnología de asistencia pueden querer acceder rápidamente.
Hay 8 tipos de roles de puntos de referencia de ARIA y deben agregarse como atributos a las etiquetas HTML relacionadas.
rol=”bandera”
La función de banner está diseñada para usarse principalmente para contenido relacionado con todo el sitio, no solo con páginas individuales. Por lo general, se agrega como un atributo al encabezado principal del sitio para el logotipo y otra información importante de todo el sitio.
Es importante que pueda usar la función de banner solo una vez dentro de cualquier aplicación o documento HTML.
rol=”principal”
El papel de hito principal está relacionado con el contenido principal del documento. No se puede usar más de una vez en cualquier página HTML. Suele seguir a la <div role="main"> sintaxis, o en HTML5 la más semántica <main role="main">. Este último se agregó a las especificaciones del W3C con el propósito de mapear el principal Función histórica de ARIA para un elemento HTML semántico.
rol=”navegación”
La función de navegación está destinada a indicar un área que contiene elementos de navegación, como enlaces y listas en un sitio.
rol=”complementario”
La función de hito complementario describe contenido adicional que está relacionado con el contenido principal del sitio. Debe colocarse en un nivel similar en la jerarquía DOM como role="main". Las publicaciones relacionadas, los artículos populares y los últimos comentarios son ejemplos típicos de contenido complementario autónomo.
rol=”información de contenido”
El rol contentinfo informa a los agentes de usuario sobre la presencia de una región donde se pueden encontrar diferentes tipos de metadatos, como información de derechos de autor, declaraciones legales y de privacidad. Por lo general, se usa para el pie de página de un sitio.
rol=”formulario”
El rol de punto de referencia del formulario indica un formulario que espera la entrada del usuario. Para los formularios de búsqueda que debe utilizar role="search" en cambio.
rol=”buscar”
La función de búsqueda se explica por sí misma, está destinada a ayudar a las tecnologías de asistencia a identificar la funcionalidad de búsqueda de un sitio web.
rol=”aplicación”
Puede usar la función de punto de referencia de la aplicación para una región que desee declarar como una aplicación web, en lugar de un documento web. No se recomienda incluirlo en sitios web tradicionales, ya que sugiere tecnologías de asistencia para cambiar del modo de navegación normal al modo de navegación de aplicaciones. Solo debe usar este papel histórico con mucho cuidado.
Estados y Propiedades
Si bien los roles le permiten definir el significado de las etiquetas HTML, los estados y las propiedades brindan al usuario información adicional sobre cómo interactuar con ellos. Tanto los estados como las propiedades están marcados con atributos con prefijo aria con la sintaxis aria-*.
Los atributos ARIA más conocidos son probablemente la propiedad requerida por aria y el estado verificado por aria. Aria-requerido es un propiedad porque es una característica permanente de un elemento de entrada (es decir, el usuario debe completarlo), mientras que aria-checked es un estado porque una casilla de verificación puede cambiar con frecuencia su valor debido a la interacción del usuario.
La sintaxis de los atributos con el prefijo Aria
Los estados y las propiedades a veces toman valores de token (un conjunto limitado de valores predefinidos), por ejemplo, la propiedad aria-live puede tener 3 valores diferentes: apagado, educado, asertivo. La sintaxis en este ejemplo se ve así: <div id="some-id" class="some-class" aria-live="assertive"><div>.
En otros casos, los valores de los atributos con el prefijo aria están representados por instrumentos de cuerda, números, enteros, referencias de identificación o verdadero Falso valores.
Cómo hacer uso de los estados y propiedades de ARIA
1. Construir relaciones entre elementos con atributos de relación
Use atributos de relación para indicar relaciones entre diferentes elementos en su sitio, que no se pueden determinar de otra manera a partir de la estructura del documento. por ejemplo el aria-labelledby La propiedad identifica el elemento que etiqueta el elemento actual.
aria-labelledby – entre muchas otras cosas – puede vincular encabezados a regiones emblemáticas de ARIA de la siguiente manera:
<div role="main" aria-labelledby="some-id"> <h1 id="some-id">This Is A Heading</h1> Main content... </div>
2. Sincronice estados y propiedades con el ciclo de vida del elemento
Después de establecer una función de punto de referencia de ARIA para un área perceptible en su página HTML, puede ayudar mucho a las tecnologías de asistencia si cambia los estados y las propiedades de los elementos secundarios prefijados por ARIA de acuerdo con los eventos que suceden en la pantalla.
Esto puede ser crucial cuando los usuarios tienen que interactuar con el sitio, por ejemplo, completando un formulario o ejecutando una consulta de búsqueda.
3. Haga coincidir las interfaces visual y accesible
La regla general del diseño de accesibilidad es que el estado actual de la interfaz de usuario siempre debe ser perceptible por las tecnologías de asistencia. Por ejemplo, si el usuario elige una opción en un formulario, también debe aparecer seleccionada para las tecnologías de asistencia.
Esto se puede lograr fácilmente utilizando el estado seleccionado por aria con la siguiente sintaxis: <option aria-selected="true"></option>.
La guía de prácticas de creación WAI-ARIA de W3C puede brindarle muchas otras excelentes ideas sobre cómo armonizar correctamente las interfaces visual y accesible de su sitio.
No abuses de ARIA
El uso de roles y atributos de ARIA a veces puede ser redundante. Cuando usa etiquetas semánticas de HTML5 como <button></button> o <form></form>, los navegadores web modernos agregan la semántica ARIA adecuada de forma predeterminada. En este caso, no tiene sentido establecer por separado los roles de referencia de ARIA.
Por ejemplo, no es necesario utilizar el forma papel fundamental para definir la <form> elemento. En vez de <form role="form"></form> sintaxis es perfectamente suficiente para usar solo <form></form>. También es superfluo usar los atributos nativos de HTML junto con el atributo ARIA apropiado.
Entonces, si ya ha agregado el oculto atributo HTML a una entrada de formulario, no es necesario agregar el aria-oculto state, ya que el navegador lo incluye por defecto.