Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Accessibility

Manos a la obra con ARIA: Recetas de accesibilidad para aplicaciones web

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Accessibility for eCommerce
Best Practices for ARIA Implementation

Spanish (Español) translation by Esther (you can also view the original English article)

En el confuso mundo de las aplicaciones web, ARIA puede ayudar a mejorar la accesibilidad y la facilidad de uso de tus creaciones. El HTML no es capaz de manejar muchos tipos de relación entre los elementos de la página, pero ARIA es ideal para casi cualquier tipo de configuración que se te ocurra. Echemos un vistazo a lo que es ARIA, cómo se puede aplicar a tu aplicación web, y algunas recetas rápidas que puedes utilizar para tus propios sitios.

Fundamentos de ARIA

ARIA, también llamada WAI-ARIA, son las siglas de Web Accessibility Initiative Accessible Rich Internet Applications. Esta iniciativa, actualizada por el W3C, pretende ofrecer a los desarrolladores un nuevo conjunto de esquemas y atributos para hacer más accesibles sus creaciones. En concreto, pretende cubrir las lagunas inherentes que deja el HTML. Si no estás familiarizado con lo que hace, deberías echar un vistazo a nuestro manual sobre ARIA. También te pueden interesar nuestros artículos sobre ARIA para la página de inicio y ARIA para el comercio electrónico.

Sin embargo, ARIA tiene tres características principales en las que nos centraremos:

  1. Creación de relaciones fuera de la asociación padre-hijo: HTML solo permite las relaciones entre elementos padre e hijo, pero las asociaciones que queremos definir no siempre están anidadas unas dentro de otras. ARIA nos permite definir relaciones entre elementos fuera de esta restricción.
  2. Definición de controles avanzados e interactividad: HTML cubre muchos elementos básicos de la interfaz de usuario, pero hay muchos controles más avanzados que se utilizan en la web y que son difíciles de definir fuera de su componente visual. ARIA ayuda a ello.
  3. Proporcionar acceso a los atributos de actualización del área "en vivo": el atributo aria-live proporciona a los lectores de pantalla y otros dispositivos una escucha para cuando el contenido de la página cambia. Esto permite una comunicación más fácil de cuando el contenido en pantalla cambia.

ARIA y aplicaciones web

Anteriormente, vimos cómo añadir ARIA a los elementos comunes de las páginas de comercio electrónico y las páginas de inicio del sitio. Sin embargo, en el caso de las aplicaciones web, cada una difiere drásticamente de la anterior. Los formularios y las funciones cambian entre cada aplicación, y a menudo incluso entre versiones de la misma aplicación. Por ello, trataremos nuestras implementaciones aquí como recetas de un libro de cocina en lugar de una conversión al por mayor 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. En el caso del comercio electrónico, sea cual sea el sitio en el que se encuentre, es probable que los visitantes busquen comprar un producto o servicio. Las aplicaciones web sirven para una gran variedad de propósitos, por lo que nos centraremos en la creación de controles matizados que sean accesibles y fáciles de usar.

Vamos a entrar en algunos de estos tipos de control.

Controlar las actualizaciones en directo con botones

El primer control que vamos a ver es un valor mostrado que se actualiza al pulsar un botón. Este tipo de controles se ven comúnmente cuando un elemento está mostrando una cantidad que puede ser ajustada por los botones etiquetados '+' y '-', pero puede tomar muchas formas, como los botones de flecha que le permiten recorrer estados predefinidos.

Una implementación estándar puede dejar algunas lagunas de 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, utilizaremos ARIA para crear una conexión entre los botones y el elemento de visualización de valores utilizando el atributo aria-controls. A continuación, dejaremos claro el uso de los botones utilizando aria-label y HTML <label>. Por último, utilizaremos la función aria alert y el atributo aria-live para que nuestro usuario sepa cuándo se está actualizando el valor.

Veamos cómo es ese código:

Popups ARIA y Hover Tooltips

