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

Manos a la Obra con ARIA: Accesibilidad para el eCommerce

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

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

¿Quieres hacer tu sitio web más accesible? ¿O quizá quieres que sea más fácil recorrerlo en general usando los navegadores y otras interfaces? Mediante el uso de ARIA, puedes lograr ambas cosas. Repasemos qué es ARIA y veamos sus beneficios para un sitio web de eCommerce. También mostraremos algunos ejemplos paso a paso.

¿Qué es ARIA?

WAI-ARIA proviene de Iniciativa para una Web Accesible – Aplicaciones de Internet Accesibles. Esta iniciativa toma forma en un conjunto directrices y atributos mantenidos por la W3C. Gracias a estos atributos, podemos crear relaciones entre los elementos de nuestro sitio que no podrían ser expresados usando únicamente HTML. Lo más importante para cumplir nuestro actual objetivo es que podemos definir relaciones entre elementos más allá de la clásica padre-hijo, y conectar con mayor claridad elementos de la interfaz del usuario para asistir a nuestros usuarios.

En este punto, podría ser una buena idea consultar nuestro artículo inicial sobre ARIA para recordar algunos de sus fundamentos.

Implementar ARIA en un eCommerce

Con anterioridad, hablamos sobre cómo aplicar ARIA en un sitio genérico como pueda ser una la página de inicio de un pequeño negocio. Ahora vamos echar un vistazo más detallado a cómo ARIA puede mejorar la experiencia de usuario en grandes sitios web de eCommerce.

Vamos a centrarnos en cuatro áreas clave de un eCommerce que ejemplifican situaciones especiales: las páginas de los productos, las páginas de categoría (o páginas de agregación de productos), la navegación de varios niveles y la facetada. Utilizaremos estos dos bocetos para a modo de ejemplo para guiar el proceso:

Product Page Wireframe
Boceto para una página básica de producto.
Category Page Wireframe
Boceto de ejemplo de página que lista varios productos.

Preparar la Implementación de ARIA

En el caso de la mayoría de los sitios web, añadir ARIA es un proceso bastante sencillo. Defines las secciones de tu web, las desglosas en landmarks y elementos, y añades el código necesario.

En nuestro sitio de eCommerce vamos a seguir un proceso similar, pero ahora tenemos una nueva capa de complejidad. Con la complejidad que implica un sitio de eCommerce, ARIA puede convertirse en muchas ocasiones en algo laberíntico o confuso. Aunque es cierto que es importante mejorar la accesibilidad de tu web tanto como te sea posible, por desgracia, en muchas ocasiones nos toparemos con limitaciones derivadas del negocio en sí. Por este motivo, queremos planificar con un poco de anticipación, priorizando cada una de nuestras implementaciones de ARIA.

Con esta priorización, podemos asegurarnos que en primer lugar mejoraremos los aspectos más importantes de nuestro sitio, mejorando la experiencia de usuario tanto como nos sea posible.

Vamos a ponernos en marcha echando un vistazo a algunas páginas de productos.

ARIA para las Páginas de Producto

Se trata de una página común en cualquier sitio web de eCommerce, este tipo de páginas normalmente muestran un único producto acompañado de un botón para añadirlo a nuestro carrito de compra. Deberíamos considerar cada uno de estos elementos interactivos de forma independiente.

Vamos a diseccionar la página de producto de nuestro ejemplo de la siguiente manera: la información principal del producto, los elementos interactivos relacionados con el producto, nuestro botón para añadir al carrito, y una sección de contenido que amplía la información.

Si tuviésemos que priorizar la implementación en esta página, lo haríamos de la siguiente forma:

  1. Información principal del producto, elementos interactivos, y el botón para añadir al carrito.
  2. Contenido que amplía la información del producto.

El factor principal que está en juego aquí es algo de lo que ya hablamos en un artículo anterior: ARIA nos ayuda a definir el propósito de un elemento. En el caso del contenido extra, la mayoría de los elementos HTML que se usan cuentan con significados semánticos y propósitos alineados. Esto significa que aunque pudiese ser útil añadir información ARIA adicional si podemos, es algo que tiene menor importancia que en otras áreas.

Información Principal del Producto

Empecemos añadiendo ARIA en la información principal de nuestro producto. Es algo bastante sencillo por la simplicidad de los elementos que se usan aquí. El código será algo similar a esto:

Para los principiantes, añadiremos un rol al div principal, y una relación entre la imagen y el título del producto.

Elementos Interactivos del Producto

Aquí es donde las páginas de producto pueden confundir un poco. Los productos de un sitio de eCommerce pueden tener distintos tipos de variaciones u opciones. Además de los tipos de opciones disponibles, la cantidad de ellos que pueden utilizarse de forma simultánea añade otra capa de complejidad. En nuestro ejemplo, tenemos tres elementos: talla, color y unidades.

Veámos cómo puedes marcar esto. Aquí tienes el código para los elementos de selección y las casillas de verificación mejoradas con ARIA.

Botón Añadir al Carrito

El botón para añadir al carrito es parecido a un botón estándar, pero lo vamos a etiquetar con mayor claridad:

Contenido Adicional del Producto

Por último, el área de contenido adicional es tratado como cualquier área típica de contenido. Aunque dependiendo de tus páginas de producto, podría ser buena idea separar las marcas de tu contenido principal de las de tu contenido complementario. Las pestañas también agregan aquí una capa extra al código. Así es como lo haremos en nuestro ejemplo:

