Accesibilidad WordPress: Cómo mejorarla en tu web

Es muy bonito dejarse llevar por todos los fuegos artificiales que ofrecen las posibilidades de crear una web WordPress, ⁣ y es verdad que nunca se suele indagar un poco más y pensar en que una web debería de ser accesible a cuantas más personas mejor.

Durante todo este mes, contrata tu plan de hosting al -70% de descuento.

Llévatelo

No soy ningún experto en lo que a accesibilidad WordPress 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 mí.

El artículo está enfocado desde varios ángulos, 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:

1. Qué es la accesibilidad.
2. Por qué es importante la accesibilidad en WordPress.
3. Cómo aplicar accesibilidad en WordPress.
4. Herramientas de accesibilidad para WordPress.

  Qué es la accesibilidad web

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 lo que se refiere 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, sino 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 móvil 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 (solo 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!).

Y esto me lleva a explicarte…

  Por qué es importante la accesibilidad en WordPress

Sé que el tema de la accesibilidad WordPress ya no es nuevo, aunque muchos usuarios finales todavía lo desconocen o lo ignoran y eso les afecta luego a cómo otros visualizan y perciben sus webs. No obstante, 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 comentaré 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 motores de búsqueda en Internet (o sea, Google), se comportan como un usuario ciego: rastrean tu web, no ven las imágenes, y solo 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, son las etiquetas alt de las imágenes (las descripciones de las imágenes) y sus títulos (lo verás 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.

  Web accesible ¡por Ley!

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

Llego 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, sino que mejoras el SEO con ello.

  Pon el contenido relevante e importante al principio

Esto es un simple pilar básico de UX (experiencia de usuario), 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 incrustas 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 de pedirle ayuda para que utilice tu web, que navegue por ella y te aporte feedback sobre cómo se siente cuando navega por los contenidos de la misma y qué elementos le causan mayor dificultad en el proceso.

Seguro que te llevas una sorpresa de lo agradecidos que pueden llegar a ser cuando les solucionas algo como simplemente ver una web.

  No desactives el zoom en la versión móvil de la web

Aquí repito lo que he mencionado en la sección previa. No elimines 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 de 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 hacer clic en ellos el tamaño de la letra será mayor o menor.

Lectura recomendada:
Cómo cambiar el tamaño de la letra en WordPress.

  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 autogenerados, ya que dan más lugar a error que a buen entendimiento del usuario.

Hay plugins que pueden ayudarte a añadir subtítulos en vídeos para YouTube fácilmente.

  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 solo 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 uses 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, mayúsculas, 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.

  Usa 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.

  Utiliza correctamente el marckup h1, h2, etc.

Aquí es importante hacer uso de las etiquetas h1, h2, h3, p, etcétera, 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 intuitiva.

En esta web, en inglés, encontrarás también un checklist de todo lo que necesitas para tener una web accesible.

  Plugin de accesibilidad para WordPress

Si buscas en Google Plugins accesibilidad WordPress vas a encontrar varios y muy buenos.

Aquí te dejo una lista de varios que puedes analizar para ver si alguno encaja en tu web y con su uso haces que tu web sea un poco más accesible.

• WP Accessibility: Ver el plugin – Resuelve con este plugin problemas comunes de accesibilidad que ocurren en los temas de WordPress.




• One Click Accessibility: Ver el plugin – Redimensiona fuentes, gestiona escalas de grises, contraste, subrayado de enlaces, etc.




• Accessibility by UserWay: Ver el plugin – Aumenta el cumplimiento de los requisitos WCAG 2.1, ATAG 2.0, European EN 301 549, ADA y Section 508.




• Enable Accessibility: Ver el plugin – Tamaño de fuentes, navegación por teclado, enlaces destacados, etc.




• Equalize Digital Accessibility Checker: Ver el plugin – Más de 40 comprobaciones de accesibilidad para cumplir los criterios de las Pautas de Accesibilidad al Contenido en la Web (WCAG) 2.1




• Accessibility: Ver el plugin – Tamaño de fuentes, navegación por teclado, detener animaciones, etc.




• Accesibilidad Web por accessiBe: Ver el plugin – Gestión de etiquetas «alt», Atributos ARIA, iconos y botones, formularios y validaciones, etc.




• Screen Reader Accessibility: Ver el plugin – Añadir funcionalidades a la web para cumplir los requisitos WCAG.

  Conclusiones

Y esto ha sido todo, al menos para mí, ahora te toca a ti ponerte manos a la obra y aportar un poco más de usabilidad a tu sitio web, porque hay miles o millones de personas que tienen algún problema de visión, o auditivo, a quienes también les gusta navegar por Internet y consultar contenidos útiles, sociales o para su aprendizaje.

La accesibilidad web en WordPress es un aspecto importante que se refiere a la capacidad de un sitio web para ser utilizado de manera efectiva por una amplia variedad de personas, incluyendo aquellas con discapacidades o limitaciones de aprendizaje.

Esto implica que el sitio web debe ser fácilmente navegable y comprensible para todos, independientemente de sus habilidades técnicas o físicas.

Esta se logra a través de la implementación de buenas prácticas de diseño y desarrollo, como la optimización de la navegación, la inclusión de descripciones de audio para imágenes, la compatibilidad con tecnologías de asistencia y la eliminación de barreras técnicas que puedan impedir a los usuarios acceder a la información en el sitio web.

Con la accesibilidad web en WordPress debes tratar de garantizar que todos los usuarios puedan tener acceso y disfrutar de una experiencia en línea sin obstáculos.

También te puede interesar:

• Experiencia de Usuario, ¿cómo aplicar la UX en WordPress?
• 7 claves para aprobar en experiencia de usuario
• Cómo mejorar la accesibilidad en tiendas online WooCommerce