{"id":34117,"date":"2024-09-19T11:40:37","date_gmt":"2024-09-19T09:40:37","guid":{"rendered":"https:\/\/www.mtp.es\/?p=34117"},"modified":"2026-08-30T20:51:31","modified_gmt":"2026-08-30T18:51:31","slug":"claves-para-desarrollar-una-flip-card-accesible","status":"publish","type":"post","link":"https:\/\/mtp.global\/es\/blog\/seguridad-informatica\/claves-para-desarrollar-una-flip-card-accesible\/","title":{"rendered":"Flip card accesible: c\u00f3mo crear una tarjeta que cumpla WCAG"},"content":{"rendered":"

Una <\/span>flip card accesible<\/b> debe poder utilizarse mediante rat\u00f3n, teclado, pantalla t\u00e1ctil y tecnolog\u00edas de asistencia, mostrar claramente qu\u00e9 cara est\u00e1 activa y permitir acceder a toda la informaci\u00f3n sin depender exclusivamente de efectos visuales.<\/span><\/p>\n

Aunque una <\/span>flip card<\/span><\/i> puede parecer un componente sencillo, su implementaci\u00f3n plantea retos relacionados con la navegaci\u00f3n por teclado, el foco, la sem\u00e1ntica HTML, los lectores de pantalla y la gesti\u00f3n del contenido oculto.<\/span><\/p>\n

Por ello, la accesibilidad debe integrarse desde el dise\u00f1o y el desarrollo, de la misma forma que se incorporan requisitos de experiencia de usuario, calidad y<\/span> ciberseguridad<\/span><\/a>.<\/span><\/p>\n

La flip card accesible, de un vistazo<\/b><\/h2>\n\n\n\n\n\n\n\n\n\n\n\n
\n

Aspecto<\/b><\/p>\n<\/td>\n

\n

Buena pr\u00e1ctica<\/b><\/p>\n<\/td>\n<\/tr>\n

\n

Interacci\u00f3n<\/b><\/p>\n<\/td>\n

\n

Rat\u00f3n, teclado y t\u00e1ctil<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

HTML<\/b><\/p>\n<\/td>\n

\n

Elementos sem\u00e1nticos<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

Foco<\/b><\/p>\n<\/td>\n

\n

Visible y predecible<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

Contenido oculto<\/b><\/p>\n<\/td>\n

\n

Correctamente gestionado<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

Estado<\/b><\/p>\n<\/td>\n

\n

Comprensible para lectores de pantalla<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

Contraste<\/b><\/p>\n<\/td>\n

\n

Texto y controles perceptibles<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

Animaci\u00f3n<\/b><\/p>\n<\/td>\n

\n

No imprescindible<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

Activaci\u00f3n<\/b><\/p>\n<\/td>\n

\n

Acci\u00f3n expl\u00edcita del usuario<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u2705 <\/span>Objetivo:<\/b> que cualquier usuario pueda descubrir, activar y comprender la tarjeta independientemente de la forma en que interact\u00fae con la p\u00e1gina.<\/span><\/p>\n

\u00bfQu\u00e9 es una flip card?<\/b><\/h2>\n

Una <\/span>flip card<\/i><\/b>, tambi\u00e9n denominada <\/span>tarjeta giratoria<\/b>, es un componente de interfaz que presenta informaci\u00f3n en dos caras.<\/span><\/p>\n

Su funcionamiento habitual es:<\/span><\/p>\n

Cara frontal<\/b>
<\/b>\u2193<\/span>
<\/span>El usuario activa el control<\/b>
<\/b>\u2193<\/span>
<\/span>La tarjeta gira<\/b>
<\/b>\u2193<\/span>
<\/span>Cara posterior<\/b><\/p>\n

La primera cara suele presentar informaci\u00f3n b\u00e1sica y la segunda puede ampliar el contenido o mostrar nuevas opciones.<\/span><\/p>\n

El problema aparece cuando este comportamiento se dise\u00f1a \u00fanicamente para usuarios que utilizan un rat\u00f3n.<\/span><\/p>\n

\u00bfQu\u00e9 necesita una flip card accesible?<\/b><\/h2>\n

Para desarrollar una <\/span>flip card accesible seg\u00fan WCAG<\/b>, debemos prestar atenci\u00f3n tanto a la presentaci\u00f3n visual como al comportamiento t\u00e9cnico.<\/span><\/p>\n

Requisitos fundamentales<\/b><\/h3>\n

\u2713 Navegaci\u00f3n mediante teclado<\/span>
<\/span>\u2713 Foco claramente visible<\/span>
<\/span>\u2713 HTML sem\u00e1ntico<\/span>
<\/span>\u2713 Estado comprensible<\/span>
<\/span>\u2713 Compatibilidad con lectores de pantalla<\/span>
<\/span>\u2713 Contraste suficiente<\/span>
<\/span>\u2713 Gesti\u00f3n correcta del contenido oculto<\/span>
<\/span>\u2713 Interacci\u00f3n que no dependa \u00fanicamente del <\/span>hover<\/span><\/i><\/p>\n

WCAG y flip cards: criterios que debemos revisar<\/b><\/h2>\n\n\n\n\n\n\n\n\n\n\n\n
\n

Criterio WCAG<\/b><\/p>\n<\/td>\n

\n

Aplicaci\u00f3n<\/b><\/p>\n<\/td>\n<\/tr>\n

\n

1.1.1 Contenido no textual<\/b><\/p>\n<\/td>\n

\n

Alternativas para im\u00e1genes informativas<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

1.4.3 Contraste m\u00ednimo<\/b><\/p>\n<\/td>\n

\n

Legibilidad de texto<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

1.4.11 Contraste no textual<\/b><\/p>\n<\/td>\n

\n

Visibilidad de controles<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

2.1.1 Teclado<\/b><\/p>\n<\/td>\n

\n

Operaci\u00f3n sin rat\u00f3n<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

2.4.7 Foco visible<\/b><\/p>\n<\/td>\n

\n

Identificaci\u00f3n del elemento enfocado<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

2.4.11 Foco no oculto<\/b><\/p>\n<\/td>\n

\n

El foco no debe quedar completamente tapado<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

2.5.2 Cancelaci\u00f3n del puntero<\/b><\/p>\n<\/td>\n

\n

Prevenci\u00f3n de activaciones accidentales<\/span><\/p>\n<\/td>\n<\/tr>\n

\n

4.1.2 Nombre, funci\u00f3n, valor<\/b><\/p>\n<\/td>\n

\n

Funci\u00f3n y estado identificables<\/span><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u00a0<\/p>\n

1. Permite utilizar la tarjeta con teclado<\/b><\/h3>\n

Un <\/span>componente web accesible<\/b> no debe depender exclusivamente del rat\u00f3n.<\/span><\/p>\n

El usuario tiene que poder:<\/span><\/p>\n

    \n
  1. Llegar al control mediante <\/span>Tab<\/span>.<\/span><\/li>\n
  2. Identificar qu\u00e9 elemento tiene el foco.<\/span><\/li>\n
  3. Activarlo mediante teclado.<\/span><\/li>\n
  4. Continuar navegando normalmente.<\/span><\/li>\n<\/ol>\n

    Evita<\/b><\/h3>\n

    Hover \u2192 gira autom\u00e1ticamente<\/b><\/p>\n

    Utiliza<\/b><\/h3>\n

    Foco \u2192 Enter o Espacio \u2192 cambia la cara<\/b><\/p>\n

    \u00a0<\/p>\n

    2. Prioriza HTML sem\u00e1ntico<\/b><\/h3>\n

    Un error frecuente consiste en convertir un <\/span><div><\/span> en un control interactivo mediante JavaScript.<\/span><\/p>\n

    <div class=”flip-card” onclick=”flipCard()”><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0…<\/span><\/p>\n

    <\/div><\/span><\/p>\n

    Visualmente puede funcionar, pero el propio elemento no comunica que se trata de un control.<\/span><\/p>\n

    Si la tarjeta contiene informaci\u00f3n compleja, enlaces o diferentes elementos, es preferible utilizar un contenedor sem\u00e1ntico y un bot\u00f3n espec\u00edfico:<\/span><\/p>\n

    <article class=”flip-card”><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<div class=”flip-card__front”><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0…<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<\/div><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<div class=”flip-card__back” hidden><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0…<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<\/div><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<button type=”button”><\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0Mostrar cara posterior<\/span><\/p>\n

    \u00a0\u00a0\u00a0\u00a0<\/button><\/span><\/p>\n

    <\/article><\/span><\/p>\n

    De esta manera, el control hereda el comportamiento accesible propio del elemento <\/span><button><\/span>.<\/span><\/p>\n

    \u00a0<\/p>\n

    3. Integra accesibilidad dentro del ciclo de desarrollo<\/b><\/h3>\n

    La accesibilidad no deber\u00eda revisarse \u00fanicamente cuando la interfaz ya est\u00e1 terminada.<\/span><\/p>\n

    Integrar pruebas autom\u00e1ticas y manuales dentro de procesos de<\/span> DevOps<\/span><\/a> permite detectar determinados problemas durante el propio ciclo de desarrollo.<\/span><\/p>\n

    Esta aproximaci\u00f3n favorece que aspectos como:<\/span><\/p>\n