Claves para desarrollar una ‘flip card’ accesible

En la era digital actual, es fundamental que el diseño y desarrollo de web y apps tenga en cuenta que todos los componentes de una página web puedan ser utilizados sin barreras. A lo largo de este artículo exploraremos las mejores prácticas, pautas y consideraciones clave para garantizar que nuestras flip cards sean accesibles y cumplan con los estándares de las Pautas de Accesibilidad para el Contenido Web (WCAG). Además de las pautas, recogemos toda la experiencia de MTP en el ámbito de la accesibilidad digital.

¿Qué es una flip card?

Una flip card o también conocida en español como ‘tarjeta giratoria’ es un componente de la interfaz de usuario que simula el funcionamiento de una tarjeta física. Por lo tanto, las flip cards son elementos interactivos que muestran contenido en ambas caras, y que para poder ver todo el contenido, tienes que interactuar con la tarjeta para darle la vuelta y así revele la información oculta que se encuentre en la otra cara.

¿Qué hay que tener en cuenta para que sea accesible?

A la hora de desarrollar un componente que sea accesible, hay que tener en cuenta ciertas características que veremos a continuación, que garantizarán que la flip card, en este caso, es totalmente funcional para todos los usuarios.

Este enfoque incluirá la aplicación de los criterios de accesibilidad establecidos por las WCAG, para asegurar una experiencia inclusiva y accesible para aquellos usuarios que puedan tener alguna discapacidad.

A continuación, exploramos algunos de los criterios clave que se deben tener en cuenta para garantizar la accesibilidad de la flip card:

– Contenido no textual (Criterio 1.1.1): Si la tarjeta contiene imágenes, asegúrate de proporcionar texto alternativo adecuado para estas dentro de la tarjeta, especialmente si contienen información importante.

– Teclado (Criterio 2.1.1): Asegúrate de que la tarjeta se pueda operar completamente mediante el teclado para garantizar la accesibilidad para personas que no utilizan un ratón.

– Foco visible (Criterio 2.4.7): La tarjeta debe ser fácilmente identificable visualmente cuando recibe el foco, permitiendo una clara percepción de su estado resaltado.

– Cancelación del puntero (Criterio 2.5.2): Proporciona un mecanismo claro y accesible para que los usuarios puedan cancelar la acción del puntero, como mover el ratón fuera del área de la tarjeta antes de soltar el botón.

– Nombre, función, valor (Criterio 4.1.2): Revisa que la tarjeta tenga un nombre y una función claramente identificables para que los usuarios comprendan su propósito.

Buenas prácticas para mejorar la accesibilidad en las flip cards

Además de estos criterios específicos de las WCAG, ten en cuenta algunas prácticas generales para mejorar la accesibilidad en las flip card:

– Semántica de la tarjeta: Emplea la etiqueta <button> en lugar de <div> para mejorar la semántica y la accesibilidad de la flip card. Esto proporciona una estructura HTML más clara y ayuda a los usuarios que dependen de lectores de pantalla al indicar que el componente es interactivo y puede ser activado.

– Texto y contraste: Se debe garantizar que la tarjeta sea legible, teniendo en cuenta el contraste de colores ente el color de la letra y el color del fondo de la tarjeta. Además, se debe valorar el emplear una fuente de letra que sea clara y sencilla y un tamaño de letra que sea grande.

– Enriquecer la experiencia: Al implementar una flip card, es crucial aprovechar los atributos ARIA para proporcionar información adicional y mejorar la experiencia de uso para diversos usuarios. Un ejemplo destacado es el uso del atributo aria-describedby. Este atributo permite asociar información adicional a un componente sin que sea visualmente perceptible. En el contexto de una flip card, puedes crear un texto no visible asociado al atributo aria-describedby de la etiqueta <button>. Usando JavaScript, podemos hacer que el texto cambie según la cara que esté visible, de tal forma que cuando la flip card recibe el foco mediante el teclado, los lectores de pantalla leen esta información adicional, ofreciendo una experiencia más explicativa y accesible, en este caso informará al usuario de que cara está mirando. Otra forma de hacerlo, sería empleado el atributo aria-pressed, alternando su valor usando JavaScript de tal forma que avise al usuario cuando ha cambiado la cara que está viendo.

– Gestionar la visibilidad del contenido: Para asegurar una experiencia uniforme, especialmente para usuarios de lectores de pantalla, emplea el atributo aria-hidden. Este atributo, gestionado mediante JavaScript, permite ocultar o mostrar contenido de manera dinámica. Se puede utilizar para ocultar la información de la cara de la tarjeta que no está actualmente visible. De esta manera, los lectores de pantalla no leerán información irrelevante, mejorando significativamente la experiencia para estos usuarios sin comprometer la accesibilidad.

– Notificaciones dinámicas: Otro aspecto clave para mejorar la experiencia de usuario es la implementación del atributo aria-live. Este atributo muestra notificaciones automáticas cuando se producen cambios en el estado de la tarjeta. Puedes emplear aria-live para informar dinámicamente a los usuarios sobre la rotación de la tarjeta. Al emplear este atributo, se proporciona una retroalimentación inmediata y clara sobre qué cara de la tarjeta (frontal o trasera) está actualmente visible, asegurando una experiencia fluida e informativa para todos los usuarios.

– Interacción Consistente: Evita utilizar los atributos hover o focus para hacer girar la tarjeta. En su lugar, permite que la tarjeta se gire cuando el usuario haga clic o bien si está usando teclado, cuando este componente reciba el foco y el usuario presione una tecla.

Como se ha podido observar, pese a que realizar una flip card puede parecer algo sencillo de implementar, lo cierto es que para hacer un componente de estas características de la forma más correcta posible se deben tener en cuenta diversos aspectos de la accesibilidad para que todos los usuarios puedan tener una experiencia positiva al interactuar con la flip card.

Ver más historias