Diseño Web Accesible: Cómo actualizar su sitio para todos los usuarios de Internet

Diseño web

¿Cómo te sentirías si tuvieras muchas ganas de visitar un sitio web, pero cuando vas a ese sitio web, no puedes acceder a ninguno de sus contenidos? Yo personalmente me sentiría frustrado, e imagino que tú también.

Si no utilizas un diseño web accesible, este es el escenario que creas para uno de cada cuatro adultos que viven con una discapacidad en los Colombia Eso es alrededor de mas de 5 millones de personas que no tienen igualdad de acceso a tu sitio web.

Seguir las pautas de accesibilidad del diseño web no es fácil si nunca lo has hecho antes, pero voy a resumir algunas cosas que puedes hacer para empezar.

Utiliza las marcas de tiempo de la descripción del vídeo si quieres saltar a las diferentes secciones de este vídeo. En este momento, me sumergiré en una visión general de la accesibilidad del sitio web.

¿Qué es la accesibilidad del sitio web?

La accesibilidad del sitio web significa que su sitio web está diseñado para que las personas con discapacidad puedan utilizarlo. El objetivo del diseño accesible es eliminar las barreras tecnológicas para que cualquier persona pueda interactuar con su contenido.

Según el World Wide Web Consortium, también conocido como W3C, un sitio web accesible funciona para personas con discapacidades auditivas, cognitivas, neurológicas, físicas, del habla y visuales.

No te preocupes si no sabes por dónde empezar. El W3C dispone de documentación que le indica qué debe incluir su sitio web para cumplir sus normas.

Esta documentación incluye:

Las ATAG se centran en las herramientas que se utilizan para crear contenidos en Internet, mientras que las UAAG se centran en la accesibilidad de las herramientas que generan contenidos web.

En este vídeo me centraré en las WCAG, que son las directrices para que el contenido de los sitios web sea accesible para todos.

Con las WCAG, hay tres niveles diferentes de cumplimiento: A, AA y AAA. A medida que se pasa de la A a la AA y a la AAA, se siguen más normas establecidas por las WCAG y se consigue que el sitio sea accesible para un mayor número de personas.

Entonces, ¿cómo saber si tiene un sitio web accesible? Realice una auditoría.

Cómo auditar la accesibilidad de su sitio web

No tiene que hacer una auditoría por su cuenta. Si prefiere subcontratar la auditoría, póngase en contacto con un equipo de consultores que pueda analizar su sitio web y realizar los ajustes necesarios.

Ahora bien, si prefiere manejar las cosas internamente, tiene muchas opciones. Puede peinar las páginas de su sitio web en busca de problemas de forma manual, pero esto probablemente le quitará mucho tiempo.

Quizás quieras utilizar algunas herramientas para ayudarte. Introduce tu URL en un comprobador de accesibilidad como WAVE para ver lo que tienes que actualizar en una página. También puedes utilizar un comprobador de accesibilidad masivo para analizar varias páginas a la vez.

Diseño Web, Diseño Web Accesible: Cómo actualizar su sitio para todos los usuarios de Internet, e-ideas - Agencia de Marketing Digital en Medellín

El sitio web del W3C tiene una gran lista de herramientas de accesibilidad, así que no tienes que hacerlo todo por tu cuenta.

También tenemos una lista de cinco elementos importantes para su accesibilidad y algunos ejemplos de diseño accesible -de los que voy a hablar a continuación- así que quédate conmigo.

5 pautas de accesibilidad en el diseño web

Recuerda que se trata de breves resúmenes de las directrices WCAG. Te animo a que utilices la guía de referencia rápida del W3C para conocer más a fondo las técnicas de diseño accesible.

1. Asegúrate de que el texto es legible

Cualquier texto de tamaño normal que comunique información importante debe ser fácil de leer.

El contraste desempeña un papel importante en este sentido. En la actualidad, el texto grande (como los títulos principales) necesita una relación de contraste de 3:1 entre el texto y el fondo. El texto normal (o más pequeño), como el que compone el cuerpo del contenido, necesita una relación de contraste de 4,5:1.

Un ejemplo de poco contraste es el de un texto verde claro sobre un fondo verde ligeramente más oscuro. Si cambias el texto a blanco o negro, tendrás mucho más contraste en tu sitio web.

Los usuarios también deberían poder ampliar el texto de forma que no afecte a la funcionalidad de su sitio ni les haga perder contenido.

2. Optimizar las imágenes para que se vean y se lean

