Cómo crear un diseño accesible de una página web

Pantalla laptop

Tiendas online, aplicaciones bancarias, reservaciones de hotel o trabajos freelance, cada vez son más las tareas que se manejan a través del internet y que han reemplazado en algunos casos, a los medios convencionales.

Este rápido crecimiento de las operaciones digitales nos ha facilitado en muchos aspectos la vida. Nos ahorra tiempo ya que las transacciones son más rápidas y no hay que desplazarse a ningún establecimiento físico, y por supuesto, se han creado nuevos medios que antes no existían y que ahora la mayor parte de la gente usa, como las redes sociales, el streaming de películas y series en plataformas como Netflix, o sistemas de pagos en línea como Paypal.

Con este auge del mundo digital es indispensable invertir en el desarrollo de interfaces accesibles y bien diseñadas para los usuarios. Sin embargo, no podemos olvidar que hay usuarios que sufren de discapacidades físicas o psicológicas que limitan considerablemente  su experiencia y su capacidad de manejo de ordenadores y móviles.

Aunque hay algunas discapacidades, como las personas que usan sillas de rueda, que no interfieren con el uso del internet, otras, como problemas de la vista o ceguera, problemas de coordinación motora, sordera, o el autismo, pueden dificultar gravemente la capacidad de navegar en la web. Para estos casos, ya se han creado algunos dispositivos como los lectores de pantalla, que asisten y apoyan a los usuarios en las áreas en donde tienen impedimentos.

Pero esta es solo la primera parte de la resolución del problema. Pensando en estos usuarios, tenemos que diseñar interfaces de páginas web que faciliten su experiencia y se adapten a sus necesidades. Hay algunos principios a la hora de diseñar que podemos aplicar.

Contenido y fuentes

Empezando por lo más básico, hay que establecer prioridades en el diseño del contenido. El encabezado y la barra de menú deben poder localizarse fácilmente a nivel visual y tienen que ser lo primero que el usuario vea. Los elementos en la página de inicio, las imágenes y la información relevante será lo segundo a ubicar.

En muchas páginas aparecen ads o banners publicitarios. Si de por sí esto es molesto para todos los usuarios, para los que tienen impedimentos visuales resulta un problema ya que causa mucha confusión, e interfiere con la lectura del esquema de la web. Por eso es indispensable que crees un diseño editorial general de la página que esté organizado de manera lógica y entendible, y que los elementos tengan el tamaño adecuado, de manera que aunque existan otras distracciones, los usuarios puedan enfocarse en el contenido importante.

Las tipografías que utilices preferiblemente tienen que ser grandes y legibles. Las de tipo Sans serif y bold le facilitan mucho la lectura a personas que puedan sufrir de dislexia. Otras fuentes recomendadas son: Arial, Times New Roman, Helvetica, Tahoma, Calibri y Verdana.

Y por supuesto, siempre debes cuidar que haya una diferenciación clara entre el texto y el fondo. No utilices colores similares, elije más bien colores que contrasten entre sí.

Tipografía Sans Serif Bold

Utilizar tipografías Sans Serif Bold permiten una mejor visualización del texto.

Texto alternativo

El Texto Alternativo o el Alt Tag, son las descripciones que se le colocan a las imágenes en las páginas web. Aunque este texto no está disponible para que lo lean los usuarios, una descripción bien redactada es una herramienta que nos ayuda a lograr un mejor posicionamiento SEO.

Pero la utilidad del Alt Tag no solo se reduce a eso. Para aquellos usuarios que utilizan lectores de pantalla por discapacidades visuales, las descripciones de las imágenes son la única referencia que tienen para saber cuál es la apariencia de lo que está expuesto en la página. De manera que si vamos a colocar por ejemplo, una fotografía de unas suculentas, un buen texto alternativo sería: Tres plantas suculentas en maceteros color rosa. Un texto muy corto como: Plantas en maceteros, no es una descripción que de detalles relevantes y por lo tanto no sirve.

Suculentas en macetero color rosa

Tres plantas suculentas en maceteros color rosa. Ejemplo de texto alternativo.

Adaptabilidad

A la hora de diseñar también tenemos que tomar en cuenta todas las presentaciones en las que va a mostrarse nuestra interfaz, ya sea en versión web o móvil. La experiencia siempre será diferente dependiendo del medio en donde lo estemos visualizando.

Cuando utilizamos el móvil, podemos estar expuestos a diferentes entornos que dificultan la lectura del contenido de la pantalla. Si estamos en exteriores por ejemplo, el brillo del sol hará que la pantalla se vea muy oscura, y el ruido no permitirá que escuchemos bien los audios. Por eso es importante pensar bien estos detalles, de manera que la versión móvil tenga letras grandes y colores oscuros, y los videos deben llevar subtítulos en caso de que sea difícil escucharlos.

Pantalla de móvil

Adaptar el diseño de la interfaz para que sea legible tanto en móviles como en ordenadores.

Consistencia en el diseño

El diseño editorial que hagamos de nuestra página web debe ser el mismo independientemente de la sección en donde te encuentres. Los mismos íconos de la barra del menú tienen que aparecer en la sección de Inicio como en la sección de Contactos. No debemos cambiar el estilo ni la ubicación de los botones claves de la web.

Tampoco es conveniente que coloquemos videos que se reproduzcan automáticamente al abrir la página. Para los usuarios que usan lectores de pantalla, es difícil saber cómo pausarlos.

Página web starbucks

La barra de menú de la página de Starbucks es igual en todas las secciones.

Navegación por teclado

Por último, a algunos usuarios con problemas de coordinación motora se les dificulta agarrar el ratón del ordenador o utilizar el touchpad de una portátil, y dependen únicamente del teclado. Asegúrate de que tu página web esté diseñada de manera que pueda ser completamente funcional solo con los botones del teclado.


Deja tu comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

*

  1. Responsable de los datos: Miguel Ángel Gatón
  2. Finalidad de los datos: Controlar el SPAM, gestión de comentarios.
  3. Legitimación: Tu consentimiento
  4. Comunicación de los datos: No se comunicarán los datos a terceros salvo por obligación legal.
  5. Almacenamiento de los datos: Base de datos alojada en Occentus Networks (UE)
  6. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.