Responsive & Accessibility

Responsivo y Accesibilidad

Una página relacionada con emergencias debe ser utilizable por todos, en cualquier dispositivo, bajo estrés. La claridad supera a la astucia.

Puntos de interrupción

Valores predeterminados de Tailwind: sm 640, md 768, lg 1024, xl 1280, 2xl 1536. Diseñe mobile-first e intencionalmente por rango:

• 320–639: una columna, teléfonos planos, galería horizontal con scroll-snap, CTAs apilados a ancho completo, menú en panel desplegable.
• 640–1023: cuadrículas de dos columnas donde el contenido lo permita; aún sin inclinación 3D ni fijación.
• ≥ 1024: diseños asimétricos de 12 columnas, teléfonos 2.5D, inclinación del puntero, narración adhesiva opcional. Anchos de prueba: 320, 375, 414, 768, 1024, 1280, 1440, 1920. Sin desplazamiento horizontal de página en ningún ancho (cuidado con teléfonos rotados y texto sobredimensionado: use overflow-x: clip en secciones, no en body).

Puntos de referencia y estructura

• <a href="#main" class="skip-link">Saltar al contenido</a> como primer elemento focuseable.
• <header> (nav), <main id="main">, cada sección como <section aria-labelledby="…-heading">, <footer>.
• Exactamente un h1 (titular principal). Cada sección comienza con h2; subelementos con h3. Sin niveles saltados.
• Los id de las secciones coinciden con los anclajes de navegación: about, features (categorías + showcase), how-it-works, register, faq.
• Los destinos de los anclajes se compensan por la navegación fija: scroll-margin-top: var(--nav-h).

Navegación

• Escritorio: enlaces en línea + un CTA informativo (por ejemplo, "Explorar las características") — sin CTA de descarga/instalación; consulte CLAUDE.md "Alcance: showcase, no embudo de instalación".
• Móvil: un <button aria-expanded aria-controls="mobile-menu"> que alterna un panel. Al abrirse: enfocar el primer enlace; Esc cierra y devuelve el enfoque al botón; al hacer clic en un enlace se cierra el menú. El bloqueo del scroll del cuerpo es opcional y debe liberarse de manera confiable. El botón de hamburguesa tiene un nombre accesible "Abrir menú"/"Cerrar menú".
• Indicación de sección actual (opcional) mediante aria-current="true", no solo color.

Teclado y enfoque

• Todo lo interactivo debe ser accesible mediante Tab en orden visual. Sin tabindex positivo.
• Anillo de enfoque visible en todos los controles: outline: 2px solid var(--color-accent); outline-offset: 3px; — asegurar ≥ 3:1 contra fondos oscuros y claros (usar un anillo claro en botones rojos).
• Galerías horizontales: contenedor tabindex="0" con role="region" + aria-label, teclas de flecha para desplazamiento nativo.
• Cualquier control deshabilitado/no disponible (por ejemplo, enlace de contacto/legal faltante): renderizado como <span aria-disabled="true"> o <button disabled> con texto explicativo, nunca un enlace falso focuseable.

Acordeones de preguntas frecuentes (FAQ)

• Preferir nativo <details><summary>; o button[aria-expanded][aria-controls] + región. El texto del resumen es la pregunta como texto plano dentro de un h3 equivalente.
• El contenido está en el DOM (buscable, funciona sin JS).

Táctil y puntero

• Objetivos táctiles ≥ 44×44px (botones, elementos de menú, alternadores de FAQ).
• Espaciado ≥ 8px entre objetivos adyacentes.
• Los efectos solo al pasar el ratón nunca ocultan información.

Color y texto

• Contraste del texto del cuerpo ≥ 4.5:1, texto grande ≥ 3:1, límites de interfaz ≥ 3:1.
• Estado (Pendiente/En curso/Limpio) siempre tiene etiqueta de texto + icono, no solo color.
• El texto se redimensiona al 200% sin pérdida; sin contenedores de texto de altura fija.
• Longitud de línea ≤ ~70 caracteres para el cuerpo.

Imágenes y medios

• Capturas de pantalla significativas: alt factual (ver app-screenshot-showcase). Decorativo: alt="" + aria-hidden en SVG puramente decorativos.
• Los marcadores de posición se anuncian a sí mismos: "Marcador de posición de captura de pantalla: pantalla de registro".
• Iconos que acompañan al texto: aria-hidden="true".

Movimiento

• Respetar prefers-reduced-motion (ver lightweight-motion). Ningún contenido aparece solo a través de animación.
• Los componentes animados ilustrativos (seguimiento, coordinación) incluyen texto visible que indica que son ilustraciones, además NO se usa aria-live (no son datos en vivo).

Información de emergencia

• El aviso de exención de responsabilidad aparece cerca de los CTAs principales, en las FAQ ("¿Es SOS un reemplazo para las líneas de emergencia?"), cerca del CTA final y en el pie de página. Lenguaje claro, contraste legible, no oculto en texto pequeño (≥ 14px).

Lista de verificación de revisión

• axe / Lighthouse a11y ≥ 95, cero violaciones críticas
• Solo teclado: enlace de salto, abrir/cerrar menú/Esc, todos los anclajes, FAQ, galería
• Verificación puntual con lector de pantalla (VoiceOver/NVDA): la lista de encabezados tiene sentido
• 320px: sin desbordamiento, el titular encaja, CTAs prominentes
• El zoom al 200% funciona
• Movimiento reducido verificado
• Móvil en horizontal (por ejemplo, 740×360) usable