Una mirada a los estándares web de ARIA y accesibilidad de aplicaciones HTML
Una web verdaderamente abierta e inclusiva necesita tecnologías que permitan a los usuarios discapacitados que dependen de las 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 la Iniciativa de Accesibilidad de la Web (WAI). Proporciona un marcado adicional que se puede insertar fácilmente en documentos HTML. WAI-ARIA es una solución multiplataforma y multiplataforma que se enfoca en la Plataforma Web Abierta, así que no solo piense en sitios web, sino también en juegos, entretenimiento digital, salud, 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..
El marco de 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 comprendan lo que está sucediendo en la pantalla y exploren sus opciones..
Este es el punto donde ARIA viene en nuestra ayuda, ya que hace posible definir el propósito de diferentes elementos con la ayuda de roles de hito, y describir su naturaleza con atributos prefijados de aria. Los atributos prefijados de 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 de referencia
Roles de referencia son las formas más conocidas del modelo de roles de ARIA (otras son los roles abstractos, los roles de widgets y los roles de estructura de documentos). Los roles de Landmark permiten a los desarrolladores identificar grandes regiones perceptibles en la página web que los usuarios de tecnología de asistencia pueden querer acceder rápidamente.
Hay 8 tipos de roles de hito ARIA, y deben agregarse como atributos a las etiquetas HTML relacionadas.
rol =”bandera”
El rol de banner está destinado a ser utilizado principalmente para contenido relacionado con todo el sitio, no solo para páginas individuales. Generalmente se agrega como un atributo al encabezado principal del sitio para el logotipo y otra información importante en todo el sitio. Es importante que pueda usar el rol de banner solo una vez en cualquier documento o aplicación HTML.
rol =”principal”
La función principal de referencia está relacionada con el contenido principal del documento. No se puede usar más de una vez en ninguna página HTML. Por lo general sigue la La función de navegación debe utilizarse para indicar un área que contiene elementos de navegación, como enlaces y listas en un sitio.. El rol de hito complementario describe contenido adicional relacionado con el contenido principal del sitio. Debe colocarse en un nivel similar en la jerarquía DOM como La función contentinfo informa a los agentes de usuarios 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. Normalmente se usa para el pie de página de un sitio.. El rol de marca de formulario indica un formulario que espera la entrada del usuario. Para los formularios de búsqueda debes usar 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. Puede utilizar el rol de referencia de la aplicación para una región que desea declarar como una aplicación web, en lugar de un documento web. No se recomienda incluirlo en los sitios web tradicionales, ya que apunta a tecnologías de asistencia para cambiar del modo de navegación normal al modo de navegación de aplicaciones. Solo debes usar este papel de referencia con mucho cuidado. Mientras que los roles le permiten definir el significado de las etiquetas HTML, los estados y las propiedades proporcionan al usuario información adicional sobre cómo interactuar con ellas. Ambos estados y propiedades están marcados con atributos prefijados de 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-required es un propiedad porque es una característica permanente de un elemento de entrada (es decir, el usuario debe completarla), mientras que Aria-Check es una estado porque una casilla de verificación puede cambiar frecuentemente su valor debido a la interacción del usuario. 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, Cortés, positivo. La sintaxis en este ejemplo se ve así: En otros casos, los valores de los atributos prefijados de aria están representados por instrumentos de cuerda, números, enteros, Referencias de identificación o verdadero Falso valores. Use los atributos de relación para indicar las relaciones entre los diferentes elementos de su sitio, que de otra manera no pueden determinarse a partir de la estructura del documento. Por ejemplo el Después de establecer una función histórica de ARIA para un área perceptible en su página HTML, puede ayudar mucho a las tecnologías de asistencia si cambia los estados con el prefijo ARIA y las propiedades de los elementos secundarios de acuerdo con los eventos que ocurren en la pantalla. Esto puede ser crucial cuando los usuarios tienen que interactuar con el sitio, por ejemplo, rellenando un formulario o ejecutando una consulta de búsqueda.. 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 seleccionado para tecnologías de asistencia. Esto se puede lograr fácilmente utilizando el estado seleccionado por aria con la siguiente sintaxis: La guía de Prácticas de Autoría WAI-ARIA de W3C puede darle muchas otras grandes ideas sobre cómo armonizar adecuadamente la interfaz visual y las interfaces accesibles de su sitio.. El uso de roles y atributos de ARIA a veces puede ser redundante. Cuando usas etiquetas semánticas de HTML5 como Por ejemplo, es innecesario usar el formar papel de referencia para definir el Así que si ya has añadido el oculto Atributo HTML a una entrada de formulario, no es necesario agregar el aria escondido Estado, ya que el navegador lo incluye por defecto... Este último se agregó a las especificaciones W3C con el propósito de mapear el principal Rol hito de ARIA a un elemento HTML semántico. rol =”navegación”
rol =”complementario”
role = "main". Publicaciones relacionadas, artículos populares, últimos comentarios son ejemplos típicos de contenido complementario autónomo.rol =”información de contenido”
rol =”formar”
role = "search" en lugar.rol =”buscar”
rol =”solicitud”
Estados y propiedades
La sintaxis de los atributos con prefijo de Aria
Cómo hacer uso de estados y propiedades de ARIA
1. Construir relaciones entre elementos con atributos de relación
aria-labelledby propiedad identifica el elemento que etiqueta el elemento actual.aria-labelledby - entre muchas otras cosas, puede vincular los encabezados a las regiones de hito de ARIA de la siguiente manera:Esta es una partida
Contenido principal… 2. Sincronizar estados y propiedades con el ciclo de vida del elemento
3. Coincidir con las interfaces visuales y accesibles
.No abusar de ARIA
o , Los navegadores web modernos agregan la semántica ARIA apropiada por defecto. En este caso, no tiene sentido establecer por separado los roles de hito de ARIA.. elemento. En vez de sintaxis es perfectamente suficiente para usar solo . También es superfluo usar los atributos nativos de HTML junto con el atributo ARIA apropiado.
