10 formas de diseñar su sitio para la accesibilidad

Estoy frustrado con el diseño web moderno. Y ciertamente estoy frustrado con la mayoría de los diseñadores de plantillas y temas que venden su trabajo sin verificar la accesibilidad global.

Muchos diseñadores en realidad toman buenos CMS accesibles y luego crean diseños con grandes problemas de accesibilidad.

Soy abogado, diseñador de sitios web y consultor de accesibilidad/diversidad en Australia. Habiendo asesorado a los sectores corporativo, gubernamental y educativo, encuentro que muchos sitios no son accesibles y ofrecen una mala experiencia a muchos usuarios.

¿Por qué es importante la accesibilidad?

En 2010, el 10% de las personas en el mundo desarrollado tenía una discapacidad de lectura. Esa cifra era del 15% en los países no desarrollados.

En Australia, la accesibilidad se considera lo suficientemente importante como para llevarlo a los tribunales si su sitio no es accesible. ¿Conmocionado?

No, nunca recomendaría a un cliente que se centre en "sitios para ciegos", sino en sitios accesibles para todos. Eso incluye a las personas con discapacidad de lectura, discapacidad física, discapacidad auditiva, incluso las generaciones mayores. En resumen, un gran porcentaje de toda su audiencia simplemente no puede acceder a su sitio de la forma en que lo hace.

¿Caro? No, de hecho se trata de estándares de diseño, porque esto es realmente básico.

Aquí hay diez pasos que puede seguir para asegurarse de que su sitio sea accesible.

#1. Haz que tu sitio sea fácil de usar

No necesito decirles cómo diseñar. Pero estos tres principios clave ayudarán a los usuarios con discapacidades:

1. Hacer que los sitios sean fáciles de leer y comprender
2. Haga que los sitios sean fáciles de navegar
3. Haga que los sitios sean fáciles de usar en dispositivos móviles

¡Esto lo acercará a la accesibilidad, y también ayudará a los motores de búsqueda a amar su sitio!

Los lectores de pantalla con los que pruebo mis sitios son como los robots de Google (excepto que la tecnología ciega fue la primera).

#2. Prueba con software de accesibilidad

¿Sabía que las PC tienen software de accesibilidad para ayudar a navegar y leer la pantalla? Probablemente lo hizo, pero ¿sabía también que los dispositivos móviles tienen un software de accesibilidad integrado en el núcleo? Este software puede leer a las personas, incluidas aquellas con problemas de visión:

• Apple (iOS) usa VoiceOver;
• Android usa Talkback;
• Windows usa Narrador.

Casi todos los diseñadores de sitios web incluyen un menú en la plantilla, ¡pero el 95% no se puede leer con ninguna de las tecnologías anteriores! La mayoría de estos servicios de accesibilidad no pueden reconocer que existe un menú porque está codificado incorrectamente. La mayoría de las veces, el problema es que el menú está mal codificado o no está claramente etiquetado.

Vale la pena cargar algunos sitios en su teléfono y activar las funciones de accesibilidad. Vea si el menú de su sitio funciona o no.

#3. No escriba todo en mayúsculas

Este es probablemente el cambio más básico que alguien puede hacer en su sitio: no escriba en mayúsculas.

¡Esto está científicamente probado y probado PORQUE TODAS LAS MAYÚSCULAS SON DIFÍCILES DE LEER PARA CUALQUIER PERSONA!

Las mayúsculas más usadas se encuentran en los elementos y botones del menú. Está ayudando a difundir su mensaje si escribe normalmente con mayúsculas regulares, a menos que tenga un propósito de diseño específico, como una marca o un logotipo.

#4. Explique sus enlaces claramente

Los botones "Leer más" o "Hacer clic aquí" no le dicen a Google (ni a los que usan lectores de pantalla) qué hay detrás del enlace. Simplemente saque su enlace de contexto para ver si tiene sentido. ¿"Leer más" en el medio de una página tiene algún sentido para usted? ¿Leer más qué?

#5. Usa buenos estilos contrastantes

Eso no significa eliminar su contenido, significa hacerlo más fácil para las personas con problemas de visión. Aquí tienes un consejo... enciende la pantalla de tu móvil a media potencia e intenta leer un sitio. ¿Cómo se ve en la luz y en la oscuridad?

#6. Use los enlaces 'saltar al contenido'

¡Imagina asentir con la cabeza 30 veces antes de leer el contenido principal! Las personas con problemas de lectura tienen que hacer esto si no les permite saltarse el menú. En realidad, eso es lo mismo para usar etiquetas de encabezado, H1 a H4 ayudan a los motores de búsqueda y a las personas con problemas de lectura a navegar por su sitio.

