Consejos de prueba de accesibilidad de bricolaje para WordPress

En el mundo de hoy, el nombre del juego es inclusión. Y aunque la accesibilidad web no es un concepto nuevo, en los últimos años la accesibilidad web se ha vuelto más accesible en sí misma.

En esencia, la accesibilidad web es la práctica de diseñar y construir un sitio web para que sea funcional para la mayor cantidad de usuarios posible. Los usuarios ciegos interactuarán con un sitio web de manera diferente a los usuarios videntes, daltónicos o con discapacidad motora.

Lanzada originalmente como versión 2.0 en 2008 y desarrollada por el Consorcio World Wide Web (W3C), las Pautas de Accesibilidad al Contenido Web (WCAG) son el estándar de oro para la accesibilidad web. La versión actual, WCAG 2.1, describe las mejores prácticas en el espacio de accesibilidad web en 4 categorías diferentes: perceptible, operable, comprensible y sólida. Se anticipa que la próxima versión, 2.2, se lanzará a fines de 2022 para definir aún más las pautas existentes y agregar algunas pautas nuevas.

Además, la accesibilidad está arraigada en la comunidad de WordPress y están comprometidos a incorporar las mejores prácticas de accesibilidad en el propio software. Algunos desarrolladores de WordPress incluso van más allá en sus temas y complementos. Por ejemplo, el tema Total de WPExplorer mantiene la accesibilidad a la vanguardia, tanto que el desarrollador AJ a menudo realiza mejoras de accesibilidad regulares.

La accesibilidad de WordPress es muy importante y no es tan difícil de navegar como lo era antes. Cuando trabaje en un proyecto de rediseño de un sitio web, o simplemente agregue nuevas características a su sitio web existente, aquí hay algunos elementos a considerar durante los procesos de diseño y construcción que ayudarán a que su sitio se ajuste a los estándares de accesibilidad actuales.

Diseño y construcción inicial

Los estándares de accesibilidad web deben considerarse a lo largo de la duración de un proyecto de WordPress. Aunque los procesos de prueba posteriores a la compilación probablemente detectarán cualquier error que se haya pasado por alto en la compilación inicial, siempre es mejor compilar el sitio de la manera más "limpia" posible la primera vez. En esta fase del proyecto de su sitio web, considere lo siguiente:

Contraste de color

Uno de los elementos web más fáciles de probar para la accesibilidad son los colores. Las WCAG 2.1 designan proporciones de contraste de color específicas para 2 colores cualesquiera en un sitio web (primer plano y fondo). La relación de contraste debe ser de al menos 4,5:1 para texto de tamaño normal (menos de 18 pt) y 3:1 para texto más grande (18 pt y superior).

Pero, ¿cómo sabes cuál es la relación de contraste de color? WebAim, un líder confiable en accesibilidad web durante más de 20 años, ha creado una excelente herramienta para verificar la relación de contraste de color de sus colores. Agregue un código hexadecimal de color de primer plano y un código hexadecimal de fondo y la herramienta calculará la relación de contraste. Si la proporción no es lo suficientemente alta, el valor de cada color se puede ajustar a través de un control deslizante para ayudar a determinar las combinaciones de aprobación dentro de la misma historia de color.

Afortunadamente, cambiar y experimentar con diferentes opciones de color en su sitio web es un proceso relativamente simple. El generador de Gutenberg nativo de WordPress le permite cambiar fácilmente los colores de un bloque completo de contenido o apuntar específicamente a cualquier cantidad de palabras específicas. También puede realizar ajustes en el panel de temas para realizar ediciones de color globales.

Colores alternativos

En estos días, la mayoría de los sitios están diseñados con muchas imágenes. Sin embargo, por diversos motivos, es posible que algunos usuarios desactiven las imágenes o el estilo de su sitio para obtener la información que necesitan de forma más rápida o sencilla.

