Errores comunes de accesibilidad de UX encontrados en sitios web

Tim Berners-Lee, el inventor de la World Wide Web, dice que la web es para todos. Desafortunadamente, ese no es siempre el caso.

Las malas decisiones de diseño pueden presentar barreras para muchos grupos diferentes de personas. De hecho, la investigación realizada por WebAIM encuentra que en un millón de páginas de inicio, hubo más de 50,000,000 de "errores de accesibilidad distintos" con un promedio de poco más de 50 por página.

Estos errores no solo hacen que las personas se sientan marginadas; evitan que cientos de miles de personas interactúen con su marca o compren su producto.

Pocos webmasters quieren marginar deliberadamente a las personas o limitar el acceso a su sitio. Por eso es tan importante comprender los problemas de accesibilidad web más comunes y aprender a resolverlos con un diseño limpio.

Empecemos.

¿Por qué es importante la accesibilidad de UX?

Debido a que Internet se ha convertido en una parte esencial de la vida cotidiana de más de mil millones de personas, los propietarios de sitios deben tomar medidas para asegurarse de que todos puedan acceder a él por igual. Sin embargo, no es sólo una cuestión de derechos humanos. Hay un caso financiero obvio para hacer que su sitio sea accesible. Dado que 61 millones de personas en los Estados Unidos tienen algún tipo de discapacidad, un sitio inaccesible podría estar perjudicando sus resultados. Haga que su sitio sea accesible y potencialmente abrirá la puerta a miles de clientes más.

Cumplir con las tendencias de diseño de accesibilidad de UX puede reforzar la reputación de su empresa. Hacer un esfuerzo por atender a un grupo particular de usuarios desfavorecidos demuestra que su empresa se preocupa por todos sus clientes. Este paso adicional puede alentar a los clientes potenciales a hacer más negocios con su marca en el futuro.

También está el pequeño asunto del cumplimiento legal. Si bien existe un debate sobre si la Ley de Estadounidenses con Discapacidades de 1990 incluye sitios web además de tiendas físicas, eso no ha impedido que se presenten miles de demandas ante los tribunales federales cada año. Es posible que no sea sancionado por no cumplir con el sitio web de ADA, pero la amenaza de acción legal es clara.

En última instancia, diseñar con accesibilidad UX no solo mejora la experiencia de navegación para usuarios con discapacidades; mejora la experiencia del usuario para todos. Incluso los usuarios con una visión perfecta se benefician de un mejor contraste de color y más etiquetas, y su SEO ciertamente se beneficia de cosas como texto alternativo agregado y mejores descripciones de enlaces.

Los 7 errores de accesibilidad web más comunes

Hacer que su sitio web sea más accesible se trata tanto de evitar problemas comunes como de integrar nuevas tecnologías. Evite los siguientes siete errores y contribuirá en gran medida a que su sitio sea más accesible que el de sus competidores.

1: falta texto alternativo en las imágenes

El texto alternativo es un atributo HTML que describe lo que representa una imagen. Desde una perspectiva de accesibilidad, el texto alternativo proporciona información para que los lectores de pantalla describan con precisión las imágenes a los usuarios con discapacidades visuales. Si no proporciona texto alternativo o su texto alternativo no es muy descriptivo, entonces no está haciendo que las imágenes de su sitio estén disponibles para todos.

Hay una diferencia entre el texto alternativo vacío y el texto alternativo faltante. A veces, las imágenes pueden tener fines puramente decorativos. Cuando este sea el caso, se puede usar una etiqueta alt vacía, que aparece como alt=””. Los lectores de pantalla lo ignoran y no afecta la usabilidad.

A menudo, el texto alternativo no está vacío sino que falta por completo. Cuando un lector de pantalla encuentra un atributo alt faltante, asumirá que la imagen es importante e inyectará el nombre del archivo. Para imágenes como gráficos e infografías que son fundamentales para que un usuario comprenda una página web, el nombre del archivo no será suficiente. Por eso es esencial crear texto alternativo para todas sus imágenes.

2: Contraste de color débil

¿Alguna vez has intentado leer una fuente blanca sobre un fondo amarillo? No es fácil, ¿verdad? Pero eso podría ser lo que sienten muchos usuarios cada vez que visitan su sitio. La verdad es que a algunas personas les cuesta leer el texto a menos que el contraste de color entre la fuente y el fondo sea muy marcado. Es por eso que la fuente negra sobre un fondo blanco es una opción tan popular.

La forma más sencilla de mejorar el contraste de color es evitar el uso de colores similares para los fondos y el texto. Eso significa que no hay fuente naranja sobre un fondo rojo. O texto verde sobre fondo azul. Preste especial atención a las características de diseño, como el encabezado de su sitio web o el botón de envío en los formularios. Estas características tienden a incorporar colores de marca y es más probable que causen problemas de contraste.

Alternativamente, puede usar una herramienta como Contrast Checker de WebAIM para cuantificar su relación de contraste. Cuanto mayor sea su proporción, mejor será el contraste y más legible será su sitio web. La herramienta le dirá si sus colores pasan o fallan. Como regla general, los colores del texto y del fondo deben tener una relación de contraste de al menos 3:1 para texto grande y de al menos 4:1 para texto de tamaño normal.

Como puede ver en las imágenes a continuación, el texto azul oscuro sobre un fondo blanco tiene una excelente relación de contraste.

Pero el texto amarillo sobre un fondo blanco tiene una relación de contraste terrible.

3: Texto de enlace pobre

Los enlaces son una parte vital de una página web, tanto desde la perspectiva de la experiencia del usuario como para el SEO. Pero debe describirlos con precisión utilizando el texto del enlace para que sean efectivos.

Mientras que aquellos versados ​​en SEO quizás nunca sueñen con perder la oportunidad de agregar una palabra clave en un enlace interno, el texto de enlace faltante es sorprendentemente común. Los logotipos, botones e íconos son culpables de no tener texto, lo que significa que los lectores de pantalla los ignorarán. Eso no es bueno si desea que los usuarios hagan clic en su botón CTA.

El texto del enlace vago o ambiguo también es un problema. Una frase como "haga clic aquí" no solo no ofrece ningún valor de SEO, sino que también puede dificultar el acceso de los usuarios a su sitio a través de un lector de pantalla. Incluir todo el enlace http:// sin ningún tipo de texto ancla es aún peor. Ninguna versión contiene la información que estos usuarios necesitan.

En su lugar, asegúrese de que el texto en el que se puede hacer clic describa exactamente lo que el usuario puede encontrar en la página siguiente. En el siguiente ejemplo, por ejemplo, sabes que al hacer clic en el enlace, se te redirigirá a una página donde puedes obtener una prueba gratuita de 14 días de Shopify.

Luego están los enlaces de navegación. Estos también pueden crear problemas para los lectores de pantalla si están mal codificados. Esto se debe a que los lectores de pantalla no los omitirán, lo que significa que los usuarios tendrán que escuchar su menú de navegación cada vez que abran una nueva página. Solucione esto asignando roles ARIA a sus menús de navegación para indicar su propósito. Esto ayudará a los lectores de pantalla a evitarlos cuando sea necesario.

4: Faltan etiquetas de formulario

Estoy casi seguro de que su sitio web tiene al menos un formulario, incluso si solo está en su página de contacto. Pero, ¿todos los campos tienen una etiqueta que les dice a los usuarios qué información deben ingresar? De lo contrario, sus formularios no son accesibles para todos.

Al igual que con el texto del enlace, los campos de entrada de formulario necesitan una etiqueta para que los lectores de pantalla y otros dispositivos de accesibilidad puedan entenderlos y ayudar a los usuarios a navegar por ellos. Sin embargo, una etiqueta no es solo el texto de marcador de posición que puede ver en el campo de formulario. También debe agregar una descripción en el código del formulario. Esto se debe a que los lectores de pantalla generalmente ignoran el texto del marcador de posición. Tampoco ayuda que el texto del marcador de posición generalmente carezca de un fuerte contraste de color.

Idealmente, tendrá una etiqueta visible dentro de un elemento <label> para que todos (usuarios, lectores de pantalla, bots) puedan entender lo que debe ir en cada campo.

5: Sin marcado para tablas de datos

Las tablas son una especie de pesadilla para los lectores de pantalla y otros dispositivos de accesibilidad. Cuando los lectores de pantalla se encuentran con una tabla, le dicen al usuario que hay una tabla con una cantidad determinada de columnas y filas y luego proceden a enumerar todos los datos. Desafortunadamente, es posible que esos datos no se lean en el orden correcto. Peor aún, los lectores de pantalla no pueden leer tablas donde hay más de un conjunto de encabezados de fila o columna.

