Accentsconagua
Share
¿Busca hacer su sitio más accesible? ¿O tal vez desea que sea más fácil recorrer su sitio en general usando navegadores y otras interfaces? Usando ARIA, puedes hacer ambas cosas. Echemos un vistazo a lo que es ARIA y cómo puede beneficiar a un sitio de comercio electrónico. También veremos algunos ejemplos paso a paso..
WAI-ARIA significa las aplicaciones de Internet enriquecidas accesibles mediante la Iniciativa de accesibilidad web. Esta iniciativa toma la forma de un conjunto de pautas y atributos que mantiene el W3C. Usando estos atributos, podemos crear relaciones entre los elementos de nuestro sitio que no se pueden expresar solo a través de HTML. Lo más importante para nuestro uso aquí es que podemos definir relaciones de elementos fuera de la relación padre-hijo y, de manera más clara, conectar elementos de UI para nuestros usuarios..
En este punto, podría ser una buena idea revisar nuestro manual original sobre ARIA para repasar algunos de sus fundamentos..
Anteriormente, hablamos sobre cómo aplicar ARIA a un sitio web general que se asemejaba a una página de inicio común para pequeñas empresas. En esta ocasión, vamos a analizar cómo ARIA puede mejorar la experiencia del usuario en los grandes sitios de comercio electrónico..
Nos centraremos en cuatro áreas clave del comercio electrónico que plantean situaciones únicas: páginas de productos, páginas de categoría (o páginas de productos agregados), navegación multinivel y navegación facetada. Usaremos estos dos esquemas para guiarnos a través del proceso:
Una maqueta de producto muy básica.
Ejemplo de una maqueta de página de listado de productosEn el caso de la mayoría de los sitios web, agregar ARIA es un proceso bastante sencillo. Usted define las partes de su sitio, las descompone en puntos de referencia y elementos, y agrega el código necesario.
Vamos a seguir un proceso similar con nuestro sitio de comercio electrónico, pero ahora tenemos una nueva capa de complejidad. Con la complejidad que viene con los sitios de comercio electrónico, ARIA puede convertirse en un agujero de conejo en muchos casos. Si bien es importante mejorar la accesibilidad de su sitio tanto como sea posible, desafortunadamente, a menudo nos encontramos con restricciones comerciales. Debido a esto, vamos a querer hacer un poco más de planificación por adelantado, priorizando cada una de nuestras adiciones de ARIA.
Al hacer esta priorización, podemos asegurarnos de que los aspectos más importantes de nuestro sitio se mejoren primero, haciendo que la experiencia del usuario sea lo mejor posible en el tiempo disponible..
Vamos a empezar echando un vistazo a algunas páginas de productos.
Una página básica para cualquier sitio de comercio electrónico, estas páginas suelen mostrar un producto, sus variaciones disponibles y una forma de agregar el artículo a un carrito. Cada uno de estos elementos interactivos debe considerarse por separado..
Para la página de nuestro producto, dividámoslo en partes como esta: la información principal del producto, los elementos interactivos que afectan el producto, el botón Agregar al carrito y una sección de contenido expandido.
Si tuviéramos que priorizar la implementación en esta página, nos gustaría agruparla así:
El factor principal en juego aquí es algo de lo que hablamos en un artículo anterior: ARIA ayuda a definir la intención de un elemento. En el caso del contenido expandido, la mayoría de los elementos HTML que se utilizan tienen elementos con un significado semántico y una intención que coincide. Esto significa que si bien es útil colocar información adicional de ARIA si podemos, es probablemente menos importante que completar las otras tres áreas.
Comencemos agregando ARIA a nuestra información de producto principal. Esto es bastante sencillo debido a la simplicidad de los elementos que se utilizan aquí. El código se ve así:
Una bonita bolsa
Tamaño de la bolsa:
100x150mm
Para empezar, agregaremos un rol a la división principal y una relación entre la imagen y el título del producto..
Una bonita bolsa
...
Aquí es donde las páginas de productos pueden ser un poco difíciles. Los productos en un sitio de comercio electrónico pueden tener muchos tipos diferentes de variaciones presentes. Más allá de los tipos disponibles, el número de ellos que puede utilizarse simultáneamente agrega otra capa de complejidad. En nuestro ejemplo, tenemos tres elementos que entran en juego: tamaño, color y cantidad.
Echemos un vistazo a cómo puedes marcar eso. Aquí está el código para los elementos de selección y casilla de verificación mejorados por ARIA:
El botón del carrito es similar a un botón estándar, pero haremos todo lo posible para etiquetarlo más claramente que otros botones:
Finalmente, el área de contenido expandido se trata como un área de contenido típica. Sin embargo, dependiendo de las páginas de sus productos, podría ser una buena idea separar sus puntos de referencia de contenido principal de sus puntos de referencia de contenido complementario. Las pestañas agregan una capa adicional al código aquí también. Así es como lo haríamos en nuestro ejemplo:
- Información del producto
Más información del producto ...
Si bien las páginas de productos se pueden considerar una forma alternativa de contenido en la mayoría de los aspectos, las páginas de categoría de un sitio, también llamadas Páginas de Lista de Productos (PLP), son una bestia completamente diferente. Funcionan como una gran estructura de navegación, lo que permite a los usuarios clasificar entre cientos o incluso miles de productos.
Esto los hace cada vez más complejos, y más aún a medida que se agregan capas adicionales de contenido y filtros (hablaremos sobre la navegación por facetas y los filtros en la siguiente sección). Veamos las dos áreas principales de nuestro PLP fuera de los filtros: los bloques de productos y la paginación.
Aquí está nuestro marco de código de inicio:
Página de listado de productos
Color Sort
Rojo verde negroClasificar tamaño
Grande pequeño...Una bonita bolsa
1 2 3… Último
Paginación es el nombre dado a los pequeños enlaces en la parte inferior de nuestros listados de productos aquí. Por lo general, están representados por números o flechas, pero pueden venir en otras formas. En el lado HTML de las cosas, los enlaces de paginación se ven igual que los enlaces regulares. Diremos que el nuestro controla las listas de productos sin redirigir a otra página.
Para que se sepa que está controlando un área de contenido de esta manera, debemos declararlo como controlador, definir qué está controlando y luego marcar ese área de contenido como viva. Esto es lo que parece en nuestro caso:
...
Cuando creamos nuestra área de vida aquí, utilizamos el "Cortés" Configuración que hace disponible ARIA. Si sus cambios son pertinentes y deben ser abordados por el usuario rápidamente, o si necesita establecer prioridades entre varias áreas en vivo, puede usar el valor "positivo" también.
Un desafío único que surge con las páginas de destino del producto es la complejidad de la navegación intensiva dentro de las listas de productos. Desde una perspectiva visual, puede ser bastante fácil agrupar la información, usando indicaciones visuales para determinar qué información se aplica a qué producto.
Hacerlo con ARIA tiene algunas capas más que las aplicaciones anteriores que hemos cubierto. Al marcar un botón de "comprar ahora", un botón estándar puede crear confusión cuando hay 20 de estos botones en una página. Para resolver esto, necesitaremos crear conexiones claras entre cada producto y sus elementos relacionados.
Así es como lo haremos:
...Una bonita bolsa
Si bien esto ayuda un poco a aclarar las relaciones para el usuario, todavía no es la mejor implementación. Una mejor manera sería generar dinámicamente una etiqueta aria al concatenar el elemento del título del producto con una frase adicional como "agregar al carrito".
La navegación por facetas se refiere a los filtros y opciones que se muestran comúnmente en los sitios de comercio electrónico, lo que le permite limitar los resultados de búsqueda. Estos vienen en muchos sabores, desde tamaños hasta colores y más allá. Para nuestro ejemplo, vamos a hacer dos suposiciones:
Nuestra navegación por facetas actualiza los productos en vivo en la página. Este no es siempre el caso, ya que a veces los sitios de comercio electrónico pueden generar una nueva página cuando se aplica un filtro, pero trabajaremos como si el sitio actualizase el contenido en vivo..
Nuestra navegación facetada permite la selección de múltiples filtros. No todos los sitios de comercio electrónico hacen esto, y definitivamente hay casos en los que no debería permitirse. Sin embargo, esto crea una capa adicional de complejidad fuera del alcance de este artículo..
El HTML detrás de nuestros filtros es similar al de la paginación, que aparece en el código como enlaces básicos. Para nuestros usos, sin embargo, la intención de los filtros es alterar la información que se encuentra actualmente en la página. Debido a esto, desearemos marcar todo el contenedor alrededor de los filtros, dejando en claro que se trata de un controlador para otra área de la página:
Al igual que la paginación, estas actualizaciones están sucediendo en vivo en la página. Debido a esto, desearemos marcar el contenido principal en nuestra página como "en vivo". Tenga en cuenta que lo hicimos anteriormente en la sección de paginación, pero repetiremos el paso aquí para mantener la coherencia..
El código debería verse así:
...Una bonita bolsa
Nuestras implementaciones ya están en su lugar, por lo que vamos a someterlas a algunas pruebas. Mis herramientas favoritas para hacerlo incluyen las herramientas de desarrollo de accesibilidad de Google o el complemento del Asistente dinámico de IBM, pero dependiendo de la escala de su proyecto, es posible que necesite crear su propio script de prueba.
Si necesita una herramienta que funcione fuera de Chrome, o simplemente no prefiere las dos mencionadas anteriormente, W3C tiene una lista de otras herramientas de accesibilidad disponibles..
Con estas nuevas adiciones a su conjunto de herramientas ARIA, ahora debería poder marcar adecuadamente cualquier sitio de comercio electrónico. Para garantizar la mejor experiencia de usuario con un sitio de comercio electrónico, recuerde mantener su navegación lo más simple posible y exprese la intención con claridad..
¿Tiene más preguntas sobre este tema? ¿Me perdí algo importante? Cuéntame en los comentarios a continuación.!
