Día mundial del diseño: la accesibilidad y el diseño atractivo pueden ir de la mano?

El Día Mundial del Diseño se celebra el 27 de abril por iniciativa del Consejo Internacional de Asociaciones de Diseño Gráfico. El objetivo es homenajear a todos aquellos que trabajan en esta disciplina.

El diseñador gráfico es un profesional que trabaja para recibir toda la información necesaria para luego plasmarla como comunicación visual, sin la necesidad de palabras. De esta manera transmite mensajes específicos mediante la utilización del gráfico.

La transformación del diseño gráfico ha ido de la mano del desarrollo tecnológico. Los nuevos métodos se han impuesto al uso de la tinta y la tipografía tradicional. Poco a poco se han ido sustituyendo los sistemas analógicos por los digitales. Hoy en día, la computadora es la herramienta básica y principal del diseñador.

Varios estudios han demostrado que los usuarios se crean la primera impresión de una página web mediante su imagen, es decir, por influencia directa del diseño web. El diseño gráfico y la creatividad se han convertido en aspectos fundamentales en la definición de la identidad visual y corporativa de una empresa.

El diseño y la maquetación de una página web son lo que permiten al usuario hacerse una idea de la empresa y que ésta le transmita confianza y credibilidad. Un sitio web corporativo debe explicar la misión, la visión, los objetivos y los valores de la empresa y ha de impresionar sus clientes potenciales desde un primer momento. Aparte de causar una buena impresión, la página web debe tener en cuenta la usabilidad, estar activa y actualizada, tener una alta velocidad de carga, estar optimizada para un buen posicionamiento web y funcionar correctamente. Además de todo esto, es imprescindible que la web sea accesible para todos y accesible no significa aburrido, simple o con poco color y sin elementos innovadores.

El diseño accesible y usable es esencial para las personas con discapacidad visual, las personas mayores, las que padecen autismo o discapacidades cognitivas o problemas de comprensión entre otros perfiles. También hay que tenerlo en cuenta para que la web se visualice adecuadamente en diferentes navegadores, dispositivos y situaciones lumínicas, etc. pero todo esto no significa que tengamos que crear una web poco creativo y atractivo.

 

Elementos para tener en cuenta la web accessible

El contraste de los colores

Cuando se crea un diseño una de las primeras decisiones es elegir los colores. Quiere decir que tendremos que diseñar en blanco y negro o siempre con los mismos colores?
No, en absoluto.
Hay que tener en cuenta, especialmente, el criterio 1.4.3 de las pautas de accesibilidad al contenido 2.1:

Contraste (mínimo): la presentación visual del texto y las imágenes de texto debe tener una relación de contraste de al menos 4,5: 1, excepto en los casos siguientes: (Nivel AA).

• Texto grande: el texto con caracteres tipográficos grandes y las imágenes del texto con caracteres tipográficos grandes deben tener una relación de contraste de al menos 3: 1;
• Accidental: el texto o las imágenes de texto que forman parte de un componente de interfaz de usuario inactivo, que son simple decoración, que no son visibles para nadie o que forman parte de una imagen que contiene otro contenido visual significativo, no tienen un ratio mínimo de contraste.
• Logotipo: el texto que forma parte de un logotipo o del nombre de una marca no tiene ningún requisito de contraste mínimo ".Hay que tener especial cuidado con los tonos de los grises, naranjas y amarillos, pero eso no quiere decir que haya colores prohibidos.

El criterio 1.4.3 sólo abarca "la presentación visual de texto e imágenes de texto" y el criterio 1.4.11 lo complementa, ya que el contraste ahora también es necesario para:

• Los iconos (que no van con texto)
• Los gráficos, por ejemplo, cada una de sus líneas
• El indicador del foco del teclado

Las técnicas suficientes para las gráficas son: que el contraste entre los colores sea suficiente así como el contraste de las líneas entre colores adyacentes.
Las técnicas suficientes para los textos de las gráficas son: que incluyan etiquetas y valores; que las imágenes que transmiten información y los textos de las gráficas tengan suficiente contraste; o que haya un control con suficiente contraste que permita a los usuarios cambiar a una presentación que utilice suficiente contraste.

 

