Lección 9Para empezar: planear y diseñar webs accesibles
- Noción 60 - Evalúa lo que sabes y de lo que necesitas saber
- Noción 61 - Asegúrate de que todos los miembros de tu equipo están en la misma página
- Noción 62 - Incluye la accesibilidad en tu presupuesto
- Noción 63 - Toma nota de los requisitos técnicos necesarios para un diseño accesible
- Noción 64 - Prueba y evalúa tus ideas con expertos y herramientas
- Noción 65 - Prueba y evalúa tus ideas con tu público objetivo
- Noción 66 - Revisión de los principales conceptos
Noción 63
Toma nota de los requisitos técnicos necesarios para un diseño accesible
Competencias objetivo
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/