Share
¿Busca hacer su sitio web más accesible? ¿Quiere ser el primero en la línea a medida que las nuevas interfaces en línea llegan al mercado? No busques más allá de ARIA.
Este conjunto de estándares mantenidos por el W3C (World Wide Web Consortium) le ofrece lo mejor de ambos mundos al agregar una serie de atributos que permiten extender el HTML de manera significativa. Aquí, veremos qué es ARIA, veremos cómo puede beneficiar a un sitio web informativo y veremos un caso de uso paso a paso con ejemplos de códigos. Empecemos!
ARIA (o, a veces, WAI-ARIA) es el acrónimo de un conjunto de estándares de accesibilidad, denominados aplicaciones de Internet enriquecidas accesibles a la Iniciativa de accesibilidad web. Puedes ver más sobre los fundamentos de ARIA en mi artículo anterior, pero repasemos algunos de sus pilares ahora.
La mayoría de los sitios web se crean utilizando HTML, que se relaciona principalmente entre sí de manera jerárquica a través de las relaciones entre padres e hijos. Esta estructura es excelente para definir contenido, pero se queda corta cuando se trata de definir interfaces de usuario. Por ejemplo, en muchos sitios y aplicaciones web, un área de contenido se controla mediante botones dentro de un elemento hermano: los hermanos tienen el mismo elemento principal, pero en HTML no tienen una relación directa entre ellos. Debido a esto, se hace difícil definir qué elementos de la interfaz de usuario (UI) controlan qué partes del contenido cuando se utilizan tecnologías de asistencia..
Esto lleva a través de interfaces más nuevas también. Por ejemplo, si está intentando navegar un sitio web a través de un dispositivo inteligente, se vuelve difícil cuando los cambios de elementos no son visibles.
ARIA le permite vincular elementos HTML utilizando atributos adicionales para representar estos tipos de controles.
Otra deficiencia de HTML es su incapacidad para separar la estructura de la intención.
Por ejemplo, es posible que desee convertir un elemento de imagen en un botón en el que se pueda hacer clic. Sin embargo, HTML aún define en gran medida esa imagen como solo una imagen, y todo lo que sucede más allá de eso sucede en otros lugares.
Con ARIA, la intención se puede separar de un elemento, lo que permite que las imágenes se marquen como botones o que un enlace se defina como información sobre herramientas. Esto le da más control al desarrollador con respecto a la interfaz de usuario, creando relaciones más claras.
Más allá de marcar elementos dentro de la interfaz de usuario, ARIA también brinda acceso al atributo de rol, que se utiliza para definir áreas de una página. Por ejemplo, puede marcar su menú principal como navegación y el área de contenido de su artículo como contenido principal. Esto facilita que los usuarios se muevan a través de las áreas importantes de su sitio, y pueden evitar confusiones para aquellos con diseños de sitios poco comunes o complejos..
Para obtener algo de experiencia en la adición de ARIA a un sitio, vamos a tomar un alámbrico de un sitio que podría ser utilizado por una pequeña empresa e implementar nuestros atributos paso a paso.
La página alámbrica que estaremos marcando.En aras de la claridad, el código con el que trabajaremos se simplifica, se eliminan las clases de CSS y cualquier funcionalidad de un CMS.
Lo primero que querremos hacer es dividir nuestro alámbrico en partes para que agregar ARIA sea más simple en general. En la siguiente imagen, verás que he elegido dividir el sitio en cinco partes principales:
En nuestro caso, se ve así:
Las secciones con las que estaremos trabajando.Al dividir su sitio en áreas como esta, estamos buscando dos cosas. El primero es para los elementos principales que pueden definirse mediante un hito ARIA: banner, navegación, principal, complementario, información de contenido, búsqueda y formulario. Estos representan las partes necesarias de nuestro sitio, y cualquier cosa innecesaria para su uso no se marcará como un hito (por ejemplo, anuncios).
Lo segundo que debe buscar es elementos específicos que deben aclararse con ARIA. En la mayoría de los casos, esto es bastante simple (como marcar una imagen como una imagen), pero para algunos elementos de la interfaz de usuario, puede ser un poco complicado.
Una vez que sepamos qué áreas necesitan tener implementado ARIA, podemos comenzar a avanzar en ellas de manera sistemática. Empecemos con la navegación del sitio..
En nuestro ejemplo, notará que tenemos algunos tipos de navegación. El primero es un menú como se ve en la mayoría de los sitios, con una lista de algunas páginas del sitio. Directamente debajo hay un menú más pequeño que contiene opciones para los usuarios..
Queremos marcarlos con el role = "navegación" Atributos para que puedan seleccionarse fácilmente como los menús del sitio. Esto lleva a la pregunta: ¿deben agruparse en un único punto de referencia de navegación o marcarse como dos puntos de referencia separados??
Para responder a esta pregunta en sus propios proyectos, normalmente puede hacerse dos preguntas:
¿Es diferente la intención de estos menús? En nuestro ejemplo, el menú superior navega por las páginas de pilares del sitio, mientras que el menú más pequeño se centra en las cosas que un usuario conectado podría necesitar. Estos intentos son diferentes, por lo que tiene sentido separarlos.
¿Están los menús dentro del mismo elemento padre? Sé que esto parece contrario a la intuición, ya que ARIA está diseñado para ayudarnos a superar este tipo de restricciones de relación, pero en este caso se trata menos de lo que es posible y más de lo que es correcto para el usuario. Tener un solo menú definido, pero con la mitad en un lugar y la otra mitad en otro, hace que la navegación sea más difícil.
Para nuestro caso, vamos a tratar nuestras navegaciones como dos puntos de referencia separados. Así que haremos algunos cambios en el código. Para empezar, solo tenemos nuestro HTML básico:
- Casa
- Acerca de
- Servicios
- Ubicación
- Contáctenos
- Iniciar sesión
- Cuenta
- Ajustes
Ahora, lo anotaremos con algunos puntos de referencia..
El siguiente paso para definir estos puntos de referencia es dar al usuario una pista sobre cuál es la intención de cada menú. Si los dejamos a ambos como navegación sin más información, solo hace que las cosas sean más difíciles de interpretar. Así que vamos a agregarles etiquetas significativas usando el aria-label atributo:
Más allá de eso, desearemos agregar un marcado de rol adicional a nuestro menú para que los usuarios sepan que este es un menú y marcar cada enlace como un elemento del menú:
Ahora en el área de contenido. Aquí, marcaremos el contenedor que contiene la totalidad de nuestro contenido principal con role = "main". Una vez más, para comparación, aquí está nuestro código de inicio.
Lorem ... scelerisque ...
Y aquí está lo que parece después de agregar el "principal" punto de referencia.
Lorem ... scelerisque ...
Dentro de ese contenido, continuaremos buscando cualquier elemento que tenga una intención que no coincida con su definición HTML.
Primero, nos encargaremos de que la imagen actúe como un botón agregando el "botón" papel:
Este enlace que activa un modal es un poco más complicado, porque depende de lo que está en el modal mismo. Para nosotros, vamos a decir que es una información sobre herramientas:
scelerisque
Dentro de nuestro contenido principal, también tenemos un formulario de búsqueda. Esto tiene una capa adicional de complejidad, ya que es un formulario de búsqueda que utiliza elementos HTML y también califica como un punto de referencia de cuadro de búsqueda. Lo marcaríamos así:
Más allá de eso, puede definir cada elemento con su etiqueta ARIA adecuada. Para la mayoría de los sitios, esto puede suponer una gran carga de tiempo para el proceso de desarrollo, aunque en la mayoría de los CMS se puede automatizar. En los casos en los que no puede ser, si la definición HTML de un elemento coincide con su intención de uso, entonces puede considerarse de baja prioridad al realizar implementaciones ARIA. Así es como se ve el área de contenido principal después de realizar todos estos cambios:
Lorem ... scelerisque ...
La barra lateral de un sitio puede tomar muchas formas. En nuestro caso, proporciona contenido adicional relacionado con el sitio, con una lista de publicaciones relacionadas en la parte inferior..
Aquí está el marcado de inicio para la barra lateral:
Para definir el contenido, queremos darle la "complementario" función, que los usuarios sepan que la información en la barra lateral es contenido adicional relacionado con el contenido principal. Eso puede verse así:
Más acerca de nosotros
Lorem ...
Las publicaciones relacionadas a continuación podrían considerarse una forma de navegación, permitiendo a los usuarios explorar más a fondo las publicaciones del sitio. Queremos marcarlo con un "navegación" papel, y le dan una etiqueta adecuada, como tal:
La barra lateral de cada sitio es diferente y puede requerir una combinación diferente de roles y puntos de referencia. Si su barra lateral tiene un anuncio, es mejor no marcar ese elemento. Si hay un formulario de búsqueda dentro de la barra lateral, márquelo también con el rol apropiado. Cualquier menú que aparezca en una barra lateral debe seguir el mismo patrón que explicamos en la sección de navegación:
Accentsconagua
"navegación" punto de referencia"menú" papel para el contenedor de menú"opción del menú" para cada uno de los elementos anidadosAsí es como se ve nuestra barra lateral final:
Finalmente, en la parte inferior de nuestra página hay un formulario de llamada a la acción, que solicita el nombre del usuario y el correo electrónico, con un botón de envío estándar a continuación. Cuando se trata de formas, hay tres partes a tener en cuenta:
Dar a la forma el papel emblemático de "formar": dado que el formulario es una parte importante del sitio, debemos facilitar que los usuarios puedan acceder a él. Lo hacemos dándole un papel de referencia.
Asigna roles coincidentes a los elementos. Los formularios son un área común para que las definiciones de intención y HTML no coincidan. Agregue los roles de ARIA cuando sea necesario, especialmente cuando se trata de casillas de verificación, controles deslizantes, información sobre herramientas y otros elementos que se pueden implementar de varias maneras.
Empareja las etiquetas con los elementos apropiados. HTML maneja esto de una manera básica, permitiéndole usar el Elemento para asociar una etiqueta con una entrada. Las formas pueden tener fácilmente una estructura más compleja que impide que funcione; afortunadamente podemos arreglar eso con el aria-labelledby atributo.
Echemos un vistazo a cómo se ve nuestro código actualizado:
