Accesibilidad
Los requisitos de accesibilidad que Tanrei incorpora en los tokens y en las especificaciones de los componentes, y las comprobaciones que los imponen.
En Tanrei, la accesibilidad es un conjunto de restricciones sobre el propio sistema. La compilación de los tokens se niega a producir un esquema que no cumpla el contraste, y la especificación de un componente no es válida sin su rol, su tabla de teclado y su garantía de objetivo.
La compilación de los tokens mide cada esquema, claro y oscuro con contraste estándar, medio y alto, con estos umbrales, y falla cuando un par no los alcanza:
| Contenido | Contraste estándar y medio | Contraste alto |
|---|---|---|
| Texto, e iconos dibujados en un color de contenido | 4.5:1 | 7:1 |
| La marca de un estado sobre su propio contenedor tonal | 3:1 | 3:1 |
| Límites y gráficos necesarios para identificar o manejar un control | 3:1 | 3:1 |
| El anillo de foco frente a las superficies adyacentes | 3:1 | 3:1 |
El texto grande no tiene un umbral más bajo. WCAG acepta menos contraste para el texto a partir de unos 24px en peso normal, o 19px en negrita, pero la compilación exige 4.5:1 a todos los roles de texto, y 7:1 con contraste alto: un rol de color no sabe a qué tamaño se usará.
Los elementos deshabilitados y la decoración pura están exentos, y también lo está la línea fina de outline-variant con el contraste estándar. Esa exención es la razón por la que un borde que es la única señal de un control debe usar outline y no outline-variant.
Se cumplen en todos los temas y en todos los niveles de contraste, seis combinaciones en total; de lo contrario, la compilación falla:
- cada par de roles
(X, on-X), y cada rol de texto (on-surface,on-surface-variant,link, el color de una intención) sobre todos los roles de superficie, es de al menos 4.5:1, y de al menos 7:1 en los dos esquemas de contraste alto; - el color de cada estado es de al menos 3:1 frente a su propio contenedor tonal;
outlinees de al menos 3:1 frente a todos los roles de superficie;- en el sistema predeterminado, con contraste medio y alto,
outline-variantes de al menos 3:1 y 4.5:1 frente a todos los roles de superficie, youtlinesigue siendo más fuerte; focus-ringes de al menos 3:1 frente a las superficies.
Las reglas del proyecto prohíben rebajar un umbral para que una comprobación pase.
The least sizes of what a person presses. minimum is the least height (and, for an icon-only control, width) anything pressable is drawn at; touch and pointer are the least hit areas, which a control reaches past what it draws where it stands alone.
| Token | Valor | Vista previa |
|---|---|---|
--tanrei-sys-target-minimum | 32px | |
--tanrei-sys-target-pointer | 44px | |
--tanrei-sys-target-spacing | 8px | |
--tanrei-sys-target-touch | 48px |
Generado a partir de design/tokens/tanrei.light.tokens.json, tokens/sys/measure.tokens.json
El tamaño visual no es el área de pulsación. Un botón pequeño de Tanrei mide 32 unidades de alto, lo adecuado para una barra de herramientas densa, pero sigue respondiendo en al menos 48 unidades para el toque y 44 para un puntero. Los componentes amplían su área de pulsación de forma invisible y mantienen al menos 8 unidades entre objetivos vecinos. Todas las especificaciones declaran esta garantía, y todas las plataformas la prueban.
Todo componente interactivo muestra el indicador de foco, una separación seguida de un anillo, para el foco del teclado y de la tecnología de apoyo, de inmediato y sin animación. El orden del foco sigue el orden de lectura. Los componentes deshabilitados salen del orden del foco.
La especificación de cada componente contiene una tabla de teclas y acciones, que se muestra en su página de documentación, en Accesibilidad. Las plataformas compatibles con teclado físico implementan la tabla con exactitud.
Las interfaces deben seguir siendo utilizables con el texto al 200%. Los contenedores crecen con su texto, las etiquetas se dividen en varias líneas antes de truncarse y nada depende de una altura fija para que quepa una línea de texto. Las implementaciones nativas usan el mecanismo de texto escalable de cada plataforma.
Cuando el sistema pide reducir el movimiento, la animación espacial se elimina o se sustituye por un fundido breve, y nada se repite en bucle. Consulta Movimiento.
Una especificación indica el rol WAI-ARIA del componente y cómo se forma su nombre accesible. Cada plataforma hace corresponder el rol con su equivalente nativo: rasgos de accesibilidad en SwiftUI, propiedades de semántica en Compose y Flutter, accessibilityRole en React Native. En la web, Tanrei prefiere elementos nativos dentro de el shadow root, para que los navegadores y las herramientas de pruebas vean una semántica real.
| Plataforma | Comprobación automática |
|---|---|
| Web | axe-core en Playwright |
| SwiftUI | auditoría de accesibilidad de XCTest |
| Compose | comprobaciones de Accessibility Test Framework |
| Flutter | comparadores meetsGuideline |
| React Native | aserciones de rol y de etiqueta, además de auditorías nativas mediante la aplicación de galería |
Nota
Las comprobaciones automáticas detectan una minoría de los problemas reales. Son un mínimo. Usa un lector de pantalla y un teclado con todo lo que construyas con estos componentes.