Cómo ajustar su sitio web existente de WordPress para accesibilidad

La construcción de sitios web que son accesibles para todos los usuarios se ha convertido en un objetivo importante de nuestra industria. No solo tenemos que asegurarnos de que nuestras creaciones se vean muy bien en diferentes navegadores y dispositivos, sino que también deben funcionar bien con tecnologías de asistencia, como los lectores de pantalla. Este no es solo un imperativo moral, sino también uno más y más legal. Incluso en países (como los Estados Unidos) que no tienen reglas concretas para la accesibilidad de los sitios web, las empresas pueden considerarse responsables de los principales pasos incorrectos. Solo tienes que mirar el caso de Domino’s Pizza para obtener un ejemplo.
Idealmente, cada sitio web que construimos sería accesible desde el principio. Desafortunadamente, no siempre es el caso. Los sitios web más antiguos pueden sufrir varias deficiencias en esta área. Y, si un rediseño no está en el presupuesto, puede tener la impresión de que está bloqueado con estos problemas. Sin embargo, no todo está perdido. Hay varias cosas que puede hacer para que un sitio web existente sea más accesible. En vista de esto, aquí hay algunas ideas para mejorar la accesibilidad de su sitio de WordPress. Primero, haga una auditoría de accesibilidad El primer paso para mejorar la accesibilidad en su sitio web existente es determinar qué problemas debe tratar. Esto se puede hacer con una auditoría básica.
Hay algunas formas diferentes de realizar una auditoría de accesibilidad y deben realizarse en conjunto. El primero implica el uso de una herramienta automática, y el segundo es un enfoque más manual. Echemos una mirada más profunda. Las herramientas automáticas se han desarrollado una serie de herramientas automáticas que escanearán su sitio web para cualquier problema de accesibilidad. Algunos tienen la intención de ser una suite que abarca todo, mientras que otros ofrecen más características de nicho. Si está interesado en ver lo que está disponible, W3C ha hecho una lista extendida de opciones. Para nuestros propósitos, la herramienta de accesibilidad web de Wave Free es una buena opción para obtener una visión general de su sitio. Ofrece un marcador interactivo de su sitio web completamente con una lista de errores, advertencias e información. Y mejor son las extensiones gratuitas del navegador para Chrome y Firefox. Le permiten probar cualquier página que visite con un solo clic. Wave informará problemas como el bajo contraste de color, la falta de texto alternativo en las imágenes e incluso las funciones redundantes que pueden dificultar la navegación del lector de pantalla . También encontrará una lista de la estructura de la página y la etiqueta. Después de tener los resultados de la prueba automática, tendrá una lista de elementos específicos para ser verificados. Como Wave es una herramienta visual, es bastante fácil hacer clic en los errores y las alertas en la pantalla. Esto puede brindarle suficiente información sobre si hacer una inmersión más profunda en ciertas banderas.
Cabe señalar, sin embargo, que algunos elementos marcados como “errores” o “alertas” no son necesariamente problemáticos. Por ejemplo, W3C recomienda que las imágenes decorativas no necesiten texto alternativo. Entonces, si bien Wave puede llorar mal por cualquier imagen con un atributo otro objetivo, no siempre es una razón de alarma. La lección aquí es tomar el informe con una semilla de sal. Pero aunque las herramientas automáticas son excelentes para identificar problemas directamente relacionados con el código, ¿cómo se queda con algunas de las experiencias del usuario, más difícil de encontrar? Pruebas manuales Algunos problemas de accesibilidad se detectan mejor mediante la inspección manual de su sitio web. Entre los elementos que querrá verificar: el teclado que navega por las funcionalidades del sitio, como enlaces, campos de formularios y botones, se debe acceder a través de un teclado. Para probar, cargue una página en su navegador web y presione la tecla Tab repetidamente. Debería poder navegar a través de los diferentes elementos de la página en un orden lógico. Además, se debe aplicar un pseudo-Clase: Focus en su CSS para ayudar a los usuarios a identificar el elemento actual en el índice de archivos (como se destaca en la captura de pantalla mejorada a continuación). Simplemente dicho, si no puede decir dónde se encuentra en una página cuando navega por su teclado, ni sus visitantes pueden.

