Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Accessibility
Code

Accesibilidad Web: Guía de Inicio a ARIA

by
Length:MediumLanguages:
This post is part of a series called Web Accessibility With ARIA.
Hands-on With ARIA: Homepage Elements and Standard Navigation

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

Final product image
What You'll Be Creating

Usando solo html estándar, las apps web actuales pueden bloquear el acceso a la información de usuarios con necesidades de accesibilidad especiales.

HTML es el lenguaje predominante online, usado por casi el 83% de los sitios web existentes. Aunque se han dado algunos cambios desde su creación hace 25 años, algunos de ellos incluso recientes, como HTML5 y AMP, deja mucho que desear todavía–especialmente en lo relativo a la accesibilidad. Aquí es donde entra en juego ARIA. En este tutorial, voy a explicar qué es ARIA, por qué es útil para tu sitio web, y un par de métodos para implementarlo en tu sitio.

¿Qué es ARIA?

ARIA, también conocido como WAI-ARIA, es el acrónimo de The Accesibility Initiative’s Accesible Rich Internet Applications (Iniciativa para Aplicaciones de Internet Ricas en Accesibilidad). Puedes encontrar la documentación completa de la especificación aquí. Advierte que la documentación completa de la especificación es bastante densa, así que podría ser una buena idea empezar leyendo este artículo y consultar después algunos otros recursos cuyos enlaces cito más adelante.

El principal propósito de ARIA es permitir una estructura semántica avanzada dentro de HTML como contrapartida a la naturaleza sintácticamente dura de HTML. En otras palabras, HTML le indica al navegador dónde van las cosas, y ARIA le indica cómo deben interactuar.

¿Quién es responsable de ARIA?

ARIA es un proyecto albergado por W3C (World Wide Web Consortium). El proyecto se adhiere a los mismos estándares de actualización y edición de sus otras iniciativas. También proporcionan un repositorio en GitHub para que realices distintas pruebas y te asegures de que tu sitio web funciona bien tras la implementación.

¿Qué Está Mal en el Código de Mi Actual Sitio?

La mayoría de sitios web que cuentan con un diseño estructurado y bien concebido tienen un buen rendimiento en lo que respecta a las tecnologías adaptativas (por ej. Los lectores de pantalla). Sin embargo, es muy distinto que un usuario sea capaz de imaginar cómo usar tu sitio a que le sea fácil usarlo. Los usuarios con dificultades de visión son casi un 2% del total de la población, y para ellos, esta diferencia implica invertir un tiempo significativo y un trabajo de deducción cuando intentan realizar tareas online básicas. Puede ser la diferencia entre ofrecer a los usuarios una experiencia espectacular y proporcionar una navegación enmarañada y confusa.

Más allá de los medios tradicionales para la accesibilidad,ARIA está encontrando sus propios métodos tecnológicos para proporcionar nuevas propuestas relativas a los estándares de interacción. El aumento de sistemas asistidos por voz, navegación agregada (como ordenadores integrados en vehículos, por ejemplo), y otras innovaciones están utilizando ARIA, sacando provecho del aumento de sus capacidades semánticas.

Ok pero, ¿Qué Hace?

En general, ARIA conecta entre sí distintos elementos de forma semántica. Proporciona al usuario significados adicionales relacionados con la interacción. Aquí tienes algunos ejemplos sobre cómo funciona en la vida real:

  1. Asociación de elementos no anidados: Con simple HTML, el navegador del usuario solo puede reconocer relaciones basadas en las relaciones con sus padres/hijos. En algunas situaciones, sin embargo, podríamos desear usar una serie de botones paralelos al contenido dentro de la jerarquía HTML. Con ARIA, podemos definir qué tipo de controlador es cada uno de los botones, y qué elementos controla en cualquier sitio del documento.
  2. Declaración de los elementos interactivos: Mientras HTML proporciona un puñado de elementos para la interactividad, ARIA define docenas más, permitiendo descripciones más granulares de lo que cada elemento de tu página puede hacer. Además, estos pueden ser asignados en etiquetas HTML que no serías usadas normalmente para este propósito pero que podrían tener sentido en tu caso específico. Por ejemplo, podrías usar la etiqueta <li> para una serie de checkboxes que preferirías no estuviesen compuestas por elementos de formulario.
  3. Notificaciones en tiempo real de actualización de área. Otra funcionalidad que proporciona ARIA en la definición de un área de contenido “viva”. Cuando definimos de esta manera un área de contenido, ARIA notificará al usuario siempre que el contenido dentro de dicho elemento cambie. Esto puede ser útil para asegurarnos de que los usuarios con dificultades de visión sean conocedores de que algo ha cambiado en tu página.

Añadir ARIA a Tus Páginas Web