En verdad, la mejor manera de hacer que las tablas sean accesibles es no tenerlas. Por supuesto, eso no va a funcionar para algunos sitios web. Por lo tanto, cuando se requieren tablas, debe hacerlas lo más simples posible y usar el marcado correcto. Los atributos ID, HEADERS y SCOPE deben usarse para etiquetar correctamente cada parte de su tabla. También puede usar los títulos de las tablas para proporcionar información adicional a los usuarios sobre cómo comprender mejor su tabla.

Otra alternativa es presentar sus datos como un archivo de imagen, con el texto alternativo apropiado que enumera los datos. Sin embargo, para tablas complejas, eso puede no ser factible.

6: Falta de accesibilidad del teclado para lectores de pantalla

No todo el mundo va a utilizar un ratón para navegar por su sitio web. Muchas personas con discapacidad visual usarán un teclado u otro dispositivo de accesibilidad para moverse por su sitio web. Y eso significa que debe prestar especial atención al diseñar y crear el diseño de su sitio.

Específicamente, los usuarios deben poder navegar por su sitio web usando la barra espaciadora y la tecla de tabulación. Los sitios simples construidos en HTML semánticamente correcto pueden hacer esto posible sin ningún ajuste, pero los sitios web más complicados necesitarán codificar puntos de referencia digitales que permitan moverse mejor a los usuarios de teclados y lectores de pantalla.

Agregar enlaces para saltar al contenido en la parte superior de cada página también puede evitar que sus usuarios tengan que pasar por cada elemento del menú cada vez que abren una nueva página. Estos botones, que aparecen cuando presiona la tecla de tabulación, permiten a los usuarios navegar por el sitio usando las teclas de tabulación y barra espaciadora para omitir la navegación y dirigirse directamente al contenido principal de la página.

7: Contenido no HTML sin marcado adecuado</h3>

Es fácil olvidarse de los elementos que no son HTML al optimizar su sitio para la accesibilidad. Pero el contenido como archivos PDF y documentos de Word también puede ser un problema. De fábrica, los usuarios no pueden personalizar estos documentos para que sean más fáciles de leer ni funcionan bien con tecnologías de asistencia. Los problemas de accesibilidad son aún peores cuando los documentos se producen como archivos PDF de solo imagen.

Una solución es solucionar los errores de navegación etiquetando estos recursos para la navegación mediante lectores de pantalla. Otra es usar el Comprobador de accesibilidad integrado de Office para mejorar la accesibilidad de estos documentos cuando los crea.

El contenido interactivo como controles deslizantes, acordeones y widgets de arrastrar y soltar también pueden afectar la accesibilidad. También lo puede hacer el contenido dinámico, como los cuadros emergentes y los mensajes de confirmación. Si el lector de pantalla no puede entender cuándo se cargan estas piezas de contenido, no podrá informar a los usuarios sobre ellas.

Una vez más, puede utilizar los atributos de ARIA para resolver este problema. Etiquetar estos elementos interactivos y dinámicos con el atributo ARIA correcto notificará a los lectores de pantalla que el contenido de la página ha cambiado. Alternativamente, puede diseñar su sitio de una manera que evite la necesidad de ventanas emergentes y otras formas de contenido dinámico. Los sitios web estáticos pueden no parecer tan llamativos, pero son mucho más accesibles.

preguntas frecuentes

Conclusión

Desafortunadamente, incluso los mejores diseñadores y empresarios web pueden crear sitios web inaccesibles. Es por eso que es tan importante seguir refiriéndose a estos errores cada vez que crea un sitio web o crea una nueva pieza de contenido.

Es más esfuerzo incluir texto alternativo en todas las imágenes, agregar datos de marcado a las tablas y mejorar la calidad del texto de su enlace, pero millones de usuarios se lo agradecerán.

Pero no te detengas allí. A continuación, aprenda cómo crear contenido inclusivo y mejorar la experiencia general del usuario de su sitio web.

¿Qué errores de accesibilidad de UX vas a corregir primero?

Vea cómo mi agencia puede atraer cantidades masivas de tráfico a su sitio web

• SEO : desbloquee cantidades masivas de tráfico SEO. Ver resultados reales.
• Marketing de contenido : nuestro equipo crea contenido épico que se compartirá, obtendrá enlaces y atraerá tráfico.
• Medios pagados: estrategias pagas efectivas con un ROI claro.

Reserve una llamada