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 son comprometidos con la incorporación de la accesibilidad mejores prácticas en el propio software. Algunos desarrolladores de WordPress incluso van más allá en sus temas y complementos. Por ejemplo, el propio Themelocal tema total 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 se trabaja en un proyecto de rediseño de sitio webo simplemente agregando 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 relaciones de contraste de color específicas para cualquier 2 colores 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, líder de confianza en accesibilidad web durante más de 20 años, ha creado una gran herramienta para verificar la relación de contraste de color de tus 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 forma 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 encima de 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.
A 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. los Complemento de página de mapa de sitio WP es una opción sólida para agregar fácilmente un mapa del 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 un búsqueda funcionalidad a su sitio para que un usuario pueda buscar rápidamente en su sitio completo una palabra clave o frase específica. Por defecto WordPress incluye un widget de búsqueda básica 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 otros creadores de páginas) y, a menudo, los desarrolladores de temas crearán un cuadro de búsqueda o un ícono 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 una página de accesibilidad. formulario de comentarios. 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 fundamental 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 ver rápidamente si su sitio está pasando los estándares básicos de accesibilidad, el herramienta ONDA es una colección de herramientas de evaluación automatizadas que esencialmente escanea una página web e informa fallas de WCAG y elementos que necesitan 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 Comprobador de accesibilidad digital Equalize que puede agilizar 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.
Prueba de zoom de página debe 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 prueba de navegación del teclado, querrá asegurarse de que los elementos interactivos en su sitio tengan un contorno de enfoque visible cuando un teclado apunte 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?
Pruebas de lectores de pantalla puede ser el más complicado de todos 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 no hay específicos Sitio web compatible con ADA Sin embargo, si algunos usuarios no pueden acceder a la información de 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.