Accesibilidad

Los estándares

1. Enlace de salto y puntos de referencia

   2.4.1 Evitar bloques · A

   Quien navega con teclado llega primero a un enlace Saltar al contenido que salta por encima del armazón de la interfaz hasta la región principal. La página se construye a partir de puntos de referencia reales: un main, elementos de navegación etiquetados y un footer.

2. Foco visible

   2.4.7 Foco visible · AA

   Cada control muestra al recibir el foco un anillo verde de dos píxeles situado a dos píxeles del borde, que aparece con el foco de teclado y no al hacer clic con el ratón.

3. Tamaño del objetivo

   2.5.8 AA · 2.5.5 AAA

   Los controles táctiles principales (el dock de pestañas, las filas de la hoja, las píldoras de llamada a la acción) miden de 44 a 48 píxeles; el control de puntero más pequeño supera aún los 24. Así, cada control cumple el mínimo de AA, y los controles táctiles cumplen el tamaño AAA, más estricto.

4. Movimiento reducido

   2.3.3 · AAA

   Cuando el sistema de un visitante pide menos movimiento, el sitio reduce cada animación y transición a un pelo por encima de cero, y convierte el desplazamiento suave en un salto directo.

5. Paridad de temas, sin parpadeo

   El tema claro y el oscuro son ambos de primer nivel: cada superficie se diseña en los dos, y el tema se resuelve antes del primer renderizado, de modo que quien usa el modo oscuro nunca ve un parpadeo blanco.

6. El color no es la única señal

   1.4.1 Uso del color · A

   Los enlaces en la prosa de los artículos van subrayados, de modo que su significado nunca depende solo del verde.

La concesión del verde legible

El verde de marca es un lima brillante, y un lima brillante no se lee como texto sobre blanco. Medido frente a WCAG, #6dc402 sobre blanco da unos 2,2:1, por debajo incluso del umbral de 3:1 para texto grande. Por eso existe un segundo token: --color-green-text baja el verde a #5aa302, que supera el 3:1. Eso basta para el texto grande o en negrita, para los encabezados y para los acentos de interfaz como el anillo de foco, y se usa para eso, no para el cuerpo de texto.

Cumple AA Solo texto grande e interfaz No alcanza el umbral

La parte honesta: al tamaño de lectura del cuerpo sobre un fondo claro, un enlace verde se queda en torno a 3,2:1, por encima del umbral de texto grande pero por debajo del umbral de 4,5:1 para texto normal. El sitio acepta esa concesión para conservar su único color de marca, y la suaviza de dos maneras. Los enlaces de los artículos van subrayados, así que el color nunca es la única señal; y el modo oscuro lo resuelve del todo, donde el mismo lima sobre casi negro se lee en torno a 8,6:1. El cuerpo de texto en sí siempre es neutro, y siempre cumple.

Alcance

Esto cubre el sitio web. La aplicación de React Native y las plantillas de correo son superficies propias, con sus propios estándares, y no se documentan aquí.