Cómo hacer que los sitios web de WordPress sean accesibles

Esta publicación fue escrita por Amber Hinds, directora ejecutiva de Equalize Digital, una corporación B certificada que se especializa en la accesibilidad de WordPress. Si desea obtener más información sobre Equalize Digital y sus servicios, visite el sitio web de la empresa.

Millones de personas en todo el mundo tienen una discapacidad que afecta la forma en que usan Internet, y después de una pandemia que aumentó la necesidad de hacer compras en línea, pedir comida e incluso servicios de atención médica remotos fácilmente, la accesibilidad a la web es más importante que nunca.

Esta guía de accesibilidad web analiza qué es la accesibilidad, por qué es importante y cómo hacer que los sitios web de WordPress sean accesibles, incluida la identificación de problemas comunes a través de pruebas.

En este artículo, cubriré:

• ¿Qué es la accesibilidad web?
• Por qué es importante la accesibilidad
• ¿Cuáles son algunos problemas comunes de accesibilidad?
• Probar sitios web de WordPress para accesibilidad
• Mantener un sitio web accesible

¿Qué es la accesibilidad web?

En pocas palabras, los sitios web accesibles son sitios web que pueden usar todas las personas, incluidas las personas que no pueden interactuar con la web a través de una configuración típica de teclado y mouse, y aquellas que tienen una variedad de diferencias intelectuales o físicas.

Deben incorporarse características específicas en los sitios web para que sean utilizables y comprensibles para las personas con discapacidad. Las discapacidades auditivas, visuales, cognitivas, motoras o de aprendizaje requieren adaptaciones y modificaciones del sitio web para que sean utilizables. Dependiendo de su situación, las personas con discapacidad utilizan varios dispositivos de asistencia, como lectores de pantalla, para acceder a los sitios web.

Los diseñadores y desarrolladores web deben asegurarse de que el contenido y la funcionalidad de sus sitios web sean perceptibles, operables, comprensibles y robustos (POUR), lo que significa que todas las personas pueden acceder y comprender el contenido y la funcionalidad en todos los dispositivos.

Algunos ejemplos de características que hacen que los sitios web sean más accesibles incluyen:

• subtítulos y transcripciones para archivos de video y audio
• texto alternativo en imágenes
• Saltar enlaces para ayudar con la navegación del teclado.
• contraste de color adecuado para que el texto sea más legible

Por qué importa la accesibilidad

La accesibilidad del sitio web tiene un impacto en todos los que usan la web. Si sus sitios web o los de sus clientes son accesibles, esto garantiza que todos tengan el mismo acceso a la información en línea, las necesidades, el entretenimiento, las compras y más, independientemente de su capacidad.

Pero la accesibilidad del sitio web no se trata solo de un buen karma; también tiene efectos reales en las clasificaciones de los motores de búsqueda, las nuevas ventas y los visitantes del sitio web, las complicaciones legales y la imagen de marca.

Clasificación del motor de búsqueda

Hacer correcciones de accesibilidad puede mejorar la clasificación de un sitio web en los motores de búsqueda. Muchas funciones de accesibilidad, como texto alternativo en imágenes y contenido correctamente estructurado con encabezados, ayudan tanto a la accesibilidad como a la optimización de motores de búsqueda (SEO). Una clasificación más alta en una página de resultados de búsqueda puede aumentar la visibilidad con nuevos clientes o clientes, lo que lleva a un aumento del tráfico del sitio web, conversiones, suscriptores de blogs o boletines, y más.

Aumento de ventas

El CDC afirma que, a partir de 2018, 1 de cada 4 estadounidenses tiene una discapacidad. Los estadounidenses discapacitados gastaron anualmente más de $200 mil millones en gastos discrecionales en línea. Las características de accesibilidad permiten que más personas encuentren y usen sitios web, lo que aumenta la oportunidad de nuevas ventas, conversiones y clientes habituales. Cuando muchos sitios web no son accesibles en el mundo actual, cualquier sitio web accesible estará muy por encima de la competencia.

Es legalmente requerido