¡Ah, y no escondas el enlace fuera de la pantalla! Las personas con problemas de visión a menudo usan lupas y buscan esos enlaces manualmente (no a través del teclado).

#7. Deja de usar ventanas emergentes

Al menos, deja de usar aquellos de los que no podamos deshacernos pulsando 'esc'. ¿Sabías que nuestro software básicamente no puede entrar en esos cuadros emergentes? Y, por lo general, terminamos leyendo lo que hay detrás de la caja: a usted le parece atenuado, pero a nosotros no.

Si vas a utilizar ventanas emergentes:

• Hágalos para que puedan descartarse con el botón 'esc'.
• Hágalos para que nuestro software pueda leer el cuadro, no el texto detrás.
• Proporcione detalles de una forma alternativa de encontrar el contenido o complete el formulario - 'o vaya a nuestra página xxxx para obtener más detalles'.

#8. Los redimensionadores de texto pueden ser útiles en algunas situaciones

Personalmente, los redimensionadores de texto son mucho menos importantes que saltar a los enlaces de contenido. Esto se debe a que una persona con una discapacidad de impresión (incluida la generación anterior) utilizará la lupa de Windows o algún producto especializado, como texto de zoom, ojos mágicos u otro software gratuito. En mi texto de experiencia, los redimensionadores generalmente destruyen el contenido móvil, y son incluso menos sensibles que pellizcar o usar funciones básicas de accesibilidad móvil.

Además, con la tecnología adaptativa que cambia el tamaño del texto, el usuario puede apagarlo y encenderlo para encontrarse en la pantalla (algo de zoom para que solo pueda ver 1/8 de la pantalla a la vez). Dicho esto, los redimensionadores de texto aún pueden ser relevantes y vale la pena colocarlos en sitios gubernamentales, solo que no es una de las 10 prioridades principales para mí.

#9. Utilice iconos de fuente en lugar de iconos de imagen

Aquellos que usan la ampliación pueden ver solo alrededor de 1/8 de un sitio a la vez, y aquellos que usan teléfonos móviles generalmente cargan las versiones gratuitas de la imagen, presionando el botón 'lector'. Podría escribir una publicación sobre el hecho de que la mayoría de los 'iconos de imagen' se pixelan al extremo con el zoom máximo, pero los íconos de fuentes no (bueno, no tanto de todos modos).

#10. Agregar transcripciones de video

No tiene sentido poner un video de YouTube en un sitio web si es totalmente silencioso, ni tampoco tiene sentido poner uno que no tenga una transcripción o una forma para que las personas con discapacidad auditiva puedan seguirlo. Eso sería como tener una audiencia global o una base de clientes, pero solo brindando información en japonés.

Solo por diversión, obtenga un video técnico de YouTube sin discursos y luego cierre los ojos. Nota: cerrar los ojos no reproduce la ceguera porque puedes volver a abrirlos, pero es un ejercicio divertido.

Recursos de accesibilidad

Estos sitios proporcionan pautas y herramientas para verificar su sitio:

• Comprobador de accesibilidad Web Aim
• Pautas de accesibilidad del contenido web del gobierno australiano
• Validador W3C. Tenga en cuenta que el validador W3C devuelve muchos errores innecesarios. Debe juzgar si cada error vale la pena o no.

Estos sitios proporcionan lectores de pantalla que puede usar para probar su sitio de escritorio con:

• Acceso al trabajo con voz (JAWS)
• Ai squared ofrece versiones de prueba gratuitas
• Window Eyes - Lector de pantalla
• NV Access ofrece un lector de pantalla Non Visual Desktop Aid (NVDA) totalmente gratuito

Nota: no recomiendo Sitecues: no es lo que yo llamaría fácil de instalar o eficaz para las personas con problemas de impresión.

Conclusión

Como en todo, hay un equilibrio entre funcional y estricto cumplimiento de las normas. Ninguno de los sitios de mis clientes no es 100% accesible / compatible con W3C. Son accesibles y amigables con los motores de búsqueda. Son lógicos y bien contrastados, pero también tienen estilo y características de impacto.

¿Cuántos millones de personas tienen una discapacidad de lectura en el mundo? ¿Cuántos clientes potenciales?

Ya sea que construya sitios en Joomla, Drupal, WordPress, HTML puro o cualquier otra plataforma, espero haberlo convencido de que este problema vale la pena tomarlo en serio, para su negocio y sus clientes.