Accesibilidad

Objetivo mínimo WCAG 2.2 AA, se aplique legalmente o no.

Nota de contexto que ordena las prioridades: hay personas que usan esta aplicación de pie en un pasillo, con una mano ocupada, con prisa y a veces nerviosas. Aquí la accesibilidad y la usabilidad general son lo mismo.

Color

Ningún estado se comunica solo con color. Cada uno lleva cuatro señales: color, icono con forma distinta, texto explícito y posición.

Estado	Color	Icono	Texto
CONTIENE	rojo	aspa	«CONTIENE TRIGO»
PUEDE CONTENER	ámbar	triángulo	«PUEDE CONTENER CACAHUETES»
INSUFICIENTE / CONTRADICTORIA	amarillo	interrogación	«INFORMACIÓN INSUFICIENTE»
DECLARADO SIN	verde	sello	«DECLARADO SIN GLUTEN»
SIN COINCIDENCIAS	verde	lupa	«NO HEMOS DETECTADO GLUTEN»

Los dos estados verdes tienen iconos distintos porque significan cosas distintas: uno es una declaración del fabricante y el otro es el resultado de nuestra búsqueda.

Contraste

Todos los colores de texto están calculados sobre su fondo:

Token	Sobre blanco
`--no-tinta` #0E1020	18.2:1
`--no-tinta-media` #464B66	8.0:1
`--no-tinta-suave` #6B7191	4.6:1 (mínimo AA)
`--no-marca` #2F2BE0	8.4:1
`--no-peligro` #B3251B	6.4:1
`--no-aviso` #96540A	5.4:1
`--no-duda` #7A5C00	5.6:1
`--no-ok` #0D6B3D	6.1:1

prefers-contrast: more endurece los cuatro semánticos y sube --no-tinta-suave a --no-tinta-media.

Áreas táctiles

Mínimo 48 px. Preferencia 52–56 px (--no-toque: 56px).
El botón de escanear son 84 px: es el elemento más grande de la aplicación, a propósito.
Verificado en navegador a 390 px: 0 botones visibles por debajo de 48 px.

Una mano

Acciones principales en la zona del pulgar. Los controles de la cámara van en el borde inferior, por encima del área segura del iPhone (env(safe-area-inset-bottom)).

Lectores de pantalla

Región role="status" aria-live="polite" que anuncia el resultado, no «página cargada»: «CONTIENE CEREALES CON GLUTEN. Analizado para Berta.»
Enlace «Saltar al contenido».
Los botones de «Mis NO» usan aria-pressed, que es lo correcto para un conmutador, y no un checkbox disfrazado.
El historial añade el resultado anterior como texto solo para lectores: «Galletas demo, resultado anterior: CONTIENE CEREALES CON GLUTEN».
La publicidad se anuncia como publicidad antes de su contenido (aria-label="Publicidad de <marca>"), y nunca se inserta entre el título de un riesgo y su explicación.
La linterna usa aria-pressed y solo aparece si el dispositivo la tiene.

Tipografía y zoom

Los input son de 16 px reales. Por debajo, iOS hace zoom al enfocar y descoloca la pantalla.
-webkit-text-size-adjust: 100%.
El titular de resultado son 36 px: tiene que leerse con el brazo estirado.
Verificado: sin scroll horizontal a 390 px.

Movimiento

prefers-reduced-motion: reduce desactiva todas las animaciones, incluida la línea de barrido del escáner. La vibración al detectar un código son 30 ms: un acuse de recibo, no una alarma.

Modo oscuro

Rehecho, no invertido. Los fondos de estado se oscurecen y los textos se aclaran de forma independiente, porque invertir #FDECEA da un rosa fosforito ilegible. Verificado en ambos modos.

Sonido

Apagado por defecto.

Sin cámara

Denegar el permiso nunca deja a nadie en un callejón sin salida. Se ofrecen tres caminos: escribir el código, subir una foto o buscar por nombre. Y el mensaje no culpa a nadie: «No nos has dado permiso para usar la cámara, y no pasa nada.»

Pendiente

[ ] Prueba real con VoiceOver en iOS y TalkBack en Android.
[ ] Zoom al 200 % en dispositivo real.
[ ] Navegación completa por teclado con foco visible en todo el flujo.
[ ] Pruebas con personas usuarias reales de lectores de pantalla.
[ ] Auditoría contra el European Accessibility Act.