Imagina que tienes un panel con una imagen grande y texto blanco encima. Cuando las imágenes están desactivadas en un navegador web, el fondo del sitio es blanco de manera predeterminada. Ese texto blanco ahora es invisible en el fondo blanco. ¿Qué pasaría si ese fuera un contenido importante, como un llamado a la acción o una propuesta de valor?

Para resolver estos problemas, asegúrese de agregar colores alternativos a todos los paneles de su sitio con texto sobre las imágenes. En el ejemplo anterior, cambiar el color alternativo de ese panel a negro resolvería el problema, el texto blanco sería visible. Si no está seguro de qué color usar como color alternativo, la herramienta de contraste de color Web Aim es una excelente guía.

Varias opciones de navegación

Un gran diseño de menú puede ser una característica destacada en un sitio, pero también es importante incluir múltiples opciones de navegación. Algunos usuarios pueden encontrar la información que buscan más rápido si la navegación del sitio se presenta de otra manera.

Un mapa del sitio vinculado en el pie de página de un sitio web puede ser una gran solución. Esto permite a los usuarios ver todas las páginas disponibles en un área y podría mejorar su experiencia de usuario. El complemento WP Sitemap Page es una opción sólida para agregar fácilmente un mapa de sitio simple que puede enumerar páginas, publicaciones de blog, estudios de casos, elementos de cartera y más.

Otra opción sería agregar una función de búsqueda a su sitio para que un usuario pueda buscar rápidamente en su sitio completo una palabra clave o frase específica. De forma predeterminada, WordPress incluye un widget de búsqueda básico que puede usar en su barra lateral o pie de página, pero también hay un bloque de búsqueda dentro de Gutenberg (así como la mayoría de los demás creadores de páginas) y, a menudo, los desarrolladores de temas crearán un cuadro de búsqueda o un icono en los encabezados de los temas. Además, puede personalizar y mejorar la funcionalidad de búsqueda de WordPress con una variedad de complementos útiles.

Formulario de comentarios de accesibilidad

Idealmente, el pie de página de su sitio web también debería vincular a un formulario de comentarios sobre accesibilidad. Incluso si toma tantos pasos de accesibilidad como sea posible, siempre hay margen de mejora a medida que las pautas y la tecnología evolucionan para adaptarse mejor a los usuarios.

Incluir una página con un formulario de comentarios sobre accesibilidad permite a los usuarios enviar comentarios adicionales o inquietudes con respecto a la accesibilidad de su sitio web si falta algo y limitar su visita (solo recuerde usar un formulario de WordPress accesible). También les permite saber que te preocupas por su experiencia web. Luego, puede usar estos comentarios para mejorar su sitio para ese usuario y los usuarios futuros que necesitan adaptaciones similares. Escuchar a la comunidad y hacer ajustes cuando sea necesario es una parte crítica del proceso.

Procesos de prueba posteriores a la construcción

Una vez que la mayor parte de su sitio esté construido, es hora de comenzar una ronda más profunda de pruebas de accesibilidad. Esto debe incluir pruebas automatizadas y pruebas manuales. Las pruebas automatizadas son un gran recurso y un ahorro de tiempo para detectar ciertos problemas. Sin embargo, la accesibilidad es una preocupación humana y la IA no puede reconocer todos los matices presentes. Por lo tanto, es igual de importante probar ciertos elementos del sitio a mano.

Pruebas automatizadas

Hay una variedad de excelentes herramientas de prueba automática para fomentar un flujo de trabajo de accesibilidad fluido. Es importante recordar que pasar las pruebas automatizadas no es suficiente para que un sitio sea accesible, pero es un excelente punto de partida.

Para obtener una idea rápida de si su sitio está pasando los estándares básicos de accesibilidad, la herramienta WAVE es una colección de herramientas de evaluación automatizada que esencialmente escanea una página web e informa las fallas de WCAG y los elementos que necesitan una investigación adicional. Con la ayuda de una extensión del navegador, la herramienta WAVE indicará en rojo las fallas obvias de accesibilidad. Se dividen en errores y errores de contraste. Los errores suelen estar relacionados con la codificación de su sitio. Los errores de contraste se producen cuando su combinación de colores no cumple con los estándares de contraste (revisado anteriormente en este artículo).

