Figma: accesibilidad, proyecto guiado y entrega

1Color y contraste (WCAG 1.4.3 y 1.4.11)

Ratio de contraste = (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia relativa del color más claro y L2 la del más oscuro. Escala de 1:1 a 21:1.

2Tipografía, tamaño táctil y estructura

Tipografía (WCAG 1.4.4): escala clara con base 16 px para el cuerpo, evitar fuentes decorativas en bloques de lectura continua, interlineado 140%-160% del tamaño de fuente, espaciado entre párrafos ≥1.5× el tamaño de fuente, no justificar el texto.

Orden de lectura (WCAG 1.3.1): los lectores de pantalla procesan las capas del panel Layers de abajo hacia arriba; el elemento superior de la pantalla debe quedar al fondo de la lista de capas.

• 2.4.7 Focus Visible (AA): un elemento con foco por teclado debe mostrar un indicador visual (en Figma: variante State=Focus con borde diferenciado).
• 2.4.11 Focus Not Obscured (AA, WCAG 2.2): el indicador de foco no puede quedar oculto tras otro elemento (cabecera fija, banner sticky, teclado en pantalla).
• 2.4.13 Focus Appearance (AAA, WCAG 2.2): contraste mínimo 3:1 entre el indicador y el color contiguo, borde sólido de 2 px o área de contraste ≥4 px en algún lado. Un cambio de opacidad del 5% no es un indicador válido.

Focus trap en modales/overlays: mientras el modal esté abierto, Tab no debe escapar al fondo (solo recorrer los elementos del modal; Esc devuelve el foco al elemento que lo abrió). Roving tabindex en listas largas: una sola parada de Tab y navegación interna con flechas, en vez de veinte paradas de Tab. Skip link: enlace que salta directamente a la Content Area evitando repetir cabecera/navegación en cada Tab.

3Documentación, flujo recomendado y herramientas de auditoría

Flujo recomendado: 1) configurar variables de color de alto contraste verificando 4.5:1; 2) crear componentes con estados Default/Hover/Pressed/Focus/Disabled; 3) verificar el orden de capas según la secuencia lógica de lectura/navegación; 4) auditar con plugins antes de publicar la librería.

Instalación: Plugins (icono de puzle o Shift + I) → Browse plugins in Community → busca "Stark" o "A11y - Color Contrast Checker" → Install. Stark pide crear cuenta gratuita la primera vez. A11y tiene dos modos: chequeo puntual (texto + fondo) o Check/Scan de un frame completo, con corrección directa mediante Update Layer.

4Navegación completa por teclado

1. Prepara componentes con estado Focus: Component Set con variantes State=Default y State=Focus (borde de 2 px, alto contraste).
2. Pantalla A → Trigger Key/gamepad, tecla Tab → Action Change to/Navigate to hacia el elemento enfocado.
3. Encadena el orden de tabulación: Elemento 1 → Elemento 2 con Trigger Key/gamepad → Tab, sucesivamente.
4. Navegación inversa: segunda interacción con Trigger Key/gamepad → Shift + Tab.
5. Activación: elemento en Focus → Trigger Key/gamepad → Enter/Space → Navigate to / Open Overlay / Change to.
6. Cierre: en modales/menús → Trigger Key/gamepad → Esc → Close Overlay o Navigate to pantalla principal.

Validación: abre Present (▶), haz un clic para capturar el foco del navegador, pulsa Tab para comprobar que el foco avanza en el orden proyectado y responde a Enter/Esc.

5Proyecto guiado: de la retícula al prototipo entregable

Pasos lógicos del ejercicio (app de gestión de tareas, 3 pantallas):

1. Crear el frame y la retícula: marco de teléfono con grid de 4 columnas, margen 16 px, gutter 16 px (G1.4).
2. Construir el layout maestro: Header + Content Area (slot) + Bottom Nav (3 iconos: Tareas, Añadir, Perfil) → convertir en componente (G1.5).
3. Crear 3 pantallas por instancia, no por duplicado: 01 — Lista de tareas, 02 — Detalle de tarea, 03 — Perfil.
4. Prototipar la navegación: cada tarjeta de la lista → pantalla de detalle; icono Perfil del Bottom Nav → pantalla de perfil; botón Atrás → vuelta a la lista (G2.1).
5. Añadir un componente interactivo con estados: botón Guardar con variantes Default/Hover/Pressed (G2.4).
6. Validar accesibilidad mínima: contraste texto/fondo con un plugin y zonas táctiles de los iconos del Bottom Nav ≥44×44 px.
7. Compartir el prototipo (ver siguiente punto).

6Compartir el prototipo

Link de presentación: archivo abierto → Share (esquina superior derecha) → junto al desplegable de permisos, Copy link. Revisa antes el tipo de acceso: Can view abre el archivo en modo edición (ve capas y paneles, útil para revisión); Can edit permite modificar.

Link de solo prototipo: entra en modo Prototype → Present (▶) → desde esa vista, Share → Copy link (abre directamente el modo Present, sin editor). En ajustes de Present puedes fijar la pantalla de inicio y activar/desactivar los hotspot hints.

Insertar en otro sitio (embed): copia el link de modo Present y úsalo como src de un <iframe> en la página, Moodle o documento destino.

!Problemas frecuentes (checklist de errores típicos)

Revisa esto antes de dar por terminado cualquier prototipo (Anexo 2 del manual):

• Duplicar (Ctrl/Cmd + D) en lugar de instanciar un layout que debería ser componente reutilizable.

7Glosario rápido (Anexo 1)

✓Ideas clave que debes dominar

• Sé calcular/interpretar la ratio de contraste WCAG y sus mínimos AA.
• Conozco las reglas tipográficas de accesibilidad (interlineado, espaciado, alineación).
• Sé qué tamaño mínimo debe tener un área táctil (24×24 / 44×44 / 48×48 px).
• Sé por qué el orden de capas debe coincidir con el orden de lectura/navegación.
• Distingo los criterios 2.4.7, 2.4.11 y 2.4.13 de WCAG 2.2.
• Sé qué es un focus trap y un roving tabindex, y para qué sirven.
• Sé qué es un skip link y por qué evita repetir cabecera/navegación.
• Sé cuándo usar el plugin A11y frente a Stark.
• Sé simular la navegación por teclado en Prototype con Trigger Key/gamepad.
• Sé generar y compartir un link de solo prototipo (Present) frente a uno de edición.