Todos los sitios web deben cumplir con los estándares de accesibilidad web establecidos en la Ley de Estadounidenses con Discapacidades (ADA). Según la ADA, se ha sentado un precedente legal que establece los sitios web como lugares de alojamiento público. Esto significa que los sitios web comerciales, que son esencialmente sus escaparates digitales, deben ser accesibles de la misma manera que el edificio de una empresa física debe ser accesible.

Los sitios web de agencias gubernamentales locales, estatales y federales y cualquier sitio web para organizaciones y proyectos financiados con fondos federales también deben cumplir con los estándares de la Sección 508. Además, hay una variedad de leyes estatales e internacionales que requieren que los sitios web sean accesibles.

Si un sitio web no cumple con los requisitos de accesibilidad establecidos en estas pautas, la organización puede estar en riesgo de una demanda o, en algunos casos, de una multa del gobierno. Según Usablenet, en 2020 se presentaron 3550 demandas por accesibilidad de sitios web en los Estados Unidos. Mantener el cumplimiento legal es una parte importante de hacer negocios, y tener un sitio web accesible es una forma en que las empresas pueden cumplir con sus obligaciones legales.

Imagen de marca

Las empresas y organizaciones sin fines de lucro que toman medidas para hacer que sus sitios web de WordPress sean más accesibles muestran que están practicando la responsabilidad social y afirman que quieren hacer de Internet un lugar para todos. Un compromiso organizacional con la accesibilidad muestra a las personas que se preocupan por ellas de una manera profundamente humana, lo que genera lealtad y puede elevar la imagen de la marca.

¿Cuáles son algunos problemas comunes de accesibilidad?

Mi empresa, Equalize Digital, es una firma de consultoría de accesibilidad que realiza auditorías de accesibilidad en sitios web para empresas, organizaciones sin fines de lucro y agencias gubernamentales. En todas nuestras pruebas, vemos muchos problemas de accesibilidad repetidos en todos los sitios web. Estos problemas comunes son problemas relativamente simples de resolver, pero los desarrolladores, diseñadores y creadores de contenido suelen pasarlos por alto.

Si desea asegurarse de que los sitios web que crea o administra son accesibles, comience por verificar estos problemas:

Texto alternativo faltante o de baja calidad

El texto alternativo es lo que usan los lectores de pantalla para describir el contenido o el propósito de una imagen para las personas ciegas. Si el texto alternativo se deja vacío, un lector de pantalla lo omitirá por completo o leerá el nombre del archivo de la imagen, lo que no es útil cuando el nombre del archivo es una cadena de números o no es descriptivo de la apariencia. Sin el texto alternativo adecuado, los usuarios ciegos y con problemas de visión no tendrán contexto ni comprensión de una imagen.

El texto alternativo de baja calidad es problemático porque no describe la imagen con precisión o es demasiado detallado y puede causar confusión. No es necesario agregar palabras y frases como "imagen", "imagen", "gráfico de", "imagen de" al texto alternativo porque el lector de pantalla anunciará que hay una imagen o gráfico presente.

Si tiene texto alternativo que tiene más de 125-150 caracteres, algunos lectores de pantalla se cortarán y dejarán de leer. Agregar puntos dentro del texto alternativo puede hacer que los lectores de pantalla se detengan, lo que puede confundir a los oyentes o hacerles creer que el texto alternativo ha terminado.

Contraste de color insuficiente

En diseño web, el contraste de color se refiere a la medida de brillo entre el color de fondo y los elementos coloreados como texto, botones o íconos. Los colores de fondo y de primer plano deben tener una proporción de 4,5:1 para que el texto de tamaño estándar se considere suficiente. Puede probar su contraste de color ingresando los códigos hexadecimales de ambos colores en un verificador de contraste de color gratuito.

Texto ancla ambiguo

El texto ancla es una palabra o un grupo de palabras en las que se puede hacer clic en una página web. Hacer clic en el texto del ancla puede llevarlo a un nuevo sitio web, descargar un documento, abrir una imagen o un video en una nueva pestaña. El texto ancla se considera ambiguo si no tiene sentido fuera de contexto o no describe el propósito del enlace. Algunos ejemplos de texto de anclaje ambiguo incluyen "enlace", "haga clic aquí", "más información" o "continuar". Al agregar enlaces al contenido, es esencial que, si alguien escuchara solo el enlace de forma independiente (sin nada del texto que lo rodea), sabría a dónde apunta el enlace o qué sucederá cuando se haga clic en el enlace.

