Lección 10El proceso de diseño: ¿cómo encajar la accesibilidad web?
- Noción 67 - Ten en cuenta la distribución de la página
- Noción 68 - Cómo usar el diseño para optimizar el contenido
- Noción 69 - Crea el primer borrador y maqueta
- Noción 70 - ¡La facilidad de uso es clave!
- Noción 71 - Estructura el HTML correctamente
- Noción 72 - Su uso del lenguaje importa
- Noción 73 - Cómo trabajar con contenido visual
- Noción 74 - La importancia de la navegación con teclado
- Noción 75 - Consejos de diseño útiles para todo el mundo
- Noción 76 - Tipos de contenido que hay que evitar a toda costa
- Noción 77 - Comprobar la conformidad con los estándares de accesibilidad y las mejores prácticas
- Noción 78 - Repaso de los conceptos principales
Noción 77
Comprobar la conformidad con los estándares de accesibilidad y las mejores prácticas
Competencias objetivo
Ejercicio
En este breve ejercicio, intentarás detectar los principales problemas de accesibilidad de una página web utilizando herramientas y pautas.
Seleccionar una página
Usa una página web que conozcas bien para este ejercicio. Podría ser el sitio web de tu empresa o escuela, o tu sitio web de compras favorito. Si no puedes encontrar ningún problema en los pasos siguientes, selecciona otra página con más elementos.
Buscar problemas de accesibilidad
Puedes utilizar los recursos siguientes para ayudarte a encontrar los problemas de accesibilidad. Debes tener en cuenta los diferentes problemas que viste en módulos anteriores ya que son los más comunes.
Las directrices serán exhaustivas, describiendo los requisitos de accesibilidad y las mejores prácticas. Los complementos del navegador deberían ser útiles para detectar problemas rápidamente para hacer una auditoría rápida.
Escribir un breve informe
Enumera todos los problemas detectados por sus complementos y los problemas más recurrentes que deben solucionarse. Esta evaluación rápida te dará información sobre la cantidad de correcciones.
A continuación, elige un elemento en particular e intenta proporcionar una solución alternativa: por ejemplo, has detectado un elemento de interfaz de usuario particularmente malo y crees que debería simplificarse. Usa la información de módulos anteriores para hacer su recomendación.
Recursos
Directrices
Las directrices son exhaustivas y están ordenadas por categorías. Puede ser tedioso revisar sin un problema específico en mente, pero a menudo indica la solución asociada con un problema de accesibilidad.
- WCAG ( https://www.w3.org/TR/WCAG21/ )
Plugins
Éstos plugins son herramientas dentro de tu navegador web que sirven para escanear rápidamente una página y buscar problemas de accesibilidad: ¡perfecto para una auditoría rápida!
- Onda ( https://wave.webaim.org/extension/ )
- Axe DevTools ( https://www.deque.com/axe/devtools/ )
Sitio web
- El proyecto A11Y realizó una lista de verificación basada en las directrices de WCAG para saber si las aplicas correctamente o no en una página web ( https://www.a11yproject.com/checklist/ )
Corrección
Como ejemplo, así es como hicimos nuestra auditoría. Verifica en qué se diferencia de lo que tu has encontrado.
Sitio web examinado:
Hemos seleccionado un sitio web de compras en línea muy famoso.
Enfoque rápido:
Nuestros plugins detectaron un número muy alto de problemas (~80) solo en la página de inicio. La mitad de ellos son problemas de contraste de color, y un tercio son malos textos alternativos (alt-text) para imágenes.
Enfoque exhaustivo:
A partir de las directrices de WCAG sobre contraste de color, aprendemos sobre la relación necesaria entre el fondo y el texto (https://www.w3.org/TR/WCAG21/#contrast-minimum). Podemos utilizar una herramienta en línea para calcular la relación de contraste real (https://coolors.co/contrast-checker/112a46-acc8e5) y proponer nuevos valores de color en nuestro informe.
Para revisar lo que aprendiste sobre las WCAG, puedes echar un vistazo a la Lección 8.