Una vez que esté listo para abordar cualquier error de contraste en su sitio, hay opciones de complementos como Equalize Digital Accessibility Checker que pueden optimizar el proceso de ajuste dentro del backend de su sitio. La versión gratuita del complemento verificará automáticamente la página y las publicaciones básicas para informar errores regulares y errores de contraste en cada página. La actualización a la versión pro permite escanear tipos de publicaciones personalizadas. El complemento facilita la identificación de los errores dentro del código y realiza los cambios necesarios.

Prueba manual

Como se mencionó, existen limitaciones en las herramientas actuales y los procesos legales disponibles para las pruebas automatizadas. La herramienta WAVE y Equalize Checker son excelentes recursos para el escaneo automatizado y pueden ahorrar mucho tiempo. Pero las IA que crean los humanos no necesitan las mismas adaptaciones que los usuarios humanos reales con una discapacidad.

Es importante revisar el sitio manualmente y usar algunas de las herramientas que un usuario discapacitado puede estar usando para ver si la navegación y la recopilación de información son posibles. Algunos aspectos para verificar manualmente incluyen capacidades de zoom de página, navegación con teclado, lector de pantalla y texto alternativo.

Las pruebas de zoom de página deben verificar si una página se puede ampliar al 200% sin perder ningún contenido o funcionalidad. Esto debería ser posible utilizando solo las capacidades de zoom nativas del navegador y ninguna otra tecnología de asistencia. También querrá asegurarse de que el acercamiento no requiera que el usuario se desplace en ambas direcciones (arriba-abajo e izquierda-derecha).

Algunos usuarios no pueden (o prefieren no) usar un mouse para navegar por un sitio web. En cambio, usarán el teclado para navegar, a menudo usando la tecla TAB y algunas otras teclas para moverse entre los elementos. Para las pruebas de navegación con teclado , querrá asegurarse de que los elementos interactivos en su sitio tengan un contorno de enfoque visible cuando un teclado apunta a ese elemento. También verifique todas las funciones de desplazamiento para asegurarse de que TAB revele cualquier contenido oculto. Si bien este proceso puede ser desalentador, comience con sus páginas clave e intente pasar por cada una con TAB. ¿Eres capaz de acceder a todos los contenidos y enlaces correctamente?

Las pruebas de lectores de pantalla pueden ser las más complicadas de todas, ya que la tecnología es más específica. La mejor manera de verificar la accesibilidad de su sitio para los usuarios de lectores de pantalla es recorrer su sitio con un lector de pantalla. ¿Está clara la jerarquía de sus páginas web? ¿Utiliza los encabezados correctamente y denota elementos específicos según sea necesario para los lectores de pantalla?

Las pruebas manuales pueden llevar mucho tiempo y es difícil asegurarse de que su sitio sea accesible para todas las herramientas de asistencia disponibles para su uso. Sin embargo, es un paso increíblemente importante ya que, de lo contrario, estas adaptaciones se pasarían por alto.

En el mundo actual, la inclusión es la mejor política. Un sitio web accesible significa que más visitantes pueden obtener información sobre su empresa y potencialmente llegar a ella. Si bien aún no existen requisitos específicos para sitios web que cumplan con ADA, si algunos usuarios no pueden acceder a la información en su sitio web que necesitan para dar los siguientes pasos, está perdiendo clientes potenciales.

Utilice la información presentada en este artículo como punto de partida para su viaje de accesibilidad. Recuerde que la accesibilidad web es un proceso continuo, ya que los estándares y las pautas se actualizan con frecuencia para servir mejor a la comunidad. Acércate a este mundo con una mente abierta y comprendiendo que puede que no sea un proceso abierto y cerrado. Al final del día, se trata de mejorar la experiencia del usuario para todos sus usuarios.