Accesibilidad en WordPress, por Iñaki Martín Sanz

A continuación encontraréis un artículo sobre accesibilidad web escrito por Iñaki Martín Sanz. 

Iñaki es un apasionado de la informática y ha colaborado en un gran número de eventos de la comunidad WordPress. Debido a su discapacidad visual, se ha encontrado con un gran número de barreras. Pero nada ha impedido que este joven vallisoletano se haya formado en marketing, podcasts, edición de sonido, Apache, diseño web, HTML, CSS y JavaScript, especializándose en WordPress y Accesibilidad Web. Además escribe frecuentemente en su blog megustamundomac.

Espero que aprendáis tanto como lo he hecho yo con este pedazo de artículo, gracias Iñaki.

Qué es la accesibilidad web

La accesibilidad web consiste en facilitar el uso de la web para el mayor número de personas posibles sean cuales sean sus conocimientos o capacidades.

También os dejo un enlace por si queréis saber algo más: Accesibilidad web – Wikipedia

Compromisos entre WordPress y la accesibilidad web

WordPress tiene como fín que la web sea accesible, y para ello cuenta con los siguientes elementos:

1. Existe un buen número de temas accesibles en WordPress, así que ya podemos eliminar el tema que tengamos e instalar alguno de estos. Podemos encontrarlos buscando la etiqueta accesibility ready en el sitio de temas de WordPress, el enlace es el siguiente:
   Temas que son accesibles – WordPress España
2. También, existen plugins que son accesibles, y pueden hacer que tu web sea más accesible:
   Plugins de accesibilidad – WordPress España
3. WordPress cuenta con un equipo de accesibilidad en la comunidad de España. El enlace es el siguiente:
   Equipo de accesibilidad – WordPress España

Si quieres tener más información sobre cómo se mejora la accesibilidad en el proyecto de WordPress tanto en español como en inglés puedes pulsar en el siguiente enlace:
Acerca de la Accesibilidad en WordPress – WordPress España

Por qué es tan importante la accesibilidad web

1. Mejoras tu posicionamiento en los buscadores
2. Si tu web es accesible, puede ser usada por un mayor número de personas
3. Tu web, al ser accesible, se diferencia del resto de webs que no lo son, así puedes diferenciando así tu marca
4. Tu web es mejor y más amigable, para los productos de apoyo, ayudas técnicas, como lectores de pantallas, también, apuntadores o joysticks, para las personas con movilidad reducida.
5. Tu web puede ser usada por un mayor número de personas, las personas mayores, las personas que usan otro idioma,o las personas que usan una conexión más lenta

Cómo influye la accesibilidad web en el SEO

1. Si tu web es accesible, lo sabrán los motores de búsqueda
2. Los textos alternativos de las imágenes deben ser descriptivos y no enfocarlos en el posicionamiento de palabras clave

Cómo hacer un test de accesibilidad web

Para hacer un análisis de la accesibilidad web, se puede hacer de la siguientes maneras:

1. Herramientas automáticas: Usando las herramientas automáticas para analizar la accesibilidad de la web, pero nunca se puede analizar todos los puntos de las pautas del contenido de la web (WCAG). Debemos siempre hacer una revisión manual del sitio web.
2. Análisis manual: Este análisis debe ser realizado por un consultor de accesibilidad web, o una persona usuaria de un producto de apoyo como un lector de pantallas, un apuntador, o una persona con movilidad reducida, o una persona con discapacidad auditiva o discapacidad intelectual

Herramientas para evaluar la accesibilidad web:

Existen algunos plugins en WordPress para mejorar la accesibilidad web y hacer tests de accesibilidad web, pero yo prefiero hacer test de accesibilidad web, a través de herramientas de páginas webs, como wave, o tenon.io, encontraréis los enlaces más abajo.

Y luego también, existen herramientas, que son extensiones para el navegador, para analizar la accesibilidad web, de tu sitio web.

Y existen también plugins para tu sitio web con WordPress, pero en mi opinión, es mejor analizar tu sitio web fuera de WordPress, sin usar plugins

Herramientas automáticas para analizar la accesibilidad web dentro de WordPress:

Existen algunos plugins para analizar la accesibilidad de tu sitio web con WordPress. Algunos de ellos son los siguientes:

1. Plugin WP Accesibility Tools & missing alt images: Este es un plugin, que está en inglés, y te revisa varios aspectos de accesibilidad de tu sitio web con WordPress.
2. Plugin WA11Y – The web accessibility toolbox: Este es otro plugin que está en español y tiene varias herramientas. Una que me gusta y que viene de serie es la herramienta wave, que permite analizar la accesibilidad web de tu sitio web con WordPress.
3. Plugin Content author accessibility review: Este plugin, está en español y también, te deja analizar distintos puntos de las pautas del contenido en la web, las WCAG, y te puede analizar tu sitio web dentro de la administración de tu sitio web con WordPress.
4. Plugin Enable Accessibility – WordPress España: Este plugin está en español,y tiene 2 partes, una parte de pago y otra parte gratuita. La parte gratuita solo te deja comprobar el texto alternativo de los medios que tengas subidos en tu sitio web con WordPress, y la parte de pago te permite hacer varias cosas más, como tener una barra de herramientas de accesibilidad y alguna otra cosa más.

Nota: estos son solo algunos plugins, los que yo recomiendo de los plugins que he probado sobre accesibilidad web con WordPress.

Herramientas para analizar la accesibilidad web fuera de WordPress:

Existen algunas herramientas que puedes usar para analizar la accesibilidad web de forma automática y fuera de WordPress. Personalmente lo que recomiendo es lo siguiente:

1. Web llamada wave, el enlace es el siguiente: Wave
2. También existe una extensión para navegadores Google Chrome que se llama axe. Me gusta mucho cómo hace los análisis de accesibilidad, el enlace es el siguiente: Extensión axe para google chrome
3. Existe otra web llamada tenon.io, el enlace es el siguiente: Tenon.io
4. Otra herramienta a tener en cuenta que permite un análisis del contraste del color es la siguiente: Contrast checcker

Herramientas para el análisis de la accesibilidad web de forma manual:

Para hacer un análisis manual de accesibilidad web debemos contar con distintos perfiles de usuarios con discapacidad, del tipo de discapacidad que sea, también con personas mayores y con otro idioma. Se hacen distintos tests de usuarios para ver el análisis de la accesibilidad web.

También se puede analizar la accesibilidad web de forma manual a través de un producto de apoyo, por ejemplo un lector de pantallas, o también, un magnificador de pantallas, o un apuntador o un Joystick, para las personas con discapacidad física.

Uno de los lectores de pantallas más utilizados para hacer análisis de accesibilidad de forma manual, que además es gratuito, se llama NVDA, y el enlace es el siguiente:
Descarga de NVDA – NVaccess

Errores comunes de accesibilidad web

1. Una estructura incorrecta de encabezados: Hay que usar un orden correcto de encabezados, es decir, empezando por el encabezado h1 al h6 de forma progresiva.
2. No poner buenos textos alternativos, no usar el texto alternativo jjjj.jpg ni asdf.jpg. Es muy importante usar un texto descriptivo al poner un texto alternativo.
3. Usar en los enlaces, el texto de pincha aquí, más información, o leer más. Es importante que se dé más contexto en los enlaces. Por ejemplo, más información y el nombre del artículo, o solo el nombre del artículo.
4. No solo usar el color para dar información sobre un botón. Es decir, facilitar contexto en los botones del tipo pulsa en este botón para cancelar, de esta manera, la información ya sería accesible, porque no estamos dando la información solo por el el color.
5. Hay que tener un buen contraste del color entre el fondo y el texto.
6. Los captchas de imagen no son accesibles para personas con discapacidad visual. Por esto es siempre mejor colocar variedad de posibilidades de captchas, como captchas de imagen, texto y de audio.
7. Cuando se inserta un iframe en una web, como un mapa de Google Maps, o un vídeo de youtube, o un documento de google, es bueno siempre poner un título mediante la etiqueta HTML title, para las personas con un producto de apoyo, un lector de pantallas, para que se sepa lo que aparece en dicha web.
8. Es bueno poner un tema de tabindex para que el propio foco del lector de pantallas y el tabulador puedan tabular por dicha página web.
9. Es bueno subrayar los enlaces, y poner un color diferente, como de color azul en los enlaces, para que las personas que tengan discapacidad visual, y en este caso baja visión, puedan saber que es un enlace.
10. Es bueno que marques el idioma de tu documento para que el lector de pantallas no diga unas cosas en inglés y otras cosas en español. Esto lo puedes hacer con la etiqueta html lang, en tu documento en html.
11. En los formularios debes poner la etiqueta label al lado de cada campo, con la etiqueta for para referenciar a cada campo del formulario.
    1. Si cuentas con muchos campos en un formulario, agrupar los campos con la etiqueta fieldset de HTML, para que se lean mejor los campos del formulario.
    2. La etiqueta legend también es importante al añadir fieldset, así cada grupo del formulario tendría una etiqueta descriptiva para saber qué contiene.