Faltan subtítulos y transcripciones

Los subtítulos toman contenido hablado y contenido no hablado, como efectos de sonido, música o risas de un video, y lo describen a través del texto. Aparecen en la pantalla durante un video, por lo que los usuarios sordos y con problemas de audición pueden entender lo que sucede en el video. Además, los subtítulos deben coincidir con el tiempo del video. Es importante tener en cuenta que los subtítulos deben ser precisos; los subtítulos generados automáticamente deben verificarse para verificar su precisión.

Una transcripción es un registro escrito de lo que se dice en un clip de audio o durante un video. Las transcripciones proporcionan un medio secundario para comprender el contenido de video o los archivos de audio. Deben usarse junto con los subtítulos en un video para que las personas puedan leer la transcripción en lugar de mirar el video. Esto es importante porque no todos los usuarios pueden leer subtítulos. Las transcripciones también brindan el beneficio de traducirse fácilmente a otros idiomas y pueden ayudar al SEO.

Prueba de sitios web de WordPress para accesibilidad

La mejor manera de probar la accesibilidad de los sitios web es realizar una combinación de pruebas automatizadas, manuales y de usuario.

Pruebas de accesibilidad automatizadas

Las pruebas de accesibilidad automatizadas se realizan con herramientas de escaneo de IA. Hay muchas herramientas gratuitas y de pago que pueden ofrecer una variedad de funciones de escaneo de accesibilidad. Al elegir una herramienta automatizada, aquí hay algunas cosas que debe tener en cuenta:

• El tamaño del sitio web. Si tiene un sitio web más pequeño, una herramienta gratuita puede funcionar para usted. Si tiene un sitio web más grande, como un sitio con un blog o una sección de comercio electrónico con miles de publicaciones, es probable que una herramienta paga sea más apropiada.
• Cuánto apoyo necesitas. Si necesita ayuda para encontrar errores de accesibilidad en su sitio web para poder corregirlos, las herramientas gratuitas pueden ser una excelente opción. Si necesita ayuda para comprender los errores de accesibilidad o quiere que otra persona los solucione, intente encontrar una herramienta con opciones de soporte integradas u ofrecidas por los desarrolladores. Tener soporte disponible es clave si eres nuevo en la remediación de accesibilidad.
• Experiencia de usuario. Algunas herramientas de accesibilidad automatizadas se pueden usar directamente en su sitio web, por ejemplo, a través de una extensión del navegador o dentro del panel de control de WordPress. Otras herramientas requieren que use una interfaz que está completamente separada de su sitio web. Si desea ver errores de accesibilidad mientras trabaja en su sitio web, elija una herramienta que ofrezca informes en el sitio. Esto hace que sea más fácil para usted verificar continuamente la accesibilidad de su sitio web mientras edita contenido en el sitio.

Dos herramientas gratuitas populares que se pueden usar en cualquier sitio web son WAVE y Axe. Estas herramientas tienen extensiones de Chrome y Firefox disponibles para probar URL individuales, una a la vez, y planes pagos que permiten pruebas masivas y funciones adicionales.

Comprobador de accesibilidad Complemento de WordPress

Si desea ejecutar análisis de accesibilidad masivos y ver informes en el panel de control de WordPress, el complemento Comprobador de accesibilidad de WordPress es la mejor herramienta. Puede descargar la versión base del complemento de forma gratuita en WordPress.org.

El Comprobador de accesibilidad escanea páginas y publicaciones en busca de errores de accesibilidad o posibles problemas y los muestra directamente en la pantalla de edición de esa página o publicación. Estos informes en la página son útiles no solo para verificar si el sitio web es accesible en primer lugar, sino también para monitorear la accesibilidad continua.

