--- title: "Accesibilidad" description: "Los requisitos de accesibilidad que Tanrei incorpora en los tokens y en las especificaciones de los componentes, y las comprobaciones que los imponen." url: "https://tanrei.chnotchy.com/es/foundations/accessibility/" last_updated: 2026-10-23T17:33:05.000Z --- # 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. ## Contraste 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`. ### Invariantes que se imponen 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; - `outline` es de al menos 3:1 frente a todos los roles de superficie; - en el sistema predeterminado, con contraste medio y alto, `outline-variant` es de al menos 3:1 y 4.5:1 frente a todos los roles de superficie, y `outline` sigue siendo más fuerte; - `focus-ring` es de al menos 3:1 frente a las superficies. Las reglas del proyecto prohíben rebajar un umbral para que una comprobación pase. ## Tamaño del objetivo 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. ## Foco 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. ## Teclado 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. ## Escalado del texto 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. ## Movimiento reducido 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](https://tanrei.chnotchy.com/es/foundations/motion/). ## Semántica 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. ## Cómo se prueba | 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 | > [!NOTE] > **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.