Elementos intuitivos eche un vistazo a su sitio web y preste especial atención a los elementos interactivos, como enlaces y botones. ¿Son intuitivos? ¿Su propósito es claro para el usuario final? Evite usar elementos que dependan exclusivamente del color, la forma o el icono. Asegúrese de que cada elemento interactivo esté claramente marcado en lo que hace. El propósito aquí es eliminar la suposición de realizar diferentes tareas, para que los usuarios puedan moverse más fácilmente. La tipografía de tipografía es un tema vasto, por lo que no cavaremos demasiado. Pero es importante revisar las opciones de fuentes de su sitio, tamaño y espacio. Deberá asegurarse de que su texto sea legible y que elementos como títulos puedan distinguir fácilmente del resto del contenido de la página. Por supuesto, hay una serie de otras cosas a buscar. Consulte la referencia FAST WGAC para obtener elementos adicionales que desea inspeccionar. Remediar los problemas de accesibilidad del sitio de WordPress para saber que su sitio web tiene deficiencias cuando se trata de accesibilidad es la mitad de la lucha. La otra mitad es la implementación de soluciones. Gran parte de lo que encuentra tanto mediante pruebas automáticas como de pruebas manuales se puede remediar cambiando los estilos de su sitio. Dependiendo de su tema, puede ser cuestión de visitar un personalizador de WordPress para cambiar cosas como tipografía y colores.
De lo contrario, puede ser un problema viajar en la hoja de estilo y hacer manualmente los cambios necesarios. Aquí las herramientas de inspección de su navegador pueden ser de gran ayuda para determinar exactamente qué estilos cambiar. Cuando los complementos toman algo muy útil para ayudarlo a una herramienta de inspección del navegador es determinar si un cierto poco de HTML o CSS proviene de su WordPress de su WordPress tema o de un complemento. Mire a la derecha del estilo en cuestión para ver de dónde viene. El proceso de ajustar los temas es bastante simple. Los complementos, sin embargo, pueden ser un poco más difíciles.

Si descubre que un complemento que utiliza interfiere con la accesibilidad de su sitio, tiene algunas opciones. Tú podrías:

Intente reemplazar cualquier CSS perturbador a través de la hoja de estilo del tema;
Use ganchos o filtros de WordPress para cambiar el resultado del complemento;

Póngase en contacto con el autor y pídales que corrijan cualquier problema de accesibilidad;
Deje de usar el complemento;
La última opción no es ideal y no siempre es fácil de hacer. Por lo tanto, es mejor agotar todas las demás formas. Use un complemento de WordPress para mejorar la accesibilidad del sitio web que la comunidad de WordPress Developer siempre busca satisfacer una necesidad, y la accesibilidad no es una excepción. Se han lanzado una serie de complementos que pueden ayudarlo a abordar varias tareas. Aquí, nos centraremos en un cuchillo suizo virtual con funciones accesibles: accesibilidad WP.
El complemento puede ayudarlo a solucionar una serie de problemas comunes. Por ejemplo, agregará un enlace de “saltar” (si su tema no incluye uno), lo que permite a los usuarios de teclado omitir la navegación y alcanzar el contenido de la página directamente. También encontrará la capacidad de agregar contornos de enfoque a los enlaces y otros elementos, una larga etiqueta de descripción para imágenes, así como eliminar elementos que pueden tener un impacto negativo (objetivos de enlace, atributos de título, atributos de tabindex, etc.). Una de las características únicas de la accesibilidad de WP es la barra de herramientas. Este conjunto de botones se adjuntará al lado de su sitio web (o cualquier otro elemento que asigne). Permite a los usuarios aumentar el tamaño del texto y activar un esquema de color oscuro. Los administradores del sitio también reciben una visualización opcional en tonos grises, que puede usar para asegurarse de que su sitio no dependa demasiado del color.
Tenga en cuenta que la barra de herramientas hace todo lo posible para que coincida con los estilos existentes de su sitio. Sin embargo, es posible que deba cambiar algunas cosas para su tema para la mejor experiencia posible. También se incluyen herramientas para probar las relaciones de contraste de color, aplicar los otros atributos en las imágenes y un diagnóstico de CSS que mostrará posibles problemas en el editor visual o en la parte delantera de su sitio. La accesibilidad de WP no resolverá todos los problemas. Pero puede ayudar en situaciones en las que tienes que hacer mejoras a toda prisa. Y no es la única opción. Eche un vistazo a través del almacén de complementos de WordPress para obtener más complementos de accesibilidad. Nunca es demasiado tarde para agregar funciones asequibles a su sitio web de WordPress, independientemente de su edad, cualquier sitio de WordPress se puede hacer más accesible. La buena noticia es que, en la mayoría de los casos, el proceso no debería ser demasiado difícil o costoso. Hay una serie de herramientas que pueden ayudarlo a determinar los problemas potenciales. A partir de ahí, se trata de investigar cada elemento en la lista y aplicar correcciones según sea necesario. Y, si bien algunos problemas de accesibilidad pueden ser tercos para ser remediados, prácticamente nadie es imposible. Los problemas estructurales como los que se encuentran en CSS o el uso de HTML semántico generalmente son fáciles de cambiar. Dependiendo del tamaño de su sitio y la composición de su tema, es posible que pueda eliminar estos remedios en una tarde. En el otro extremo del espectro, elementos como proporcionar transcripciones para contenido de audio o video pueden ser más engorrosos.