Añadir ARIA en las Páginas de Categoría

Mientras que las páginas de productos pueden ser consideradas una forma alternativa de página de contenido en la mayoría de los respectos, páginas de categoría de un sitio, también llamados páginas de listado de productos (PLPs), están una bestia completamente diferente. Operan como una estructura de gran navegación, permitiendo a los usuarios ordenar a través de cientos o incluso miles de productos.

Esto hace que sean cada vez más complejo, cada vez más capas así como adicionales de contenido y se añaden filtros (vamos a hablar de navegación Facetada y filtros en la sección siguiente). Echemos un vistazo a las áreas de la dos red de nuestro PLP fuera de los filtros: los bloques de producto y la paginación.

Aquí tienes la estructura inicial de nuestro código:

Gestionar la Paginación

Llamamos paginación a los pequeños enlaces que aparecen al final de nuestro listado de productos. Normalmente, se representan en forma de números o flechas, pero pueden tomar otras formas distintas. Desde la perspectiva del HTML, los enlaces de paginación tienen el mismo aspecto que cualquier otro enlace. Pero los nuestros controlan la lista de productos sin redireccionarnos hacia otra página.

Para indicar que controlan el área de contenido de esta forma, tenemos que declararlos como controles, definir qué controlan, y después marcar el área de contenido como dinámica. Aquí tienes el aspecto de nuestro código:

Cuando creamos áreas dinámicas, usamos el ajuste ARIA "polite" que pone a nuestra disposición la especificación ARIA. Si los cambios son pertinentes y deben ser considerados rápidamente por el usuario, o tienes que priorizarlo sobre otras áreas dinámicas, puedes hacer uso del valor "assertive".

Señalando los Elementos Repetitivos

Un desafío único que viene con páginas de inicio de producto es la complejidad de la navegación intensiva dentro de la lista de productos propios. Desde una perspectiva visual, puede ser bastante fácil agrupar la información, utilizando señales visuales para determinar qué información corresponde a qué producto.

Hacerlo con ARIA tiene algunas capas más que las aplicaciones anteriores que hemos cubierto. Un botón de "comprar ahora" un botón estándar de la marca puede crear confusión cuando hay 20 de estos botones en una página. Para resolverlo, debemos crear conexiones claras entre cada producto y sus elementos relacionados.

Así es como haremos esto:

Aunque esto ayuda un poco a clarificantes relaciones para el usuario, todavía no es la mejor aplicación. Una mejor manera sería generar dinámicamente una etiqueta aria concatenando el elemento título del producto con una frase adicional como "añadir al carrito".

Usar ARIA en una Navegación Facetada

Navegación Facetada se refiere a los filtros y opciones que comúnmente aparecen en sitios de comercio electrónico, que permite acotar los resultados de su búsqueda. Éstos vienen en muchos sabores, de tamaños a color y más allá. Para nuestro ejemplo, vamos a hacer dos suposiciones:

  1. Nuestra navegación Facetada actualiza los productos vivo en la página. Esto no siempre es el caso, como a veces sitios de comercio electrónico pueden generar una nueva página cuando se aplica un filtro, pero trabajará como si el contenido del sitio actualizaciones en vivo.

  2. Nuestra navegación Facetada permite la selección de varios filtros. No cada sitio de comercio electrónico hace esto, y definitivamente hay casos donde no debería estar permitido. Sin embargo, esto crea una capa extra de complejidad fuera del alcance de este artículo.

Configurar Nuestros Controles

El código HTML detrás de nuestros filtros es similar a la paginación, que aparecen en el código como eslabones básicos. Para nuestros usos, sin embargo, la intención de los filtros es modificar información que hay actualmente en la página. Debido a esto, te queremos marcar el envase todo alrededor de los filtros, lo que es claro que esto es un controlador para otra área en la página:

Definir Áreas "Vivas"

Como paginación, estas actualizaciones suceden vivo en la página. Debido a esto, te queremos marcar el contenido principal de la página de "vivo". Tenga en cuenta que lo hicimos anteriormente en la sección de paginación, pero voy repitiendo el paso aquí para la consistencia.

El código resultante debería parecerse a esto:

Comprobar Tu Implementación

Ya tenemos todas nuestras implementaciones en su sitio, realicemos ahora algunas comprobaciones. Entre mis herramientas favoritas para esto están las Herramientas de Accesibilidad para Desarrolladores de Google o el Plugin de Asistencia Dinámica de IBM, pero dependiendo de la escala de tu proyecto, podrías necesitar crear tu propio script para las comprobaciones.

Si necesitas una herramienta que funcione independientemente de Chrome, o no te convencen las que acabamos de mencionar, W3C dispone de un listado con herramientas alternativas para la accesibilidad.

Hacer Que el eCommerce Sea Más Accesible

Con estas nuevas incorporaciones a su conjunto de herramientas de ARIA, ahora debe ser capaz de marcar correctamente casi cualquier sitio de comercio electrónico. Para asegurar la mejor experiencia de usuario con un sitio de comercio electrónico, recuerde que debe mantener su navegación tan simple como posible y expresa intención claramente.

¿Tiene más preguntas sobre este tema? ¿Echo de menos algo importante? ¡Me dicen en los comentarios!

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.