10 herramientas para mejorar la accesibilidad del sitio web
No hay duda de que comprende la necesidad de que su sitio web sea accesible para la mayor cantidad de usuarios posible. Pero leer todas las pautas y estándares puede ser un poco abrumador. Puede encontrar las últimas recomendaciones del W3C aquí, pero ¿necesita saber cada palabra y seguir todas las pautas?
Hoy, trataremos de hacer todo un poco más fácil con algunas herramientas y recursos para ayudarlo a mejorar la accesibilidad del sitio web (¡y tal vez incluso algunas comprobaciones para considerar que no estaban en su radar!).
Ya sea que esté buscando asegurarse de tener suficiente contraste visual, un sitio accesible para los lectores de pantalla o incluso crear correos electrónicos accesibles, ¡lo tenemos cubierto!
1. Color seguro
Color Safe lo ayuda a verificar (e incluso crear) paletas de colores accesibles según las Directrices WCAG para el contraste de color de texto y fondo. La herramienta y los estándares utilizan una fórmula basada en la proporción para determinar las combinaciones de colores que todos pueden leer.
Las pautas de WCAG recomiendan una relación de contraste de 4.5 para texto pequeño (cuerpo) y 3 para texto grande (más de 24 puntos).
Simplemente ingrese sus colores, basados en el código HEX, la elección de fuente y tamaño y genere una paleta. Obtiene una proporción inmediata para comparar y puede ver otros colores similares. Verifique si algo similar podría ser una mejor opción según su tipo de letra y tamaño.
2. Sin café
NoCoffee es una extensión del navegador Google Chrome que le ayuda a visualizar su diseño de la misma manera que alguien con discapacidad visual podría verlo. (Nada destaca la importancia de la accesibilidad como verlo de esta manera).
Puede verificar y mostrar lo siguiente:
- Baja agudeza con texto pequeño o objetivos de clic
- Problemas de bajo contraste con elementos de texto y fondo
- Daltonismo
- Nieve visual, deslumbramiento, efecto fantasma y cataratas
- Nistagmo, que es un movimiento involuntario rápido de los ojos.
- Campos visuales obstruidos
3. Verificador de contraste
Contraste Checker le permite ingresar colores de fondo y primer plano en la pantalla y obtener comprobaciones inmediatas contra varios estándares visuales con un pase instantáneo, codificado por color.
Las características agradables de la herramienta incluyen la capacidad de alternar entre las opciones de color y escala de grises, compartir muestras de sus cheques y extraer colores de las imágenes. También puede guardar una muestra en PDF. Es una herramienta fácil con muchas funciones que cualquiera puede usar rápidamente.
También proporciona la relación de color, como se describe en las Directrices WCAG.
4. Tota11y
Tota11y es un archivo JavaScript que coloca un pequeño botón en la esquina inferior de los documentos. Se expande con una barra de herramientas que incluye múltiples complementos para diferentes comprobaciones de accesibilidad.
- Encabezados y violaciones de orden de encabezado
- Contraste (o falta del mismo)
- Enlace de texto que falta o es confuso
- Etiquetas que faltan en las entradas
- Imágenes sin texto alternativo
- Las etiquetas son hitos de ARIA
- El lector de pantalla "vara" para que pueda "leer" el sitio como lo haría un lector de pantalla
5. ONDA
WAVE, o herramienta de evaluación de accesibilidad web, es una colección robusta de cheques en un solo lugar.
La herramienta utiliza una superposición visual de iconos que se relacionan con la información en la barra lateral para proporcionar detalles sobre todo, desde contraste de color hasta títulos redundantes, enlaces a HTML y elementos estructurales.
El verificador gratuito le brinda casi todo lo que necesita saber sobre una sola página, pero WAVE también incluye herramientas pagas de nivel empresarial para propietarios de sitios múltiples o usuarios que desean tener más de una página a la vez. También incluye extensiones de navegador Chrome y Firefox que pueden verificar páginas web sensibles, generadas dinámicamente o intranet en un entorno privado.
6. 508 Checker
El 508 Checker prueba las URL para determinar si un sitio web cumple con las pautas para el cumplimiento 508 de los Estados Unidos, que es requerido por ley para cualquier organización que reciba fondos federales.
Si bien esta herramienta es gratuita, debe registrarse para ver los resultados completos del análisis.
El sitio también incluye otras herramientas y recursos, incluido un cuestionario para ayudar a las organizaciones a determinar si están sujetas a 508 Cumplimiento y recursos específicos para educación superior, organizaciones sin fines de lucro y organismos gubernamentales.
7. HTML_CodeSniffer
HTML_CodeSniffer es un script del lado del cliente que verifica el código fuente y busca violaciones de los estándares definidos. Comprueba las Pautas de Accesibilidad al Contenido en la Web 2.0 y la Sección 508 de EE. UU.
Pegue el código directamente en el sitio web para un cheque o use el bookmarklet.
Es fácil de usar y puede elegir qué tipo de información mostrar: errores, advertencias o avisos y ver un informe que detalla cualquier inquietud del cheque.
8. Correo electrónico accesible
Accessible Email es un corrector en línea y editor de HTML que lo ayudará a mejorar el código de un boletín electrónico antes de enviarlo. (También puede consultar campañas pasadas / enviadas también).
Con tanta comunicación digital y generación de leads provenientes del correo electrónico, no debería ser uno de los elementos olvidados del sitio web en términos de accesibilidad, pero a menudo lo es. Las mismas reglas de accesibilidad en la web también se aplican a los envíos por correo electrónico.
La herramienta es de uso gratuito y está diseñada para promover la accesibilidad y la usabilidad del marketing por correo electrónico.
9. Amara
Amara es una herramienta para crear subtítulos y subtítulos para video.
Proporcionar una forma de conectarse sin sonido o en otro idioma puede abrir sus elementos de diseño a más personas, especialmente si el video es un elemento clave del diseño.
Esta herramienta incluye opciones gratuitas y empresariales que facilitan poner el idioma en la pantalla en un formato legible que funcione en sitios web y plataformas de transmisión de video como YouTube.
10. MobiReady
MobiReady proporciona una prueba de accesibilidad móvil en un formato visual y con un informe de resultados para que pueda ver dónde su sitio web puede fallar en los dispositivos más pequeños.
Puede comparar su sitio con el Alexa 1000, un ranking de los mejores sitios web del mundo; obtenga resultados técnicos detallados con recomendaciones y vea representaciones de su sitio web en diferentes pantallas, incluidos dispositivos de nivel alto, medio y bajo.
Una de las mejores partes de esta prueba es que se califica en docenas de áreas y hay sugerencias para mejorar con cualquier "falla".
Conclusión
Cuando se trata de la accesibilidad del sitio web, es importante tener en cuenta la usabilidad y la legibilidad para todo tipo de usuarios. Piense en el color, el tamaño y la ubicación de los elementos, los subtítulos y los subtítulos, el HTML y la estructura adecuados e incluso el correo electrónico para brindar la mejor experiencia posible a la mayor cantidad de personas posible.
También es importante verificar las reglas de cumplimiento regionales o nacionales que podrían aplicarse a sus proyectos, como los estándares de cumplimiento 508 mencionados anteriormente.
Y cuando se duda, es mejor errar por el lado de la accesibilidad. Está bien ajustar un color de una paleta o aumentar el tamaño de fuente para que más personas puedan entender lo que está en la pantalla con facilidad.
