The Good Manager  >  Módulos formativos

100 puntos a saber sobre...
Accesibilidad digital

100
puntos a saber sobre...
Volver al resumen del módulo

Noción 63

Toma nota de los requisitos técnicos necesarios para un diseño accesible

Competencias objetivo

Ten en cuenta las especificaciones y los requisitos que tendrás que cumplir antes del proceso de diseño

Desde el inicio de tu proyecto, establece una lista de verificación para cada elemento de desarrollo. Algunos ejemplos:

A nivel de contenido

  • Asegúrate de que los textos sean fáciles de leer (pocos niveles de títulos con una buena jerarquía, frases cortas, listas...).
  • Nombra explícitamente los enlaces.
  • Proporciona títulos idénticos para las mismas funciones.
  • Utiliza un lenguaje sencillo y evita las figuras retóricas, las frases hechas y las metáforas complicadas. Aquí tienes una herramienta de legibilidad que puede ayudarte a evaluar tu nivel de lenguaje: https://datayze.com/readability-analyzer.php (para el texto en inglés) y https://legible.es/ (para el texto en español). Para ver con más detalle los elementos de legibilidad, consulta Lección 5: Noción 32 de este módulo.
  • Utiliza texto alineado a la izquierda para los idiomas de izquierda a derecha (LTR), y texto alineado a la derecha para los idiomas de derecha a izquierda (RTL). El texto alineado al centro o justificado es difícil de leer.

En cuanto a los colores

Prueba los contrastes. En una página web, el contraste de color es la diferencia entre el color utilizado para la información en primer plano (fuentes, imágenes de un texto, enlaces, infografías, diagramas, etc.) y el color de fondo. Asegúrate de que la información sigue siendo comprensible incluso sin colores... Activa modos como el modo oscuro, el modo de contraste aumentado, el modo de colores invertidos, el modo de movimiento reducido y el modo de alto contraste. ¿Sigue siendo legible tu contenido? ¿Siguen presentes los iconos, los bordes, los enlaces, los campos de formulario y otros contenidos? ¿Puedes distinguir el contenido en primer plano del fondo?

Aquí hay algunos ejemplos de buen y mal contraste de color en un botón de "Menú":

En cuanto a los medios de comunicación

Asegúrate de que los medios no se reproduzcan automáticamente. El vídeo y el audio inesperados pueden distraer y perturbar, especialmente en el caso de personas con ciertos tipos de discapacidad cognitiva, como el TDAH (mira la Lección 5 para obtener más información sobre las necesidades de este público). Ciertos tipos de vídeo y animación que se reproducen automáticamente pueden desencadenar trastornos vestibulares y convulsiones. Proporciona una función de pausa global en cualquier elemento multimedia.
Proporciona subtítulos para los vídeos. Los subtítulos permiten que una persona que no puede oír el contenido de audio de un vídeo pueda entender su contenido. Proporciona transcripciones para el audio. Las transcripciones permiten que las personas que no pueden oír entiendan el contenido de audio. También permite a las personas digerir el contenido de audio a un ritmo que les resulte cómodo.

En cuanto a la navegación

Ofrece una versión responsiva de tu sitio web. Facilita el acceso a los contenidos ocultos. Ofrece varias formas de navegación. No bloquees la orientación de la pantalla (para las personas que no puedan girar su dispositivo).

A nivel de formularios

Nombra cada campo del formulario (además de los marcadores de posición). Ayuda al usuario a corregir sus errores. Permite que compruebe la información que ha introducido. Indica claramente los campos obligatorios.

A nivel de zonas táctiles

Proporciona zonas suficientemente amplias y espaciadas entre sí. Piensa en las personas que tienen problemas motrices, que utilizan su dispositivo móvil en un entorno en movimiento (transporte público) o que tienen mala visión...

Para profundizar en el tema (los enlaces están en inglés):
https://www.a11yproject.com/posts/large-touch-targets/
https://www.a11yproject.com/posts/design-accessible-animation/
https://www.a11yproject.com/posts/alt-text/
https://www.a11yproject.com/checklist/