Accessibility Checker ejecuta más de 40 comprobaciones diferentes, incluso para los problemas comunes identificados anteriormente. La versión gratuita escanea publicaciones y páginas, y la versión Pro incluye escaneos completos del sitio de tipos de publicaciones personalizadas y páginas de archivo. Los elementos marcados o revisados ​​incorrectamente se pueden descartar, lo que permite realizar un seguimiento de las correcciones de accesibilidad a medida que se realizan con el tiempo. Es una gran herramienta para agencias, desarrolladores y usuarios de WordPress por igual.

Prueba manual

Desafortunadamente, los escaneos automáticos no pueden identificar todos los problemas de accesibilidad en un sitio web; algunos problemas solo pueden ser determinados por un ser humano que experimenta el sitio web. Después de probar el sitio web con una herramienta automatizada como el Verificador de accesibilidad, luego realice una prueba manual para asegurarse de que todas las personas puedan usarlo sin importar qué dispositivo estén usando.

El primer paso en una prueba de accesibilidad manual es confirmar que los usuarios pueden navegar completamente con solo un teclado. Vaya a la parte frontal del sitio web y use la pestaña y las teclas de flecha para moverse por el sitio, asegurándose de no perder su lugar a medida que avanza y que puede usar todas las partes del sitio web.

Después de la prueba del teclado, puede pasar a la prueba del lector de pantalla. Los lectores de pantalla son un tipo de software de tecnología de asistencia que las personas ciegas y con problemas de visión utilizan para comprender el contenido web. Si tiene una Mac, puede usar el software VoiceOver integrado en su computadora. Si no tiene una Mac, puede descargar el lector de pantalla gratuito NVDA de código abierto o comprar el popular lector de pantalla JAWS. Es una buena práctica probar su sitio web con dos o más lectores de pantalla, ya que no todos los lectores de pantalla dicen lo mismo para los elementos individuales.

Para probar su sitio web con un lector de pantalla, vaya a la página que le gustaría probar y luego desplácese por la página como lo hizo durante la prueba de navegación del teclado, usando solo las teclas de tabulación y flecha. Escuche lo que dice el lector de pantalla mientras se desplaza por la página y marque cualquier cosa incorrecta o confusa. Escuche los archivos multimedia o los controles deslizantes que se reproducen automáticamente e interrumpen otro contenido en la página.

Una vez que haya realizado las pruebas de navegación con el teclado y del lector de pantalla, debe verificar todos los archivos multimedia incrustados o vinculados. Los archivos multimedia incluyen videos, archivos de audio, PDF, archivos .Doc o .XLS, controles deslizantes de imagen o texto y widgets o iFrames de terceros. Asegúrese de que las personas con discapacidad puedan acceder, interactuar y comprender el contenido presentado por todos los archivos multimedia incrustados o vinculados.

Pruebas de usuario

Después de las pruebas de accesibilidad automáticas y manuales, se recomienda realizar pruebas de usuario. Las pruebas de usuario implican la contratación de usuarios de tecnología de asistencia del mundo real para probar su sitio web en busca de errores de accesibilidad. Por lo general, un usuario de prueba recibe un resumen de un desarrollador web con objetivos específicos. El usuario de prueba luego intentará lograr esos objetivos y luego proporcionará comentarios al desarrollador.

Puede contratar usuarios de prueba individuales a través de programas pagados o voluntarios, o encontrar una empresa de accesibilidad que ofrezca servicios de prueba de usuarios.

Conclusión: mantener un sitio web accesible

Es importante tener en cuenta que, al igual que el SEO, la accesibilidad es un proceso continuo que requiere supervisión y modificaciones continuas. Para asegurarse de que su sitio web permanezca accesible, cree un plan para:

• Supervise y pruebe regularmente los errores de accesibilidad utilizando una herramienta como el complemento Comprobador de accesibilidad.
• Capacite a desarrolladores web, diseñadores y creadores de contenido en las mejores prácticas de accesibilidad web. Si está lanzando sitios web para clientes, asegúrese de que sepan cómo agregar contenido de manera accesible después del lanzamiento.
• Manténgase informado sobre cualquier pauta de accesibilidad o cambios en la ley que deba seguir.

Seguir estos pasos ayudará a garantizar que su sitio web permanezca accesible y que todas las personas tengan el mismo acceso a la información, los productos y los servicios en la web, independientemente de sus capacidades.