Manos a la obra con ARIA: Elementos de página de inicio y de sistemas de navegación

¿Quieres que tu sitio web sea más accesible? ¿Quieres ser el primero conforme surgen en el mercado nuevas interfaces online? No busques más, lo que necesitas es ARIA.

Este conjunto de estándares, mantenido por W3C (World Wide Web Consortium) te proporciona lo mejor de ambos mundos al añadir ciertos atributos que te permitirán ampliar el código HTML en formas semánticas. Aquí, hablaremos de lo que es ARIA, veremos cómo puede beneficiar a un sitio internacional, y también veremos casos de uso paso a paso y con ejemplos de código. ¡Empecemos!

Fundamentos de ARIA

ARIA (llamado en ocasiones WAI-ARIA) es el acrónimo de un conjunto de estándares de accesibilidad, denominado Web Accessibility Initiative–Accessible Rich Internet Applications. Puedes consultar más sobre los fundamentos de ARIA en mi anterior artículo, pero repasemos ahora algunos de sus pilares.

• 
  HTML
  Accesibilidad Web: Primeros Pasos Con ARIA
  Kyle Speaker

Definir relaciones no-tradicionales

Una gran mayoría de sitios web están creados con HTML, el cual relaciona unos elementos con otros principalmente de un modo jerarquizado a través de relaciones padre-hijo. Este tipo de estructura es fantástico para definir contenido, pero falla a la hora de definir las interfaces de usuario. Por ejemplo, en muchos sitios y aplicaciones web, un área de contenido está controlada por botones dentro de un elemento hermano—los hermanos tienen el mismo elemento padre, pero en HTML no tienen una relación directa entre sí. Debido a esto, es complicado definir qué elementos de Interfaz de Usuario (UI) controlan cada pieza de contenido cuando se usan tecnologías de asistencia.

Esto también nos lleva a nuevas interfaces. Por ejemplo, si estás intentando navegar en un sitio web a través de un dispositivo móvil, la tarea será complicada si los cambios de los elementos no son visibles.

ARIA te permite relacionar elementos HTML usando atributos adicionales para representar este tipo de controles.

Una clasificación de elemento no-rígida

Otro defecto del HTML es su incapacidad para separar la estructura de la intención.

Por ejemplo, podrías querer convertir un elemento imagen en un botón clicable. Sin embargo, HTML todavía define esa imagen únicamente como imagen, y cualquier cosa más allá de esto sucede en cualquier otro sitio.

Con ARIA, podemos asignar la intención de un elemento de forma independiente, permitiéndonos marcar las imágenes como botones o definir un enlace como tooltip. Esto proporciona mayor control al desarrollador sobre la interfaz de usuario, creando un conjunto de relaciones más claras.

Crear de áreas de puntos de referencia (landmarks)

Más allá de marcar elementos dentro de la UI, ARIA también nos dá acceso a un atributo de rol—empleado para definir áreas en una página. Por ejemplo, podrías marcar tu menú principal como navegación y el área de contenido de tu artículo como contenido principal. Esto hace que sea más fácil para los usuarios moverse entre las áreas importantes de tu sitio web, y puede evitar confusiones en las páginas con maquetaciones complejas o poco comunes.

Caso de estudio: Página de inicio de pequeño negocio

Como ejemplo práctico de cómo añadir ARIA a un sitio, vamos a coger una estructura básica de un sitio que podría valer para un pequeño negocio e implementaremos en ella paso a paso nuestros atributos.

Para mayor claridad, hemos fragmentado el código, y eliminado las clases CSS y cualquier funcionalidad procedente del CMS.

Lo primero que queremos hacer es dividir nuestra página en partes para simplificar la adición de ARIA. En la imagen inferior, verás que hemos dividido el sitio en cinco partes principales:

• Navegación
• Contenido
• Sidebar
• Formularios de contacto
• Elementos UI especializados

En nuestro caso, esto toma la siguiente forma:

Cuando dividimos tu sitio en partes de esta forma, perseguimos dos cosas. La primera es para los elementos que pueden ser definidos por un punto de referencia o landmark de ARIA: banner, navigation, main, complementary, content, info, search, y form. Estos puntos representan las partes necesarias de nuestro sitio, y todo lo que no sea necesario para su uso, no será marcado como landmark (por ej. los anuncios).

Lo segundo en lo que nos debemos fijar son los elementos concretos que deban ser aclarados mediante ARIA. En la mayoría de los casos esto es bastante sencillo (por ejemplo, marcar una imagen como imagen), pero con algunos elementos de interfaz, puede resultar un poco engañoso.

Una vez sepamos en qué áreas debemos implementar ARIA, podremos empezar a repasarlas sistemáticamente. Vamos a comenzar con la navegación del sitio.

Navegación

En nuestro ejemplo, habrás notado que tenemos unos cuantos tipos de navegación. El primero es un menú como el de la mayoría de los sitios, en el que se listan algunas páginas del sitio. Directamente debajo tenemos un menú más pequeño que contiene opciones para los usuarios.

Queremos marcarlos con el atributo role="navigation" de manera que puedan ser detectados fácilmente como menús del sitio. Esto nos lleva a la siguiente pregunta: ¿deberían estar agrupados juntos en un landmark de navegación único, o deberían marcarse por separado?

Para responder a esta pregunta en tus propios proyectos puedes plantearte estas dos preguntas:

1. ¿Es distinta la intención de cada uno de los menús? En nuestro ejemplo, el menú superior sirve para navegar hacia las páginas principales del sitio, mientras que el menú más pequeño se centra en cosas que puedan necesitar los usuarios que hayan iniciado sesión. Estos objetivos son distintos, y por tanto tendría sentido separarlos.
2. ¿Están los menús dentro del mismo elemento padre? Se que esto parece contradictorio, ya que ARIA está diseñado para ayudarnos a superar estos tipos de restricciones en las relaciones entre elementos, pero en este caso no se trata tanto de lo que es posible y sino sobre lo que es correcto para el usuario. Tener definido un único menú, pero ubicar la mitad de este en un sitio y la mitad en otro, hace que la navegación sea más complicada.

En nuestro caso, vamos a tratar nuestras navegaciones como landmarks independientes. Así que vamos a hacer algunos cambios en el código. Y vamos a empezar con el HTML.

Ahora lo notaremos con algunas marcas de referencia.

El siguiente paso para definir estas landmarks consiste en dar al usuario una pista sobre cuál es el objetivo de cada uno de los menús. Si dejamos ambos como navegación sin más, dificultaremos la interpretación de las cosas. Así que vamos a añadirles etiquetas significativas usando el atributo aria-label:

Más allá de esto, queremos añadir código de rol adicional a nuestro menú que permita a los usuarios saber que esto es un menú, y marcar cada enlace que contenga como elemento de menú.