Muy buenas y gracias de antemano por tomarte el tiempo de leer este artículo. La verdad es que este artículo es un tanto especial para mi, porque es uno de los temas que siempre he ido posponiendo, y al que nunca le he prestado demasiada atención.
Es muy bonito dejarse llevar por todos los fuegos artificiales que ofrecen las posibilidades de crear una web WordPress, y es verdad que nunca solemos indagar un poco más y pensar en que una web debería de ser accesible a cuantas más personas mejor.
No soy ningún experto en lo que a accesibilidad para la web se refiere, y es un tema muy extenso, lleno de matices y de buenas prácticas para la misma, por ello desde hace tiempo quería redactar este artículo, porque a la vez que te va a servir a ti, me va a servir de mucho a mi.
Me he ido preparando el artículo desde varios ángulos y he ido variando y comparando fuentes nacionales e internacionales para poder ofrecerte aquí un contenido muy específico y útil, para que, al menos, termines de leer y tengas una idea de lo importante que es tener una web accesible.
He optado por separar este artículo en cuatro secciones:
- Qué es la accesibilidad.
- Por qué es importante la accesibilidad en WordPress.
- Cómo aplicar accesibilidad en WordPress.
- Herramientas de accesibilidad para WordPress.
Qué es la accesibilidad
Dicho en términos bastante generales, lo que persigue la accesibilidad es hacer que una web sea utilizable y visible al mayor número de personas posible, independientemente de sus conocimientos o capacidades personales y de las características técnicas del medio por el que vean la web (móvil, tablet, ordenador).
La mayoría de sitios web que son accesibles, se concentran sobretodo en las personas con dificultades visuales (más del 80% de los casos).
Solo te voy a dar un dato: según el estudio Olivenza 2010, en España hay alrededor de 1.000.000 de personas con algún tipo de discapacidad en la visión (datos 2008 y 2009).
A mi modo de ver (o al menos así lo he percibido yo), el hecho de que alguien necesite visitar una web accesible, no significa que ese alguien siempre sea discapacitado tal y como nos lo solemos imaginar.
Aunque considero muy importante e interesante el tema de la discapacidad y de su adaptación social, mi objetivo con este artículo se centra más en cómo nuestra web hecha con WordPress puede ayudar a casi cualquier persona a un fin concreto.
Estos son los tipos de dificultades en relación a cómo experimentar una web:
- Ceguera (más del 80% de los visitantes con accesibilidad pertenecen a este grupo).
- Visión reducida .
- Problemas de color (Son las personas que no pueden apreciar los colores como lo hacen la mayoría de las personas. Por ejemplo, yo tengo un amigo que no puede ver las diferentes tonalidades de azul y rojo, y lo ve todo de otro color).
- Dificultades auditivas.
- Dificultades cognitivas.
- Dificultades de movilidad / dificultades motrices.
Como acabas de ver, es el primer grupo el que, dentro de lo que es la accesibilidad para WordPress, te vas a centrar, ya que es el que más visitas te va a reportar en este sentido.
Por ejemplo: imagina que eres sordo-ciego, pero no completamente, si no que necesitas acercarte mucho a un texto con una lupa para poder leerlo. ¿Cómo te enteras de las noticias de la tele, radio, prensa?
Hoy en día, al estar acostumbrados a las tecnologías, tendemos a pensar directamente en la web, haciendo zoom con los dedos (desde movil o tablet) o hacer zoom con el "Ctrl +" del teclado.
Pero lo que quizás no sabes es que más webs de las que puedas imaginar tienen desactivadas la opción de hacer zoom (sólo es un ejemplo), o aunque sí que tenga dicha opción activada, no todo el mundo sabe cómo se hace más grande.
Imagina si eres la persona que necesita ver la pantalla con las letras grandes... la gran decepción que te llevarías al visitar la web y no saber cómo funciona.
Es por ello que, como ya he dicho, el hacer tu web con WordPress accesible, hará que llegues a más personas (y encima... ¡mejorará tu SEO!). Sigue leyendo...
Y esto me lleva a explicarte...
Por qué es importante la accesibilidad en WordPress
Sé que el tema de la Accesibilidad para WordPress es bastante nuevo y peliagudo, pero en esta sección verás las ventajas que tienen para ti y tus visitantes.
Antes de nada, comentarte que la accesibilidad web no significa una versión de tu web en solo texto, y tampoco significa una web fea y aburrida.
Lo comentaremos más abajo, pero quiero que desde ya sigas leyendo el artículo con la posibilidad de esa idea borrada de tu mente.
Además de lo útil que pueda ser el contenido de tu web para las personas que necesitan de su accesibilidad, a través de los principales elementos que tienes que tener en cuenta para hacer tu web accesible, vas a ver que una web accesible:
Va a mejorar tu posicionamiento web (SEO)
Ten en cuenta que los buscadores de Internet (o sea, Google), se comportan como un usuario ciego: rastrean tu web, no ven las imágenes, y sólo van saltando de link en link para ver de lo que hablas.
Una de las partes que más mejoran en este sentido, y que tienes que tener muy presente, es el alt de las imágenes (las descripciones de las imágenes) y sus títulos (lo vemos más abajo).
Va a mejorar la experiencia de usuario
Ofrecer un contenido accesible, usando un vocabulario fácil de entender, fácil de seguir, con una buena disposición de cara al usuario, botones grandes y con posibilidad de hacer zoom, va a hacer que los visitantes que requieran accesibilidad salgan enamoradísimos de su experiencia en tu web, y empiecen a hablar bien de ti a sus amigos, por lo que...
Van a aumentar tus visitas
Consecuencia de los dos anteriores, es el aumento de las visitas en tu web. Al estar más posicionado en Google, y al adquirir visitas por popularidad, aumentarás las conversiones de tu web, o simplemente tendrás más posibilidades de conseguir el objetivo que te hayas marcado.
Si tu web pertenece al ámbito público, es obligatorio (por ley) tener una web accesible (o te pueden multar)
Tampoco soy experto en el tema de las multas a webs (ni lo quiero ser), pero sé que si tu web pertenece a cualquier tipo de organismo público, al menos en España es obligatorio por ley que tu web sea accesible, y está penado con multas hasta 1.000.000 de euros.
Cómo aplicar accesibilidad a tu web de WordPress
Llegamos por fin al punto importante del artículo en sí. Aquí es en donde sabrás qué tienes que cambiar en tu web (o más bien añadir o no añadir) para que se considere una web accesible:
Usa alt en imágenes
Es uno de los pilares básicos de una buena accesibilidad para tu web de WordPress.
Rellenando todas las etiquetas "alt", dando descripción a la imagen, un buen título, etc, podrás hacer que los sistemas de lectura en voz alta de web puedan leer lo que hay en la imagen.
De esta manera, no solo ayudas a tu visitante con problemas de visión a saber que ahí hay una imagen y en qué consiste su contenido, si no que mejoras el SEO con ello.
Pon el contenido relevante e importante al principio
Esto es un simple pilar básico de UX, que se aplica también a la accesibilidad.
La gente está muy ocupada como para que la información importante aparezca en segundo plano. Pon lo que más te interese al principio.
Intenta no usar iFrames
Al igual que la arañitas de Google no ven qué hay en un iFrame (lo que embebes en tu web), los sistemas de lectura en voz alta de webs tampoco lo ven.
Intenta usar cuantos menos iFrames mejor.
Haz tests con usuarios reales
Si conoces a alguien con discapacidades visuales o de cualquier otro tipo, no tengas miedo a usarlo/a como conejillo de indias.
Seguro que te llevas una sorpresa de lo agradecidos que pueden llegar a ser cuando les solucionas algo como simplemente ver una web.
No quites el zoom en la versión móvil de la web
Aquí repito lo que he mencionado en la sección previa. No quites la posibilidad de hacer más grande el tamaño de la letra de tu web.
Algunas personas necesitan hacer grande la letra hasta niveles insospechados. Tú mismo/a te darás cuenta que cuanto más mayor te haces, más cómodo te resulta hacer un poquito más grande el tamaño de la letra cuando lees en Internet... ¿verdad?
Puedes incluso incluir dos botones de "A-/A+" para indicar que al pinchar en ellos el tamaño de la letra será mayor o menor.
Accesibilidad no significa diseño feo y aburrido
Si para cortarte el pelo sueles ir a un peluquero, para hacer una web con un bonito diseño es mejor acudir a un diseñador web.
No caigas en el tópico de que las webs accesibles son siempre feas, viejas, austeras y aburridas.
Hay webs muy bien conseguidas y perfectamente accesibles. Las webs de Couchsurfing y del gobierno de Estados Unidos son buen ejemplo de ello.
Usa vídeos con subtítulos
Este apartado es el más obvio de todos, y el que más te sonará. Es la parte accesible a la que más acostumbrados estamos.
Si usas vídeos en tu web, intenta que estén subtitulados, y mucho ojo con los subtítulos auto-generados, ya que dan más lugar a error que a buen entendimiento del usuario.
Utiliza un lenguaje fácil de entender
A no ser que tengas una web dirigida a un público muy técnico, lo ideal es tener (y no sólo para accesibilidad) una web cuyo contenido está escrito de una manera fácil, bien ordenada y visible.
No vuelvas loco al visitante con muchas secciones, muchas opciones, muchos posibles clics....
El visitante no quiere pensar, quiere que le digas qué hacer en la web, y encima quiere que le hables en un lenguaje sencillo y fácil de comprender (me reitero en lo de no hacerles pensar).
Por ejemplo, en lugar de decir "Mira lo que hacemos por ti y los tuyos", podrías escribir "Pincha aquí para ver nuestros servicios".
Añade suficiente contraste de color
Si el contraste de tu web es bajo, las personas con verdaderos problemas para leer textos (grandes o pequeños) no van a poder hacerlo bien.
Independientemente del uso de colores de una manera incorrecta (por ejemplo, letras rojas sobre fondo amarillo), la importancia del contraste de cara a la accesibilidad de tu web es muy relevante.
El ratio de contraste idealmente debe de ser 4.5 a 1. Con la herramienta que verás al final del artículo puedes ver el nivel de contraste de los colores de tu web.
No usar solo color para información importante
Cuando muestres una información importante, mucho ojo al hacerlo con diferentes colores, ya que tienes que tener en cuenta a las personas con problemas cromáticos de visión.
La solución y lo ideal es usar, por ejemplo, barras con estampados de rayas o de figuras, para que se sepa diferenciar bien una información de otra.
Intenta, en general, usar indicadores diferentes del color para mostrar la información importante (subrayados, mayusculas, cursivas, etc).
Añade focus indicators para que se navegue con el tabulador
Los focus indicators son las líneas que subrayan los enlaces. De esta manera se puede indicar fácilmente dónde hay un enlace a la gente que tenga problemas cromáticos de visión.
Estas líneas suelen ser no muy estéticas y puede que estés tentado a no ponerlas porque no quedan muy bien. Lo que puedes hacer es jugar con la imaginación, ponerte en el lugar de tu visitante, y mostrar un enlace de manera que se sepa que es un enlace.
Usar las etiquetas de formularios fuera del cuadro de input
Uno de los grandes errores que se hacen en UX y en accesibilidad es usar un placeholder como label en los formularios.
Me explico: un placeholder en un formulario es en donde suele indicar un ejemplo del contenido que tiene que haber en ese apartado. Por ejemplo: Pepe Martínez, si el apartado es para el nombre.
Una label es el nombre de ese campo en sí. En nuestro ejemplo, sería "Nombre".
La label siempre va fuera del campo en donde se escribe, y el placeholder va dentro de dicho campo.
Usar correctamente el marckup h1, h2, etc.
Aquí es importante hacer uso de las etiquetas h1, h2, h3, p, etc, de una manera correcta. También ayudará mucho a tu SEO, y dará orden de lectura al contenido de tu web.
Haz que la web sea navegable sin ratón
Una web debería, en la gran mayoría de los casos, ser navegable sin ratón. Haz la prueba e intenta navegar por alguna página sin ratón (mira las que pongo de ejemplo más abajo).
Si tienes problemas para hacerlo, entenderás cómo se sienten la gran mayoría de personas que necesitan una web accesible.
Herramientas de accesibilidad para WordPress
Contrast Checket: esta es una gran herramienta para ver el ratio de contraste de tu web. Está en inglés pero su uso es bastante simple e intuitivo.
Si buscas en Google "Plugins accesibilidad WordPress" vas a encontrar varios y muy buenos. Aquí te dejo el más común y utilizado (además, es gratuito): WP Accessibility.
En esta web, en inglés, encontrarás también un checklist de todo lo que necesitas para tener una web accesible.
Conclusiones
Y esto ha sido todo por mi parte. Ha sido un artículo, al menos para mi, un poco más difícil de entender que otros, pero no hay nada con lo que no podamos juntos, ¿verdad?
Espero que te haya servido de mucho, y no dudes en ponerte en contacto conmigo por las redes sociales.
¡Un abrazo y hasta el siguiente artículo!