Como se puede comprobar el contraste mínimo?

Una web útil para hacerlo es: Webaim color Contrast Checker entre otros:

• No depender sólo del color

Hay personas que no pueden ver o distinguir los colores. Por este motivo hay que tener en cuenta que no sólo se podrá transmitir información a través de este. Ejemplo: un calendario que cuente con días en rojo y verde según si un establecimiento es abierto o cerrado también deberá tener algún símbolo (asterisco o cualquier otro) que permita distinguir la diferencia.

• Orientación, navegación consistente y colocación de los elementos

Hay que tener cuidado a la hora de diseñar las páginas para que los elementos sigan una colocación similar y faciliten una navegación consistente. También una lectura lógica y una estructura de encabezados, etc. Que permita comprender la jerarquía de los contenidos.

• Texto, tamaño y tipo de la fuente

Aunque después en la maquetación y programación debe asegurar que esta se pueda ampliar, la fuente deberá tener, como mínimo, 10 puntos si bien esto puede variar dependiendo del tipo de fuente utilizada. Se recomienda utilizar tipografías de estilo Serif y Sans Serif. Los encabezados deben tener una fuente, como mínimo, un 20% más grande que el texto. Hay que evitar el exceso de mayúsculas.

Las líneas no deben ser ni muy cortas ni muy largas y hay que dejar espacios entre párrafos y alrededor de los encabezamientos. Utilizar texto en lugar de imágenes ayuda a que la página se cargue más rápidamente, además se puede leer sin problemas desde dispositivos utilizados por personas con discapacidades y se puede traducir más fácilmente. El texto debe poder aumentar sin perder contenido o funcionalidad al menos hasta el 200%.

• Enlaces

Los enlaces deben estar diferenciados del resto del texto, y preferiblemente no sólo con el color, sino otros recursos como el subrayado. Hay que pensar que es importante la información contextual de los enlaces. Evitar textos como "Aquí" o "+ info". El usuario debe estar informado en todo momento de donde conducen los enlaces a los que hará clic. Por ejemplo, cuando un enlace se abre en una nueva ventana se puede conseguir mediante un icono adyacente al enlace.

• Breadcrump y enlace para saltar al contenido principal

Es importante informar al usuario sobre su ubicación dentro del sitio web mediante un breadcrump
(También llamado hilo de Ariadna) y debe haber siempre un enlace al contenido principal situado en la parte superior de la página que puede estar oculto, pero cuando los usuarios de teclado pasen por encima deberá ser visible.

• Controles de formulario

Los controles de formulario deben tener etiquetas e instrucciones descriptivas.
Hay que prestar atención al contraste del contorno o límites visuales de un campo de formulario o botón, siempre que no esté deshabilitado.

• Incluir animaciones, vídeos y audios cuidado

Si se decide incluir un carrusel, por ejemplo, habrá que pensar que en el diseño debe haber un botón para detener el movimiento de este o de cualquier otro elemento que se mueva en el caso de que el movimiento sea automático.
El reproductor de vídeo o de sonido que se incluya debe contener un buen contraste en todos sus elementos, incluido el indicador visual del valor actual en un control deslizante.
Los controles mínimos que debe tener son: botones para reproducir, detener, escoger volumen, avanzar / retroceder, activar subtítulos y activar audiodescripción.
Los elementos parpellejats deben tener una duración máxima de 3 segundos y además deben poder detener o desactivar al actualizar la página.

Recomendamos consultar la guia de bones pràctiques per a la creació d'un disseny web accessible (Guia breu per a dissenyadors web) que vam redactar per l'ajuntament de Barcelona.  

Necesita ayuda para diseñar una web accesible?

A TOTHOMweb somos especialistas en accesibilidad. Diseñamos y desarrollamos páginas web
accesibles, responsiva, modernas y atractivas.

Ofrecemos un servicio completo
PLANIFICACIÓN> DISEÑO> DESARROLLO> MANTENIMIENTO

Contacta con nosotros y te ayudaremos a conseguirlo.