12. Al introducir tablas en tu web es bueno que pongas una etiqueta llamada caption, para poner un título a tu tabla, en html.
    1. Es bueno que pongas etiquetas th para poner encabezados en tu tabla, en html.
    2. El uso de la etiqueta summary en las tablas, para poner un resúmen solía ser una buena práctica. Aunque está desaconsejado desde html5, y es mejor usar la etiqueta aria–describedby con un id, en la etiqueta p de un párrafo. Este es el nuevo formato de poner un resúmen, en las tablas, en html.
13. Es importante poner un único título en cada página de tu web. Es decir, no poner distintos títulos es mejor poner por ejemplo inicio – web de pruebas, y luego acerca de – web de pruebas. Es decir, usar un título único en toda la web, así estaremos indicando a los productos de apoyo el título a la página que va a ir en todo momento.
14. Poner un enlace de saltar al contenido y otro de saltar al menú principal. Así, la persona que usa un producto de apoyo no tiene que leer toda la página web entera, si no que puede saltar a un punto concreto de la página gracias a los enlaces de saltar al contenido.
15. Aunque a nivel SEO no sea lo más óptimo, desde el punto de vista de la accesibilidad está genial avisar en el texto del enlace a  que dicho enlace se va a abrir en una nueva ventana. Así. un usuario de un producto de apoyo, tendrá conocimiento de esto..
16. Es bueno siempre poner unas migas de pan, sirven para conocer dónde se encuentra el usuario en todo momento.
17. Si incluyes una imagen que tiene un texto dentro, no sería accesible. La mejor opción para que sea accesible dicha imagen con texto, es poner un texto alternativo que ponga cartel y el texto que aparece en el cartel.
18. Si incluyes vídeos es bueno poner subtítulos para las personas con discapacidad auditiva o que están en una biblioteca y no pueden escuchar el audio del vídeo. También es bueno incluir una transcripción del audio, y también usar la audiodescripción en los vídeos, que es una voz en off que va diciendo lo que aparece en la película cuando no hay diálogos o hay música. Aunque esto es mucho más complicado, también debemos tener en cuenta un tema de lengua de signos para las personas sordas o personas con discapacidad auditiva.
19. Para las personas que tienen discapacidad intelectual es importante añadir pictogramas.
20. Es bueno agrupar la información correctamente. Es mejor poner el texto como una lista de elementos,que tener párrafos muy extensos. Así es más comprensible la información, para todos/as los/as usuarios/as, y también, para las personas que tienen discapacidad intelectual.
21. Es bueno poner la información de la forma más sencilla posible para las personas con discapacidad intelectual, y para todo tipo de personas.
22. Es bueno poner el texto alineado a la izquierda, y no justificado, para todas las personas, y también para las personas con discapacidad intelectual, y que tengan dificultades de lectura.
23. Poner una tabla de contenidos, o un índice, es de gran ayuda para facilitar la lectura de un artículo muy largo, para todas las personas, y también para las personas que tienen discapacidad intelectual o también para las personas que tengan dificultades de lectura.
24. Es importante estructurar tu página de forma semántica, con las nuevas etiquetas de html5, como nav para poner un menú, footer, header, aside, y así tienes una web más semántica, y mejor estructurada.
25. Es bueno poner textos alternativos más largos, y si lo requiere tu sitio web, usar la etiqueta HTML longdesc.
26. Es bueno usar unidades relativas en css, como em y rem, y no usar medidas absolutas en px.
27. Es bueno usar las nuevas etiquetas aria para dar más semántica y hacer la web más accesible.
28. El uso de modales o Sliders no es accesible. Si tienes que usar las ventanas modales, es bueno que sigas al foco del lector de pantallas con la etiqueta tabindex. Si debes poner un slider, es bueno que pongas un texto alternativo a cada imágen que pongas en el slider, y también es bueno que pongas botones de reproducir y parar el slider, lo que hará que el slider sea más accesible.
29. El uso de la etiqueta display none en css tampoco se va a mostrar para el producto de apoyo (el lector de pantallas). Es mejor poner la propiedad de position: absolute, con 0 píxeles, así se ocultará la información fuera de la pantalla, pero seguirá siendo accesible para los productos de apoyo.
30. No deshabilites el foco del teclado por css quitando la etiqueta outline o focus, porque es bueno para las personas que usan el teclado para navegar por tu web, o para las personas que usan un producto de apoyo como un lector de pantallas.
31. También es bueno que, cuando pongas un vídeo, no pongas que se reproduzca el vídeo automáticamente. Es mejor que el propio usuario pueda dar al botón de reproducir dicho vídeo de forma manual.

