La escala y el alcance a menudo hacen que Internet sea universal: los dispositivos ubicuos y la conectividad permiten que cualquier persona, en cualquier lugar, acceda a sitios web, servicios y soluciones, ¿verdad?
No completamente.
Esta es la razón por. Si bien los gráficos de sitios web comunes, como los gráficos en negrita, los menús anidados y el contenido de texto atractivo funcionan para la mayoría de los usuarios, hay un segmento grande: hasta el 25% de la población – que pueden tener dificultades para usar su sitio web debido a condiciones tales como daltonismo o control motor reducido.
Los diseños gráficos disponibles en Internet intentan derribar estas barreras creando sitios versátiles y útiles. Pero ¿qué significa esto en la práctica? En esta guía de diseño gráfico accesible, cubrimos cinco temas clave:
- Conceptos básicos asequibles de diseño web y gráficos.
- Mejores prácticas para el diseño web accesible
- Peligros potenciales en el diseño gráfico
- Grandes ejemplos de diseño disponibles
- Herramientas para ayudarte a diseñar sitios web más accesibles
Empecemos.
Conceptos básicos de diseño web y gráficos disponibles
El diseño gráfico accesible garantiza que su sitio web sea agradable a la vista y fácil de navegar para la mayor cantidad de usuarios posible. Es solo un buen negocio; El 25 % de los clientes potenciales no pueden acceder potencialmente a su sitio web sin un diseño disponible, por lo que puede aumentar tanto los ingresos como la reputación al mejorar la disponibilidad general.
Los cambios de diseño simples que pueden mejorar la accesibilidad del sitio incluyen:
- contraste y color – No hay colores contrastantes para el texto y el fondo es difícil de leer; utilizar herramientas como Controlador de contraste Web AIM para ver cómo se ve tu proyecto.
- uso del teclado – ¿Puedes navegar fácilmente por el sitio web usando solo los comandos del teclado? De lo contrario, considere rediseñar: los chicos con discapacidad motora fina no se quedarán mucho tiempo si no pueden acceder a la información rápidamente.
- Escalabilidad de texto – Los sitios de WordPress permiten escalar y ampliar el texto de forma nativa en múltiples dispositivos, lo cual es esencial para los usuarios con discapacidades visuales o dificultades de lectura. Échale un vistazo Guía de accesibilidad de WordPress para más consejos.
La legislación también está cambiando para dar prioridad a la provisión de gráficos. Por ejemplo, en los Estados Unidos Sección 508 de la Ley de Rehabilitación «Requiere que las agencias federales desarrollen, adquieran, mantengan y utilicen tecnologías de información y comunicación (TIC) que sean accesibles para personas con discapacidades».
Si bien las empresas privadas no tienen la misma obligación legal, muchas ahora usan la Sección 508 para comunicar sus opciones de diseño de sitios web y cumplir con las mejores prácticas federales.
Mientras tanto, en Europa, una actualización reciente Directiva de la UE sobre Accesibilidad Web aclara que todos los sitios web y aplicaciones del sector público en los Estados miembros de la UE deben cumplir con los estándares de accesibilidad o enfrentar multas; nuevamente, las empresas privadas no están obligadas por esta directiva, pero muchas optan por actualizar sus políticas de diseño gráfico.
Mejores prácticas para el diseño gráfico accesible
Las tres mejores prácticas de diseño pueden ayudarlo a capturar un grupo de usuarios tan amplio como sea posible, de acuerdo con universidad de washington. Desglosemos cada uno de ellos.
1. Disponibilidad
El diseño accesible, en particular, tiene en cuenta las necesidades de las personas que encuentran dificultades para navegar y utilizar sitios web. los Iniciativa de Accesibilidad Web ofrece una variedad de herramientas y recursos para ayudarlo a mejorar el acceso a su sitio web.
2. Universalidad
La versatilidad extiende la idea de accesibilidad a todos. En lugar de diseñar una página para usuarios típicos y luego múltiples iteraciones para visitantes con diferentes habilidades, esta mejor práctica se enfoca en hacer que el diseño y el contenido sean accesibles para todos. En muchos casos, los cambios necesarios para garantizar este tipo de versatilidad son mínimos, pero brindan un aumento significativo en la cantidad de visitantes potenciales a su sitio.
¿No sabes cómo es el diseño universal? Considere un ejemplo del mundo real de una puerta corredera automática. Cualquiera puede usarlos, pero facilitan mucho la vida a las personas con problemas de movilidad. Lo mismo ocurre con los sitios web; solo unos pocos cambios en el texto o el color pueden hacer que su diseño sea más versátil sin agregar capas adicionales de complicación o costo.
3. Utilidad
Por último, pero no menos importante, está la usabilidad. El objetivo aquí es hacer que su sitio web se vea como usable como sea posible, excepto que es universal. Tenga en cuenta el tamaño y el color del texto. Si aumenta significativamente el tamaño de todo el texto de su sitio web y utiliza colores de alto contraste, ha creado un diseño universal.
¿Pero es útil? Para algunos, el texto será demasiado brillante y demasiado grande; para otros, es posible que aún deba ampliarse. Mientras tanto, al ajustar el tamaño y el color del texto, proporciona la combinación perfecta de un diseño accesible, versátil y usable.
Peligros potenciales en el diseño gráfico
Si bien no existe una «manera correcta» de hacer una obra de arte accesible, se aplican los principios básicos, como se mencionó anteriormente. Pero también vale la pena tener cuidado con estos posibles problemas de diseño.
Texto limitado
Cada elemento gráfico requiere una alternativa de texto. Esto no solo ayuda a los visitantes que confían en las descripciones de texto, sino que también puede ayudar a que su sitio web se ubique más alto en los rankings de los motores de búsqueda. Utilice este código HTML para incluir texto alternativo.
sin semántica
Los elementos de etiquetas semánticas ayudan a identificar el significado y el contexto, lo que permite que los motores de búsqueda y las tecnologías de asistencia encuentren contenido relevante rápidamente. Usa elementos como
