Si quieres cumplir con accesibilidad en tu web es necesario seguir los estándares de la WCGA. Como vimos en el post «Como puede cumplir mi web los estándares de accesibilidad» al implementar estas normas conseguimos que nuestra web sea apta para usuarios con diversas capacidades. Si eres una empresa pequeña o mediana no estás obligado a cumplir las normas de la WCGA, pero nunca está de más conocerlas para que tu web llegue al máximo de público posible.
Índice de contenidos
Pautas básicas para cumplir con accesibilidad
Para cumplir con accesibilidad en tu web necesitas seguir una pautas a la hora de construir y editar tu página web. En función del nivel de adecuación que desees alcanzar (A, AA, AAA) deberás realizar más o menos acciones de mejora. A continuación, repasaremos algunas de las normas para alcanzar los dos primeros niveles. Dejaremos la AAA para post más avanzados.
Página con título para cumplir con accesibilidad
Es necesario que cada página o sección dentro de tu web tenga un título que la identifique. Este atributo, comúnmente llamado "title" es una característica muy utilizada en SEO. Nos ayuda a identificar los distintos apartados de nuestra página web en un mapa web. Y sobre todo, para identificar contenidos en los resultados de búsquedas en nuestra propia página web o en buscadores externos.
También lo podemos ver en la pestaña del navegador, así podemos identificar de forma inequívoca la página en la que queremos consultar alguna información. Hay veces que puede coincidir con el encabezado de orden 1 de tu web, pero lo más frecuente es que difiera levemente y se define en un campo específico en la mayoría de los CMS.
Encabezados y etiquetas
Es necesario que cada apartado o página de tu web, que contenga un volumen de información considerable esté estructurada sobre la base de título o encabezados. Con ello conseguimos que los usuarios puedan acceder a la información que necesitan sin necesidad de leer todo el contenido. De esta forma conseguirás que su experiencia de navegación por la página será mayor.
Para implementar esta estructura, utilizando HTML es necesario cumplir una jerarquía: H1, H2, H3, H4, H5 y H6. Cada "HX" es un encabezado y tienen un orden de mayor a menor. También se puede usar las etiquetas "ARTICLE" y "SECTION", de esta forma se pueden contener varias áreas que cumplan esa estructuración sin conflicto alguno para páginas muy amplias.
Identificar el propósito de entrada en los campos de formulario
Los formularios están formados por distintos campos: nombre, teléfono, email, etc. Si identificamos el propósito de un campo del formulario ayudamos a que personas con dificultades cognitivas puedan rellenar dicho formulario más rápidamente. En este sentido, hay tres técnicas o puntos a destacar:
- En primer lugar, el atributo autocompletar de HTML, que nos permite que el formulario se complete de forma automática con los datos almacenados en el navegador.
- Otra opción es, acompañar de iconos representativos cada uno de los campos: un icono de un teléfono, otro de un calendario para la fecha, etc.
- Y no podemos olvidar, el añadir instrucciones y etiquetas explicativas que sean visibles y descriptivas donde se especifique ese propósito.
Control del audio que se reproduce automaticamente
No debe haber ningún audio que al reproducirse de forma automática interfiera en la capacidad del usuario de utilizar tu web. Por ello si ese audio es de más de 3 segundos, es necesario disponer de una maniobra que permita detener o pausar ese sonido.
Aunque en general, el mejor consejo que puedes recibir es: mejor que no pongas ningún audio.
Redimensión del texto sin perder contexto
Este punto es de gran ayuda para que nuestros textos se adapten la visualización deseada. El objetivo de que las personas con discapacidades visuales puedan ampliar el texto hasta un 200% de su tamaño sin que pierdan funcionalidad o contenido. Sin embargo, de esta necesidad quedan excluidos imágenes y subtítulos.
Para garantizar esta característica se aplican diversas técnicas de desarrollo sobre la web para no ser necesaria la asistencia sin tecnología, como por ejemplo:
- Usar tecnología que permita el zoom.
- En segundo lugar: Especificar el tamaño de texto mediante unidades em.
- Técnicas de medidas relativas o para cambiar el tamaño de contenedores de texto.
Espaciado del texto
Es necesario que los textos incluidos en nuestra web cumplan con unos tamaños para el interlineado, espaciado de los párrafos, espaciado de las letras y el de las palabras. Este es uno de los puntos que más se suelen cumplir, porque las buenas plantillas de estilo, ya cumplen con estar proporciones:
- Interlineado: mínimo 1,5 el tamaño de la fuente.
- Espaciado párrafo: al menos 2 veces tamaño de la fuente.
- Espaciado letras: 0,12 veces como mínimo el tamaño de la fuente.
- Espacio entre letras: mínimo 0,16 el tamaño de la fuente.
Reflujo o adaptación para cumplir con accesibilidad
Todos los contenidos de tu web se podrán presentar sin necesidad de desplazarse por la pantalla o sin que se pierda información para un mínimo de 320 píxeles de ancho y 256 píxeles de alto. En este sentido, solo quedaran fuera de esta norma los contenidos que precisen de un diseño bidimensional para su significado o uso adecuado.
Contraste mínimo
Los contenidos visuales contenidos en tu web (texto e imágenes) deben tener una relación de contraste de al menos 4.5:1. Sin embargo, hay algunas excepciones: los logotipos, el texto a gran escala (ya sea en texto o imagen) o los contenidos decorativos.
Contraste sin texto
Para cumplir con accesibilidad es necesario que la presentación de tu web: objetos gráficos y los componentes que forma la interfaz presente una contraste de al menos 3:1 frente a los colores que son contiguos.
Cuidado con los destellos para cumplir con accesibilidad
Los contenidos incluidos en tu web no pueden parpadear más de tres veces por segundo. Y el destello debe estar siempre por debajo del flash general y rojo.
Conclusión: Cumplir con accesibilidad es fácil, solo tienes que conocer las normas
Si tienes en cuenta estos puntos y algunos más podrás cumplir con accesibilidad en tu página web. Recuerda la importancia de los contrastes y de una página bien estructurada. También de como debes omitir elementos molestos, como los destello o los audios que se reproducen automáticamente. Y del mismo modo no puedes pasar por alto la adaptación correcta de textos y contenidos al hacer zoom o consultar desde un dispositivo móvil. Si tienes más curiosidad puedes consultar: W3C.
Pero seguro que te estarás preguntando: ¿Y cómo verifico yo todo esto? Parece un poco tedioso y complejo, ¿no? Siempre puedes recurrir a un equipo de profesionales que te ayuden. Pero además, por suerte existen muchas herramientas que te ayudas a revisar accesibilidad. ¿Te gustaría que hablara de ello en otro post? Déjame un comentario en caso afirmativo o suscríbete al blog y estarás al tanto de todas las novedades.