Hemos hablado sobre lo que puede hacer ARIA, veamos ahora algunos de ejemplos frecuentes de aplicación. Empezaremos cada sección con una breve declaración del objetivo que pretendemos alcanzar, seguido de una muestra de código para su implementación.

Crear Etiquetas Alternativas Con ARIA

Cuando se trata de etiquetados alternativos, la mayoría de desarrolladores están familiarizados con el atributo alt, empleado normalmente en las etiquetas HTML <img>. Esta etiqueta sirve para un importante propósito: describir la imagen a la que está asociada para incrementar su accesibilidad (o como técnica SEO habitual, dependiendo de tu perspectiva).

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

Definir Elementos de Interfaz de Usuario Específicos de ARIA

HTML ya proporciona algunos elementos para la creación de sitios web, pero se centra principalmente en definir un área de forma genérica y ofrecer al usuario la estructura del sitio. ARIA proporciona algunas docenas más de elementos que están más centrados en la manera en la que se utilizará el elemento, por ejemplo un temporizador, un tooltip, o una barra de progreso.

El ejemplo que usamos aquí es un tooltip que podrías encontrar en un formulario. Existen varias formas de crearlo, desde un enlace de formulario que llama a algún JavaScript hasta un elemento que crea un modal cuando situamos el puntero sobre él. La parte que falta es que independientemente de cómo funcione para los usuarios con buena visión, es posible que los usuarios con visión deficiente ni siquiera adviertan su existencia.

Puedes definir un tooltip usando ARIA de la siguiente forma:

Definiciones Disponibles para ARIA

Para ampliar estos elementos UI, aquí tienes una breve lista de los “roles” que puedes definir. El listado completo está disponible en el mencionado documento sobre sus especificaciones.

  • search
  • banner
  • presentation
  • toolbar
  • status
  • menuitem
  • log
  • dialog
  • link

Establecer Relaciones Externas a la Estructura Padre/Hijo

Ampliemos ahora algo que apuntamos anteriormente: la estructura forzada de HTML. Aunque la relación padre/hijo es buena para decidir cómo deberían organizarse las cosas, no es suficiente cuando necesitamos conexiones más significativas. Un ejemplo de esto son los elementos hermanos. Algunas librerías han añadido la posibilidad de que algunas relaciones entre elementos u otras modalidades puedan atravesarse, pero esto sucede normalmente en JavaScript u otro lenguaje fuera del código de la estructura.

ARIA nos da la posibilidad de definir estas relaciones directamente en el código, facilitando la agrupación de los elementos de menú, crear navegaciones no estándares, y vincular controles a áreas de elementos que sería complicado conseguir de otra forma. Echemos un vistazo a cómo podríamos usar esto para conectar algunos controles a áreas de contenido:

Echemos un vistazo a cómo podríamos usar esto para conectar algunos controles a áreas de contenido:

Este fragmento indica que la imagen nextbutton.jpg es un botón, que es un control para el <div> tutorial que le sigue a continuación.

Crear Elementos “Vivos” con ARIA

La última funcionalidad de ARIA que vamos a ver aquí es el atributo aria-live. Mientras la mayoría de las otras características de ARIA gestionan las relaciones semánticas, ésta está directamente relacionada con la idea de proporcionar a los usuarios notificaciones sobre los cambios en el contenido de los elementos.

Para muchas personas con visión reducida, no será claro de inmediato que su interacción con su sitio ha causado un cambio en cualquier otro sitio de la página. Esto puede ser especialmente cierto en el caso de pequeño o sutiles cambios en la página, como pequeños bocadillos emergentes cuyo texto podrían cambiar pero permanecer prácticamente con igual longitud. Al usar este atributo, cada vez que el contenido cambia dentro del elemento definido, tus usuarios serán notificados.

Podemos añadir este atributo a un elemento como este:

Hacer De la Web Sea un Mejor Lugar para Todos los Usuarios

Con un poco más de un 2% de la población estadounidense con algún tipo de discapacidad visual, mejorar la accesibilidad de tu sitio web puede aumentar su audiencia considerablemente. Para aquellos que cuentan con sitios que se dirigen a múltiples países, esa cifra incluso aumenta. Además de la accesibilidad, ARIA proporciona una forma de que las interfaces no pertenecientes a los navegadores utilicen tu sitio, con un gran número de dispositivos basados en voz que ya son compatibles.

Implementar ARIA ayudará a tus usuarios y a aumentar tu tráfico, ¡así que aprende a utilizarlo!

He olvidado algún detalle, ¿o tienes preguntas adicionales? ¡Déjanos un comentario!

Si quieres profundizar en la documentación de ARIA o probar la herramienta para realizar pruebas, consulta la siguiente lista:

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.