Accesibilidad del sitio Comenzando con ARIA

Usando solo HTML estándar, las aplicaciones web modernas pueden bloquear a los usuarios con necesidades de accesibilidad. 

HTML es el lenguaje de marcado predominante en línea, siendo utilizado por casi el 83% de los sitios web existentes. Si bien se han producido algunos cambios en los 25 años desde su creación, incluso las versiones más recientes, como HTML5 y AMP, dejan mucho que desear, especialmente cuando se trata de accesibilidad. Ahí es donde entra en juego ARIA. En este tutorial, hablaré sobre qué es ARIA, por qué es útil para su sitio y algunas formas en que se puede agregar a su sitio..

Que es aria?

ARIA, también conocido como WAI-ARIA, significa aplicaciones accesibles de Internet enriquecidas de la Iniciativa de accesibilidad web. El documento de especificaciones completas se puede encontrar aquí. Tenga en cuenta que el documento de especificaciones completas es bastante denso, por lo que podría ser una buena idea comenzar leyendo esta publicación y verificando algunos de los otros recursos que se encuentran a continuación.. 

El propósito principal de ARIA es permitir una estructura semántica avanzada dentro de HTML como contraparte de la naturaleza pesada de sintaxis de HTML. En otras palabras, HTML le dice al navegador dónde van las cosas, y ARIA le dice cómo interactúan.

Quién es responsable de ARIA?

ARIA es un proyecto organizado por el W3C (World Wide Web Consortium). El proyecto se adhiere a los mismos estándares de actualización y edición que sus otras iniciativas. También proporcionan un repositorio de GitHub de varias pruebas que puede ejecutar para asegurarse de que su página se ejecuta correctamente.

¿Qué está mal con el marcado de mi sitio actual??

La mayoría de los sitios que tienen un diseño estructurado y bien pensado lo hacen lo suficientemente bien en lo que respecta a las tecnologías adaptativas (es decir, los lectores de pantalla). Sin embargo, tener un usuario capaz de averiguar cómo usar su sitio y que sea fácil de usar son cosas diferentes. Los usuarios con baja visión representan casi el 2% de la población, y para ellos, la diferencia puede significar ahorrar una cantidad significativa de tiempo y trabajo de detective al intentar realizar tareas básicas en línea. Puede ser la diferencia entre ofrecer a los visitantes una experiencia espectacular y proporcionarles un laberinto para que puedan navegar..

Más allá de los medios tradicionales de accesibilidad, ARIA está encontrando su camino en las tecnologías que proporcionan nuevas tomas en la interacción estándar. Un número creciente de sistemas de voz, navegación agregada (como las computadoras integradas en automóviles, por ejemplo) y otras innovaciones están poniendo en uso el ARIA, aprovechando su mayor capacidad semántica.

De acuerdo, pero que hace?

En general, ARIA conecta elementos entre sí de una manera semánticamente significativa. Proporciona al usuario un significado adicional con respecto a la interacción. Aquí hay algunos ejemplos reales de cómo podría usarse:

1. Asociación de elementos no anidados: con HTML simple, el navegador del usuario solo puede ver las relaciones basadas en las relaciones padre / hijo. En algunas situaciones, sin embargo, podemos querer una serie de botones paralelos al contenido en la jerarquía HTML. Con ARIA, podemos definir qué tipo de controlador es cada botón y qué elemento controla en otra parte del documento..
2. Declare elementos interactivos: mientras que HTML proporciona un puñado de elementos para la interactividad, ARIA define docenas más, lo que permite descripciones más detalladas de lo que puede hacer cada elemento de su página. Además, estas pueden asignarse a etiquetas HTML que no se usarían comúnmente para ese propósito, pero que podrían tener sentido en su caso específico. Por ejemplo, podrías usar el
3. marque una serie de casillas de verificación que prefiera que no estén compuestas de elementos de formulario.
4. Notificaciones de actualización del área en vivo: otra característica que proporciona ARIA es la definición de un área de contenido "en vivo". Cuando se define un área de contenido de esta manera, ARIA notificará al usuario siempre que cambie el contenido dentro de ese elemento. Esto puede ser útil cuando los usuarios de baja visión sepan que algo ha cambiado en su página..

Agregando ARIA a tus páginas web

Hemos hablado sobre lo que puede hacer ARIA, así que ahora veamos algunos de los ejemplos más comunes. Comenzaremos cada sección con una breve declaración del objetivo que buscamos lograr, seguido de un ejemplo de código de cómo lograrlo..

Creación de etiquetado alternativo con ARIA