Estándares de la accesibilidad web

1. Existen los estándares, de las pautas al contenido en la web las WCAG, en estos momentos, están en la versión 2.1, y el enlace para consultarlas es el siguiente: WCAG 2.1 en la web dell w3c (En inglés)
2. También existen las pautas al contenido para usuarios/as llamadas UAG, y están en la versión 2.0, y el enlace es el siguiente: UAG 2.0 w3c (En inglés(
3. Existen las pautas al contenido para  autores/as ATAG, y están en la versión 2.0, y el enlace es el siguiente: ATAG W3C (En inglés)
4. Y también, existe la norma europea del Real Decreto del año 2018, en español, y el enlace es el siguiente: Real Decreto del año 2018 – Web del BoE

Etiquetas HTML para mejorar la accesibilidad

• Etiqueta alt, para tener un texto alternativo en las imágenes
• Etiqueta longdesc de imagen, para poner un enlace html en el que se describe la imágen de una forma mucho más extensa.
• Etiquetas de fieldset, label for, con id, y la etiqueta legend, para formularios.
• Etiquetas de caption, summary, que ahora es la etiqueta de aria–describedby con id, con la etiqueta p de html.
• Etiquetas th y td, scope y headers para tablas.
• Etiqueta title en los iframes en html.
• Etiqueta html lang, para poner el idioma correcto en html.
• Etiqueta title, para poner un título distinto en cada página de tu sitio web.
• Etiquetas para dar más semántica a tu sitio web: nav, main, aside, sidebar, footer, y header.
• Usar la etiqueta tabindex, para el tabulador, el foco del teclado en html.
• Usar las nuevas etiquetas de aria, con sus roles, con roll=”button”, o también, usar las etiquetas de aria-label, y las demás etiquetas de aria en html.

Consideraciones CSS para mejorar la accesibilidad

• Poner en CSS las etiquetas del tamaño en rem y em o porcentajes, en lugar de px para mejorar la accesibilidad.
• No quitar outline o focus.
• Usar position absolute y 0 px, para el tema de no ocultar la información para los productos de apoyo, y no es bueno usar la etiqueta display none, en las css.

La accesibilidad y la IA:

En la accesibilidad web y la IA hay nuevos caminos que se forjan. Todavía queda tiempo para saber cómo avanzarán ambos caminos, pero poco a poco lo iremos viendo en estos años.

Conclusiones:

En este mundo que corre, la accesibilidad web ha mejorado bastante, tanto en WordPress como en el mundo web, en general. Pero todavía queda bastante que mejorar, y yo creo que poco a poco se van consiguiendo nuevos logros. Espero que gracias a todos/as podamos conseguir un mundo mejor y todas o casi todas las webs más accesibles. Y muchas gracias a WebHeroe por dejarme hacerme un hueco en su blog para tratar este tema, que aún a día de hoy, está un poco olvidado en nuestras vidas y en la sociedad.

Un saludo, de iñaki.