Estás leyendo la publicación: Diseño web accesible: cómo actualizar su sitio para todos los usuarios de Internet
En este video, Jaci del equipo de WebFX Interactive explica cómo puede comenzar con el diseño web accesible.
Transcripción:
¿Cómo se sentiría si estuviera realmente emocionado de visitar un sitio web, pero cuando va a ese sitio web, no puede acceder a ninguno de sus contenidos? Personalmente me sentiría frustrado, y me imagino que tú también lo harías.
Si no usa un diseño web accesible, este es el escenario que crea para uno de cada cuatro adultos que viven con una discapacidad en los EE. UU. Eso es alrededor de 61 millones de personas que no tienen el mismo acceso a su sitio web.
Seguir las pautas de accesibilidad del diseño web no es fácil si nunca lo ha hecho antes, pero describiré algunas cosas que puede hacer para comenzar.
Use las marcas de tiempo en la descripción del video si desea saltar a diferentes secciones de este video. En este momento, me sumergiré en una descripció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 discapacidades puedan usarlo. El objetivo del diseño accesible es eliminar las barreras tecnológicas para que cualquiera pueda interactuar con tu contenido.
¿Cómo se determina la accesibilidad del sitio web?
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 se preocupe si no está seguro de por dónde empezar. El W3C tiene documentación que le dice qué debe incluir su sitio web para cumplir con sus estándares.
Esta documentación incluye:
ATAG se enfoca en las herramientas que las personas usan para crear contenido de Internet y UAAG analiza la accesibilidad de las herramientas que generan contenido web.
Me centraré en las WCAG en este video, que son las pautas para hacer que el contenido del sitio web sea accesible para todos.
¿Qué es la accesibilidad WCAG?
Con WCAG, tiene tres niveles diferentes de cumplimiento: A, AA y AAA. A medida que pasa de A a AA a AAA, sigue más estándares establecidos por las WCAG y hace que su sitio sea accesible a un mayor número de personas.
Entonces, ¿cómo sabes si tienes un sitio web accesible? ¡Haz una auditoría!
Cómo auditar la accesibilidad de tu sitio web
No tienes que hacer una auditoría por tu cuenta. Si prefiere subcontratar su auditoría, póngase en contacto con un equipo de consultores que puedan analizar su sitio web y hacer los ajustes necesarios por usted.
Ahora, si prefiere manejar las cosas internamente, tiene muchas opciones. Puede revisar las páginas de su sitio web en busca de problemas manualmente, pero esto probablemente le llevará mucho tiempo.
Es posible que desee utilizar algunas herramientas para ayudarle. Ingrese su URL en un verificador de accesibilidad como WAVE para ver lo que necesita actualizar en una página. También puede usar un verificador de accesibilidad masiva para analizar varias páginas a la vez.
El sitio web de W3C tiene una gran lista de herramientas de accesibilidad, por lo que no tiene que hacer todo por su cuenta.
También tenemos una lista de cinco elementos importantes para su accesibilidad y algunos ejemplos de diseño accesible, de los que hablaré a continuación, así que quédese conmigo.
5 pautas de accesibilidad del diseño web
Solo recuerde que estos son breves resúmenes de las pautas de las WCAG. Le animo a utilizar la guía de referencia rápida del W3C para aprender técnicas más detalladas para el diseño accesible.
1. Asegúrate de que el texto sea legible
Cualquier texto de tamaño regular que comunique información importante debe ser fácil de leer.
El contraste juega un papel importante en esto. Tal como está ahora, el texto grande (como los encabezados principales) necesita una relación de contraste de texto a fondo de 3:1. El texto normal (o más pequeño), como el texto que forma el cuerpo de su contenido, necesita una relación de contraste de 4,5:1.
Un ejemplo de muy poco contraste se parece a un texto verde claro sobre un fondo verde ligeramente más oscuro. Cambie el texto a blanco o negro y tendrá mucho más contraste en su sitio web.
Los usuarios también deberían poder ampliar el texto de una manera que no afecte la funcionalidad de su sitio o que no les haga perder el contenido.
2. Optimiza imágenes para ser vistas y leídas
Agregar texto alternativo a las imágenes no es solo 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 fragmento de texto que explica claramente lo que sucede en una imagen. El texto alternativo encaja perfectamente en los códigos de inserción de sus imágenes. Como puede ver en este ejemplo de Mashable, la página tiene imágenes y cuando cambia al lado del código, ve el texto alternativo.
3. Brinde a su audiencia formas adicionales de entender los videos
Si nunca antes ha agregado subtítulos a sus videos, ahora es el momento de comenzar. Y no confíe solo en los que YouTube u otro proveedor de alojamiento genera automáticamente.
Si tiene el tiempo y la paciencia, eche un vistazo a sus subtítulos generados automáticamente y realice modificaciones. No van a ser perfectos viniendo de una IA.
También puede ordenar subtítulos usando una herramienta como Rev y luego agregarlos a su video.
Incluir transcripciones con tus videos los hace más accesibles. Si ha escrito un guión, ¡ya tiene una transcripción preparada!
Las descripciones de audio agregan otra capa de accesibilidad. Estas son pistas de audio separadas que describen lo que sucede en su video entre espacios de diálogo.
Entonces, si tienes a dos personas hablando sobre su reciente viaje de compras, y luego el video muestra algunas imágenes de una persona probándose ropa, la descripción de audio explicaría lo que sucede en el video. Puede ser algo como esto: una mujer se para frente a un espejo y coloca dos bufandas sobre su hombro.
Una plataforma de alojamiento como Wistia le permite cargar descripciones de audio (e incluso tiene una lista de verificación de accesibilidad de video cuando carga sus videos).
4. Diseñe su sitio web para que sea compatible con el mouse y el teclado
No todo el mundo utiliza un ratón para navegar por Internet. Su sitio web debe reflejar eso.
Esto no solo significa que debe asegurarse de que alguien pueda interactuar con su sitio web a través de un teclado, sino que también requiere que tenga formas notables de resaltar qué parte de su sitio web está enfocada.
Si observa otro de los ejemplos de diseño accesible, verá que cuando hago clic en la barra de búsqueda en el sitio web de Keds, aparece la clásica línea parpadeante para indicarme que puedo escribir. La barra de búsqueda también se vuelve más prominente cuando se hace clic.
Para cumplir con las pautas de las WCAG, esta funcionalidad debe ocurrir cuando se usa 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 por su sitio web sea simple y clara.
Escriba títulos de página y encabezados que tengan un propósito claro. Use un texto de anclaje de enlace que facilite la comprensión de lo que hay en el contenido al que está enlazando.
Nuevamente, use indicadores de enfoque para que las personas sepan dónde están en una página. Ofrezca más de una forma de acceder a una página web, como a través de un mapa del sitio, la navegación principal o la tabla de contenido.
¿Y cómo puedo saltarme este? Tener una navegación consistente. Esto significa que si tiene un encabezado de navegación principal, realmente no debería cambiar cuando un usuario salta de una página a otra.
En este ejemplo que presenta el sitio web de At Home, aunque hago clic de una página a la siguiente, la navegación en la parte superior de la página no cambia.
Y como dije antes, definitivamente esta no es una lista exhaustiva de lo que debe hacer para seguir las pautas de accesibilidad del diseño web. Estas pautas también pueden cambiar, así que investigue cuando esté listo para evaluar su accesibilidad.
Para seguir aprendiendo sobre diferentes temas de diseño web y marketing digital, suscríbase a nuestro canal de YouTube y a nuestro boletín informativo por correo electrónico, Revenue Weekly. No te decepcionará.
¡Gracias por acompañarme!
Publicamos videos todos los lunes.
Sí. Cada Lunes.
Disfruta el 5.000 vendedores que obtienen su conocimiento de marketing de los videos de WebFX.
Suscríbase ahora