Cuando se equipa un sitio con ARIA, es habitual utilizar la "accesibilidad progresiva". La idea que subyace a este término es que llevar un sitio o una aplicación web desde su forma básica hasta que sea totalmente accesible es una tarea de enormes proporciones. Para hacer frente a esto de forma que siga avanzando, puedes implementar nuevas funciones de forma progresiva e iterativa.

En el caso de un tooltip con un popup o modal relacionado, esto significa que podemos dividir el problema en dos pasos, desplegando cada uno como podamos. En este caso, el tooltip del que hablamos es la imagen común de un pequeño signo de interrogación que abre información adicional cuando se pasa por encima.

Para que los usuarios sepan que la imagen del signo de interrogación es en realidad un tooltip, lo hemos definido utilizando un rol apropiado, así:

Sin embargo, hay algunos problemas con esta implementación. Es posible que los usuarios no sean conscientes de que al pasar el ratón por encima de la información sobre herramientas se inicia una ventana emergente con más información. Así es como podemos añadir eso a nuestro código:

Información de entrada accesible

En lugar de un tooltip basado en hover, también es común que una aplicación web utilice formularios donde cada entrada tiene su propio tooltip asociado.

Sin un marcado ARIA adicional, puede ser difícil saber qué información sobre herramientas se aplica a qué entrada para un usuario. No tener esta relación puede hacer que tu texto de ayuda sea inútil en algunos casos.

Para corregir esto, envolveremos nuestros tooltips dentro de sus propios elementos. Cada uno de ellos puede ser anidado cerca de su entrada relacionada, tener sus relaciones establecidas con ARIA, y luego puede ser activado con JavaScript (o simplemente CSS si eres astuto).

Esto es lo que podría parecer:

Alertas de estado

"Nuestro servicio no funciona en este momento", "Su cuenta está suspendida", y otras alertas de estado relacionadas son de uso común entre las aplicaciones web, y muestran información importante para los usuarios. Sin ARIA, pueden quedar enterradas entre la información de una página y causar diversos problemas.

Utilizando el rol alert de ARIA y el atributo aria-live, podemos asegurarnos de que nuestros usuarios sean conscientes de cualquier problema rápidamente una vez que llegan a una página.

Podemos configurar este tipo de alerta de estado así:

Creación de una barra de herramientas

Por último, echemos un vistazo a otro elemento de control habitual 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. Encima de esta tabla, nuestra barra de herramientas tiene varios botones que permiten a los usuarios ordenar la tabla de varias maneras. Estos botones incluyen opciones de ordenación clásicas como de la A a la Z y de la Z a la A.

Desde el punto de vista de la relación, esto deja algunos problemas de accesibilidad. En primer lugar, no está claro que esos botones afecten a la tabla; lo resolveremos con el atributo aria-controls. 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, usaremos el rol toolbar. Por último, un usuario no sabe necesariamente qué botón se ha pulsado por última vez. Para corregir esto, utilizaremos el atributo aria-pressed.

Al utilizar el atributo aria-pressed, es importante tener en cuenta que tendrás que actualizar estos elementos cuando el usuario interactúe con ellos. Esto probablemente requerirá cambiar los atributos a través de JavaScript o jQuery.

Este es el aspecto de nuestro código de la barra de herramientas:

Añadir ARIA a tus propias aplicaciones web

Con este puñado de nuevos esquemas de control y relaciones en tu haber, estás en camino de hacer tu propia aplicación web totalmente accesible. Una vez que hayas añadido estas nuevas marcas, piensa en cómo podrías aplicar estos atributos a otras partes de tu interfaz de usuario para maximizar la usabilidad de tu creación.

¿Hay atributos, roles u otras características de ARIA que te gustaría conocer? ¿O tal vez tienes algunas preguntas sobre tus propias implementaciones, o correcciones para este artículo? ¡Ponte en contacto con nosotros en la sección de comentarios de abajo o etiquetando a kylejspeaker en Twitter!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.