Cuando se trata de etiquetado alternativo, la mayoría de los desarrolladores están familiarizados con el alt atributo comúnmente usado en etiquetas Esta etiqueta tiene un propósito importante: describir la imagen a la que se adjunta para aumentar la accesibilidad (o como una táctica de SEO común, según su perspectiva). 

ARIA proporciona un atributo similar llamado aria-label que se puede adjuntar a cualquier elemento HTML, mejorando la accesibilidad no solo de las imágenes, sino también de las secciones del sitio, los controles de formulario y más. Aquí hay un ejemplo de cómo se ve:

    
Una descripción de texto de la imagen, visible en la pantalla.

Definición de elementos UI específicos de ARIA

HTML ya proporciona una serie de elementos para la creación de páginas web, pero su enfoque principal suele ser definir un área de forma genérica y presentar al usuario la estructura del sitio. ARIA proporciona unas pocas docenas de elementos adicionales que se centran más en cómo se usa un elemento, como un temporizador, información sobre herramientas o barra de progreso.

Un ejemplo de uso aquí es una información sobre herramientas que puede encontrar en un formulario. Hay varias formas de crear una, que van desde un enlace que activa algún JavaScript a un elemento que crea un modal cuando se desplaza el mouse sobre. La pieza que falta aquí es que, a pesar de cómo podría funcionar para los usuarios videntes, los usuarios con baja visión podrían no saber siquiera que existe la información sobre herramientas..

Puedes definir una información sobre herramientas usando ARIA de la siguiente manera:

Definiciones de ARIA disponibles

Para ampliar estos elementos de la interfaz de usuario, aquí hay una breve lista de algunos de los "roles" más interesantes que se pueden definir. La lista completa está disponible en el documento de especificación al que se hace referencia..

• buscar
• bandera
• presentación
• barra de herramientas
• estado
• opción del menú
• Iniciar sesión
• diálogo
• enlazar

Establecimiento de relaciones fuera de la estructura padre / hijo

Ahora expandamos un punto del que hablamos anteriormente: la estructura forzada de HTML. Si bien la relación padre / hijo es buena para decidir cómo deben ordenarse las cosas, se queda corta cuando se necesitan conexiones más significativas. Un ejemplo de esto son los elementos hermanos. Algunas bibliotecas han agregado la capacidad para que los hermanos u otras formas de relaciones de elementos puedan atravesarse, pero esto suele ocurrir en JavaScript u otro idioma fuera del marcado.

ARIA nos da la capacidad de definir estas relaciones en el marcado, lo que facilita agrupar los elementos del menú, crear una navegación no estándar y adjuntar controles a las áreas de elementos que serían difíciles de hacer normalmente.

Veamos cómo podemos usar esto para conectar algunos controles a un área de contenido:

 
 El contenido de tu tutorial. 

Este fragmento dice que el nextbutton.jpg La imagen es un botón, que es un control para el tutorial. div abajo.

Creando Elementos "Vivos" en ARIA

La última característica de ARIA que cubriremos aquí es la aria-live atributo. Mientras que la mayoría de las otras características de ARIA aquí tratan con conexiones semánticas, esta trata directamente con la idea de dar a los usuarios notificaciones de cambios de elementos o elementos..

Para muchas personas con baja visión, podría no estar inmediatamente claro que su interacción con su sitio provocó un cambio en otras partes de la página. Esto puede ser especialmente cierto para los cambios sutiles, como pequeñas burbujas de texto que pueden cambiar pero que permanecen relativamente de la misma longitud. Al usar este atributo, cada vez que se cambie el contenido dentro del elemento definido, se notificará a su usuario.

Podemos agregar este atributo a un elemento como este:

 Contenido que se actualiza, es decir. direcciones guiadas 

Haciendo la web un lugar mejor para todos los usuarios

Con un poco más del 2% de la población de los EE. UU. Que posee algún tipo de etiqueta de baja visión, mejorar la accesibilidad de su sitio puede aumentar el alcance de su sitio de manera espectacular. Para aquellos con sitios que llegan a varios países, ese número se vuelve aún más grande. Además de la accesibilidad, ARIA también proporciona una forma para que las interfaces que no son del navegador utilicen su sitio, con una serie de dispositivos basados ​​en voz que ya brindan soporte.

Implementar ARIA ayuda a sus usuarios y puede ayudar a su tráfico, así que póngase al día.!

¿Perdí algún detalle o tiene preguntas adicionales? Deja un comentario abajo!

Si desea sumergirse en la documentación completa de ARIA o probar la herramienta de prueba oficial, consulte los siguientes enlaces:

• Prácticas de autoría de ARIA
• Documento completo de especificación ARIA
• Informe de ejemplo de herramienta de prueba