Este es un checklist básico de elementos a tener en cuenta a la hora de hacer un diseño accesible. Y por diseño, hablo de diseñar en Figma, Sketch o cualquier cualquier otro programa de diseño. Por eso he realizado una selección de los elementos importantes y que podemos controlar en esta fase del proceso. Las directrices de accesibilidad son muchas más en las que hay que tener en cuentas aspectos de interacción, diseño visual, desarrollo y por supuesto, hacer test y validar. Pero cuando estamos diseñando, es importante tener estas cuestiones en mente.
| Ámbito | Condición |
|---|---|
| Contenido | Usar lenguaje claro y comprensible |
| Controles | Validar que los enlaces (links, botones) son reconocibles como tal |
| Controles | Validar que existe el estado :focus definido |
| Formularios | Inputs asociados a un label visible |
| Formularios | No usar placeholders como label (a no ser que al interaccionar queden presentes (como los campos en Material Design de Google) |
| Formularios | Asociar el mensaje de error a cada input correspondiente |
| Formularios | Los errores y estados (error, succes, warnings…) no se comunican sólo con colores |
| Medios | Los vídeos, audios o animaciones no llevan autoplay |
| Medios | Todos los medios pueden ser pausarse |
| Medios | Vídeo y audio: Comprobar si llevan subtítulos o transcripciones |
| Medios | Vídeo: Eliminar efectos de flash o destellos que puedan desencadenar ataques epilépticos. |
| Apariencia | Comprobar que el contenido es legible cuando se activa el modo «alto contraste» |
| Apariencia | El texto se puede incrementar hasta un 200% sin romper el layout. Comprobar legibilidad y desbordamiento |
| Apariencia | Comprobar que el color no es la única forma de comunicación. Si lo vemos en blanco y negro/grises, ¿El contenido es legible y entendible? |
| Apariencia | Usar un layout claro, simple y jerárquico |
| Animación | Comprobar que las animaciones sean suaves y que no hagan flashes |
| Contraste de color | Comprobar el contraste de color para los textos |
| Contraste de color | Comprobar el contraste de color para elementos no textuales (por ejemplo iconos o gráficos) que transmiten información |
| Contraste de color | Comprobar contraste de color para elementos de formularios: bordes de los inputs, inputs, radios, selectores… |
| Contraste de color | Comprobar que los textos sobre imágenes tengan suficiente contraste |
| Pantallas táctiles | Comprobar si al cambiar la orientación a “portrait” el contenido se ve correctamente |
| Pantallas táctiles | Evitar el scroll horizontal en la medida de lo posible |
| Pantallas táctiles | Comprobar existe suficiente espacio entre los elementos interactivos para pulsarlos con facilidad |
| Descargables | Los PDFs son accesibles |
La obligatoriedad de de la accesibilidad es inminente. Para 2026 los servicios públicos deberían serlo (y no parece que vayan por buen camino) y para 2030 los privados. Aunque para 2030 queda tiempo, la implantación terminará llegando.
Si tienes cualquier duda o quieres que colabore en tu proyecto con mi experiencia en accesibilidad, no dudes en ponerte en contacto conmigo.