UIFundamentos
Tema de Didactika v0.1Accesibilidad
Los mínimos que cumple cada componente del sistema y las comprobaciones que hace un plugin antes de publicarse.
La accesibilidad es parte de cada componente, no una capa encima. Las páginas de los componentes listan sus propios puntos en “Accesibilidad”; esta página reúne lo común a todos.
Qué garantiza el sistema
| Área | Mínimo | Cómo |
|---|---|---|
| Contraste del texto | 4,5:1 (3:1 desde 24 px o 19 px en negrita) | Alertas, insignias y botones derivan su texto del color del rol, así cada par lo alcanza |
| Controles y foco | 3:1 frente a lo que tienen al lado | Bordes de campos, el anillo de foco y las marcas de casillas e interruptores |
| Foco | Un anillo visible de 3 px en todo lo que se alcanza con el teclado | El anillo toma el color del componente (un botón de peligro lleva anillo rojo) |
| Tamaño del objetivo | 36 px (2,25 rem) de alto | Botones y campos; los pequeños (28 px) solo en filas densas, nunca solos |
| Color | Nunca la única señal | Un estado también cambia el texto, el icono, el peso o la forma |
| Movimiento | Respeta prefers-reduced-motion |
Mira la página “Movimiento” |
Teclado
| Componente | Teclas |
|---|---|
| Botón, enlace | Intro y Espacio (botón), Intro (enlace) |
| Menú de un select | Flechas, Inicio, Fin, una letra para saltar, Intro para elegir, Esc para cerrar |
| Desplegable | Intro o Espacio abre, las flechas mueven, Esc cierra y devuelve el foco al botón |
| Pestañas | Las flechas mueven entre pestañas, Tab entra en el panel |
| Diálogo | El foco entra, se queda dentro y vuelve al botón que lo abrió al cerrar |
| Búsqueda | Ctrl K la abre desde cualquier página, las flechas recorren los resultados, Intro abre uno |
Antes de publicar un plugin
- Usa cada pantalla solo con el teclado y comprueba que el foco se ve siempre.
- Comprueba el contraste de cualquier color que no sea un rol de Bootstrap.
- Da a cada botón de solo icono un
titley unaria-label. - Da a cada campo una etiqueta visible y enlaza la ayuda y el error con
aria-describedby. - Anuncia los cambios que ocurren sin recargar la página (un formulario guardado, una fila borrada) con una región viva.
- Prueba con el tema del sitio apagado y encendido, y en modo oscuro donde exista.