Añadir texto alternativo a las imágenes no es sólo una práctica común de SEO. Ayuda a las personas que no pueden ver las imágenes a entender lo que hay en ellas.

El texto alternativo es un trozo de texto que explica claramente lo que ocurre en una imagen. El texto alternativo encaja perfectamente en los códigos de inserción de tus imágenes. Como puedes ver en este ejemplo de Mashable, la página tiene imágenes y cuando pasas al lado del código, ves el texto alternativo.

Diseño Web, Diseño Web Accesible: Cómo actualizar su sitio para todos los usuarios de Internet, e-ideas - Agencia de Marketing Digital en Medellín

3. Ofrezca a su público otras formas de entender los vídeos

Si nunca has añadido subtítulos a tus vídeos, ahora es el momento de empezar. Y no te conformes con los que YouTube u otro proveedor de alojamiento genera automáticamente.

Si tienes tiempo y paciencia, echa un vistazo a los subtítulos generados automáticamente y edítalos. No van a ser perfectos viniendo de una IA.

También puedes pedir subtítulos con una herramienta como Rev y luego añadirlos a tu vídeo.

Incluir transcripciones con tus vídeos los hace más accesibles. Si has escrito un guión, ya tienes una transcripción preparada.

Las descripciones de audio añaden otro nivel de accesibilidad. Se trata de pistas de audio separadas que describen lo que ocurre en el vídeo entre los espacios de diálogo.

Por ejemplo, si hay dos personas hablando de su reciente viaje de compras y luego el vídeo pasa a unas imágenes de una persona probándose ropa, la descripción de audio explicará lo que está ocurriendo en el vídeo. Puede ser algo así: Una mujer se pone delante de un espejo y se echa dos pañuelos al hombro.

Una plataforma de alojamiento como Wistia te permite subir descripciones de audio (e incluso tiene una lista de comprobación de accesibilidad del vídeo cuando lo subes).

4. Diseñe su sitio web para que sea fácil de usar con el ratón y el teclado

No todo el mundo utiliza el ratón para navegar por Internet. Su sitio web debe reflejar eso.

Esto no sólo significa que tienes que asegurarte de que alguien pueda interactuar con tu sitio web a través de un teclado, sino que también requiere que tengas formas notables de resaltar qué parte de tu sitio web está enfocada.

Si observamos otro de los ejemplos de diseño accesible, veremos que cuando hago clic en la barra de búsqueda del sitio web de Keds, aparece la clásica línea parpadeante para indicarme que puedo escribir. La barra de búsqueda también se hace más prominente cuando se hace clic.

Diseño Web, Diseño Web Accesible: Cómo actualizar su sitio para todos los usuarios de Internet, e-ideas - Agencia de Marketing Digital en Medellín

Para cumplir con las directrices WCAG, esta funcionalidad debe ocurrir cuando se utiliza un teclado.

5. Haz que la navegación de tu sitio sea fácil de entender

Este consejo va más allá de la accesibilidad. En general, es bueno hacer que la navegación de su sitio web sea sencilla y clara.

Escriba los títulos de las páginas y los encabezados que tengan un propósito claro. Utiliza un texto de anclaje de los enlaces que facilite la comprensión del contenido al que se enlaza.

De nuevo, utilice indicadores de enfoque para que la gente sepa en qué parte de la página se encuentra. Ofrezca más de una forma de acceder a una página web, como por ejemplo a través de un mapa del sitio, una navegación principal o un índice de contenidos.

¿Y cómo puedo saltarme esta? Tenga una navegación coherente. Esto significa que si tiene una cabecera de navegación principal, ésta no debería cambiar cuando un usuario salta de una página a otra.

En este ejemplo del sitio web de At Home, aunque estoy haciendo clic de una página a la siguiente, la navegación en la parte superior de la página no cambia.

Una captura de pantalla de la navegación principal en el sitio web de la empresa de decoración del hogar At Home

Y como he dicho antes, ésta no es una lista exhaustiva de lo que hay que hacer para seguir las directrices de accesibilidad del diseño web. Estas pautas también pueden cambiar, así que investiga cuando estés listo para evaluar tu accesibilidad.

Para seguir aprendiendo sobre diferentes temas de diseño web y marketing digital, suscríbete a nuestro canal de YouTube y a nuestro boletín de noticias por correo electrónico, Revenue Weekly. No te decepcionará.

¡Gracias por acompañarme!

¿Te sientes perdido para
desarrollar tu estrategia digital?