Share
En el confuso mundo de las aplicaciones web, ARIA puede ayudar a mejorar la accesibilidad y la facilidad de uso de sus creaciones. HTML no puede manejar muchos tipos de relaciones entre elementos en la página, pero ARIA es ideal para casi cualquier tipo de configuración que pueda crear. Veamos qué es ARIA, cómo se puede aplicar a su aplicación web y algunas recetas rápidas que puede usar para sus propios sitios..
ARIA, también llamado WAI-ARIA, significa las aplicaciones de Internet enriquecidas accesibles a la Iniciativa de accesibilidad web. Esta iniciativa, actualizada por el W3C, tiene como objetivo brindar a los desarrolladores un nuevo conjunto de esquemas y atributos para hacer que sus creaciones sean más accesibles. Su objetivo específico es cubrir los vacíos inherentes dejados por HTML. Si no está familiarizado con lo que ya hace, debería echar un vistazo a nuestro manual sobre ARIA. También te pueden interesar nuestras piezas en ARIA para la página de inicio y ARIA para comercio electrónico.
Sin embargo, en resumen, ARIA tiene tres características principales en las que nos centraremos:
Accentsconagua
aria-live Este atributo proporciona a los lectores de pantalla y otros dispositivos un servicio de escucha para cuando cambia el contenido de la página. Esto permite una comunicación más fácil cuando cambia el contenido en pantalla.Antes, analizamos la adición de ARIA a los elementos comunes de las páginas de comercio electrónico y las páginas de inicio del sitio. Sin embargo, con las aplicaciones web, cada una difiere drásticamente de la última. Las formas y funciones cambian entre cada aplicación y, a menudo, incluso entre versiones de la misma aplicación. Debido a esto, trataremos nuestras implementaciones aquí como recetas en un libro de cocina en lugar de una conversión total de una página..
Cuando se trata de aplicaciones web, la intención de un usuario es más difícil de discernir en un sentido generalizado. Con el comercio electrónico, independientemente del sitio en el que se encuentre, es probable que los visitantes busquen comprar un producto o servicio. Las aplicaciones web sirven para una variedad de propósitos, por lo que, en cambio, nos centraremos en crear controles con matices que sean accesibles y fáciles de usar..
Vamos a entrar en algunos de estos tipos de control.
El primer control que veremos es un valor mostrado actualizado al presionar un botón. Estos tipos de controles se ven comúnmente cuando un elemento muestra una cantidad que se puede ajustar con los botones etiquetados '+'y'-', pero puede tomar muchas formas, como los botones de flecha que le permiten recorrer los estados predefinidos.
Una implementación estándar puede dejar algunas lagunas en la comprensión para el usuario. No está claro a qué elementos afectan los botones, cómo los afectan y cuándo cambia el valor del elemento..
A continuación, usaremos ARIA para crear una conexión entre los botones y el elemento de visualización de valores utilizando el aria-controles atributo. Luego, haremos claro el uso de los botones usando aria-label y HTML . Finalmente, utilizaremos el aria. alerta rol y el aria-live atributo para que nuestro usuario sepa cuándo se está actualizando el valor.
Echemos un vistazo a cómo se ve ese código:
Al equipar un sitio con ARIA, es común utilizar "accesibilidad progresiva". La idea detrás de este término es que llevar un sitio o una aplicación web de su forma básica a un acceso completo es una tarea desalentadora. Para lidiar con esto de una manera que aún avance, puede implementar nuevas funciones de forma progresiva e iterativa..
Para obtener información sobre herramientas con una ventana emergente o modal relacionado, esto significa que podemos dividir el problema en dos pasos, extendiendo cada uno de ellos como podamos. En este caso, la información sobre herramientas de la que estamos hablando es la imagen común de un pequeño signo de interrogación que abre información adicional cuando se desplaza sobre.
Para que los usuarios sepan que la imagen del signo de interrogación es en realidad una información sobre herramientas, la hemos definido utilizando una función adecuada, como esta:
Sin embargo, hay algunos problemas con esta implementación. Es posible que los usuarios aún no sepan que al pasar el cursor sobre la información de herramientas se inicia una ventana emergente con más información. Así es como podemos agregar eso a nuestro código:
En lugar de una información sobre herramientas basada en el desplazamiento, también es común que una aplicación web utilice formularios donde cada entrada tiene su propia información sobre herramientas asociada..
Sin el marcado ARIA adicional, puede ser difícil determinar qué información sobre herramientas se aplica a qué entrada para un usuario. No tener esta relación en su lugar puede inutilizar el texto de ayuda en algunos casos.
Para corregir esto, envolveremos nuestra información sobre herramientas dentro de sus propios elementos. Cada uno de estos puede ser anidado cerca de su entrada relacionada, se han establecido sus relaciones con ARIA y luego se puede activar con JavaScript (o simplemente CSS si eres astuto).
Así es como podría verse:
"Nuestro servicio actualmente está inactivo", "Su cuenta está suspendida", y las alertas de estado relacionadas se usan comúnmente entre las aplicaciones web y muestran información importante para los usuarios. Sin ARIA, pueden enterrarse dentro de la información en una página y causar una variedad de problemas.
Utilizando el ARIA alerta rol y el aria-live atributo, podemos asegurarnos de que nuestros usuarios estén al tanto de cualquier problema rápidamente una vez que llegan a una página.
Podemos configurar este tipo de alerta de estado de esta manera:
El sistema está desconectado.!
Finalmente, echemos un vistazo a otro elemento de control común utilizado en las aplicaciones web: la barra de herramientas. Para nuestros propósitos, vamos a marcar una barra de herramientas que funciona así: nuestra aplicación web muestra una gran cantidad de datos, orientados en una tabla. Sobre esta tabla, nuestra barra de herramientas tiene varios botones que permiten a los usuarios clasificar la tabla de varias maneras. Estos botones incluyen opciones de clasificación clásicas, tales como De la A a la Z y Z a A.
Relacionalmente, estos dejan algunos problemas de accesibilidad. En primer lugar, no está claro que esos botones afecten la tabla. Resolveremos esto usando la aria-controles atributo. Tampoco está claro que los botones estén asociados entre sí, lo que puede ser una información útil para nuestros usuarios. Para definir esto, estaremos usando el barra de herramientas papel. Finalmente, un usuario no necesariamente sabe qué botón se presionó por última vez. Para corregir esto, usaremos el aria presionada atributo.
Al usar el aria presionada atributo, es importante tener en cuenta que deberá actualizar estos elementos a medida que el usuario interactúa con ellos. Esto probablemente requerirá cambiar los atributos a través de JavaScript o jQuery.
Así es como se ve el código de nuestra barra de herramientas:
Con este puñado de nuevos esquemas de control y relaciones en su haber, ¡estará en camino de hacer que su propia aplicación web sea completamente accesible! Después de haber agregado estas nuevas marcas, piense cómo podría aplicar estos atributos a otras partes de su interfaz de usuario para maximizar la usabilidad de su creación..
¿Hay atributos, roles u otras características de ARIA que te gustaría conocer? ¿O quizás tiene algunas preguntas sobre sus propias implementaciones o correcciones para este artículo? Póngase en contacto utilizando la sección de comentarios a continuación, o etiquetando kylejspeaker en Twitter!
