Prueba de accesibilidad de los sitios web de Drupal con WCAG 2.1

¿Sabía que 1 de cada 4 adultos en los EE. UU. tiene una discapacidad*? Esa es la asombrosa cantidad de 61 millones de personas que pueden verse afectadas por sitios web inaccesibles.

Como desarrollador de Drupal, usted tiene el poder de marcar la diferencia asegurándose de que su sitio cumpla con las Pautas de accesibilidad al contenido web (WCAG). En este blog, exploraremos las características clave y las mejores prácticas para probar la accesibilidad de WCAG 2.1 en Drupal, para que pueda crear sitios web que sean inclusivos para todos los usuarios.

Qué es Accesibilidad (A11y)

La accesibilidad se refiere a hacer que un sitio web sea utilizable por la mayor cantidad de personas posible, en particular en lo que respecta a las personas con discapacidades. ¿A qué se refiere A11y? A11y simplemente se refiere a la palabra "Accesibilidad", donde 11 denota la cantidad de caracteres presentes entre "A" e "Y".

WCAG y sus orígenes

WCAG significa Directrices de Accesibilidad al Contenido Web. Se considera que es el punto de referencia estandarizado para la accesibilidad del sitio web. Creadas por el World Wide Web Consortium (W3C), las pautas de las WCAG son la mejor y más fácil forma de hacer que su sitio web sea utilizable para todos. La mayoría de las organizaciones gubernamentales y de atención médica siguen estrictamente las pautas de WCAG para garantizar que el sitio web cumpla con las leyes de accesibilidad (por ejemplo, la sección 508).

Principios de las WCAG

Hay cuatro principios principales de accesibilidad si desea adoptar el cumplimiento de las WCAG. Estos siguen el acrónimo 'POUR', que significa Perceptible, Operable, Comprensible y Robusto .

Perceptible

En palabras simples, el contenido debe ser detectable por los sentidos del usuario. Esto significa que deben ser capaces de reconocer la información que se les presenta. Incluye permitir a los usuarios escuchar el contenido de audio con claridad y asegurarse de que se distinga del ruido de fondo.

Operable

Se trata de asegurarse de que los usuarios puedan navegar cómodamente por su sitio web y que la interfaz sea fácil de usar. No debe haber ninguna parte inaccesible del sitio o ningún paso que los usuarios no puedan completar. Debe evitar el contenido que se mueve rápidamente y parpadea al diseñar su contenido web. Debería ser fácil navegar por el sitio sin un teclado, asegurándose también de que el sitio sea accesible con el teclado para los usuarios que no pueden usar un mouse.

Comprensible

Los usuarios deben ser capaces de procesar la información que se les presenta y también ser capaces de entender cómo usar y navegar por el sitio web. Esto incluye hacer que el texto sea claro, legible y predecible para asegurarse de que las páginas aparezcan de una manera anticipada y fácil de usar.

Robusto

Esto destaca que la tecnología podría evolucionar y construir su sitio web con futuras evoluciones tecnológicas. Como regla general, si la tecnología cambia y se desarrolla, el contenido también debe permanecer accesible. También debe ser comprendido por un amplio espectro de usuarios con diferentes discapacidades y sigue siendo fácil de entender. Por ejemplo, el sitio lo hizo compatible para trabajar con la última versión de los lectores de pantalla.

¿Por qué debería cumplir con las WCAG?

A continuación se presentan algunas de las ventajas de la implementación de WCAG

• Un sitio web accesible genera buena voluntad hacia su marca y mejora la optimización del motor de búsqueda. Su sitio ocupará un lugar más alto en los resultados de los motores de búsqueda.
• Un sitio web accesible permite una mayor participación, alcance y retención, ya que habrá eliminado de manera eficiente las barreras que impiden que una amplia gama de personas acceda a su contenido.
• Una vez que WCAG se implementa como parte de cualquier sitio web, se considera estándar.

Criterios de éxito de WCAG 2.0/2.1: los más ampliamente implementados

1. Cada campo de entrada en el sitio tiene una etiqueta apropiada
2. El contenido decorativo se implementa de manera que la tecnología de asistencia pueda ignorarlo. Por ejemplo, imágenes decorativas ignoradas por lectores de pantalla
3. Se proporcionan subtítulos para todo el contenido de audio/video pregrabado
4. Se proporciona interpretación en lenguaje de señas para el contenido de audio.
5. Una secuencia significativa de contenido, por ejemplo, los encabezados de cualquier página se colocan en orden secuencial.
6. El usuario puede pausar o detener el audio o controlar el volumen de audio independientemente del volumen general del sistema para reproducir videos automáticamente.
7. La relación de contraste del texto y las imágenes de texto es de 4,5:1, y el texto y las imágenes a gran escala son de 3:1. La relación de contraste no se aplica al contenido decorativo ni al logotipo ni a la marca.
8. Audio de fondo bajo o nulo. El audio/vídeo pregrabado no contiene ningún ruido de fondo
9. Se puede acceder a toda la funcionalidad del contenido a través de la interfaz del teclado. No habrá trampa de palabras clave.
10. Proporcionar a los usuarios el tiempo suficiente para leer y utilizar el contenido.
11. Si el contenido está basado en el tiempo, el usuario puede pausar o ajustar la restricción de tiempo
12. En caso de contenido de movimiento rápido, como carruseles automáticos, al usuario se le presentarán opciones para pausarlo o detenerlo.
13. Cuando la sesión del usuario autenticado expire, el usuario podrá continuar con la sesión sin pérdida de datos después de la reautenticación.
14. Los títulos de página, los encabezados y las etiquetas describirán el tema de la página web.
15. El enfoque del teclado es visible y está bien resaltado
16. Los componentes enfocables recibirán el foco en un orden que signifique significado y operabilidad.
17. Cada sección de la página web va acompañada de su título de sección
18. A excepción de las imágenes decorativas, todas las imágenes tienen texto alternativo significativo.
19. Se puede acceder al audio, video, formularios, menús desplegables, texto de anclaje, URL y texto alternativo desde el teclado y el lector de pantalla.
20. La claridad del contenido se adapta según el nivel de zoom de la página. El contenido es claramente visible, incluso en el nivel de zoom máximo
21. El menú de encabezado y pie de página con contexto de ayuda debe estar disponible en todas las páginas del sitio.
22. Los sitios tienen una implementación adecuada de los estados de desplazamiento y enfoque.

Lectores de pantalla

Muchas personas con problemas visuales usan lupas de pantalla y lectores de pantalla. Un lector de pantalla es un software que lee en voz alta el texto digital que se muestra en la pantalla. Algunos ejemplos de lectores de pantalla incluyen:

• Productos de pago como JAWS (Windows) y Dolphin Screen Reader (Windows).
• Programas gratuitos como NVDA (Windows), ChromeVox (Chrome) y Orca (Linux).
• Software integrado en el sistema operativo (sistema operativo), como VoiceOver (macOS, iPadOS, iOS), Narrador (Windows), ChromeVox (en Chrome OS) y TalkBack (Android).

Tres niveles de accesibilidad

WCAG 2.1 tiene 3 niveles de criterios de éxito

• Nivel A: se cumplen los 30 criterios esenciales de éxito definidos en WCAG 2.0. Como mínimo, todos los sitios web deben alcanzar este nivel de cumplimiento.
• Nivel AA: se cumplen todos los criterios de éxito del nivel A y se satisfacen 28 criterios de éxito de accesibilidad adicionales. Este nivel logra un espectro de accesibilidad más amplio y, a menudo, es el objetivo de la mayoría de los equipos de desarrollo.
• Nivel AAA: el sitio web debe satisfacer los tres niveles de criterios de éxito, incluidos 28 criterios de éxito adicionales. Este nivel generalmente se reserva para sitios especiales, como organizaciones gubernamentales.

La mayoría de los sitios compatibles con WCAG se encuentran ampliamente bajo los criterios de éxito de accesibilidad nivel A o AA.

Prueba de accesibilidad de un sitio web de Drupal

Los siguientes son los pasos seguidos para realizar una prueba de accesibilidad para un sitio web de Drupal

1. Ejecute una auditoría de Google Chrome Lighthouse y solucione los problemas de accesibilidad destacados
2. Ejecute una auditoría de la herramienta Wave
3. Valide el enfoque de resaltado del teclado y el orden de tabulación de la página manualmente
4. Valide la página con el software lector de pantalla necesario. Por ejemplo, VoiceOver
5. Valide la accesibilidad del sitio en todas las resoluciones, como escritorio ancho, computadora portátil, pestaña y dispositivos móviles
6. Valide el código del sitio utilizando las herramientas de validación de W3C para Markup y CSS
7. Valide el contraste de color del sitio para asegurarse de que cumple con los estándares (4:5:1) utilizando una herramienta de extensiones de Chrome como Kontrast o una aplicación como Color Contrast Analyzer

Cómo ayuda Drupal a alcanzar los estándares de accesibilidad

El desarrollo web debe incluir la accesibilidad para garantizar que los sitios web sean funcionales y accesibles para las personas con discapacidades. Drupal es conocido por su firme dedicación a la accesibilidad. Eche un vistazo a cómo Drupal promueve la accesibilidad y qué herramientas y funciones proporciona para ayudar a que los sitios web sean más fáciles de usar.

1. Construyendo Accesibilidad en Drupal

El objetivo del equipo de desarrollo de Drupal siempre ha sido construir una plataforma que pueda ser utilizada por tantos usuarios como sea posible. Los requisitos de Nivel AA de las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1 se siguen al desarrollar la plataforma principal de Drupal. Esto indica que una variedad de discapacidades, como las que afectan los sistemas visual, auditivo, físico, verbal, cognitivo y neurológico, pueden acceder a los sitios web de Drupal.

2. Funciones de accesibilidad predeterminadas

• Con su capacidad para adaptarse a varios tamaños de pantalla y dispositivos gracias al diseño receptivo, los temas predeterminados de Drupal se pueden usar para aquellos que usan dispositivos móviles o tecnología de asistencia.
• Drupal crea marcado HTML semántico, que ayuda a los lectores de pantalla y otras herramientas de tecnología de asistencia a comprender la estructura del sitio web.
• Drupal incluye un campo para agregar texto alternativo a las fotos, lo que ayuda a las personas ciegas a comprender el contenido del sitio web.
• Drupal admite la navegación por teclado, lo cual es crucial para los usuarios que no pueden usar un mouse.
• Drupal genera formularios que son fáciles de usar y navegar con tecnología de asistencia que son accesibles.

3. Drupal proporciona complementos y módulos para la accesibilidad

Para mejorar la accesibilidad de un sitio web, Drupal proporciona una variedad de complementos y módulos de accesibilidad que se pueden implementar. Varios módulos y complementos de accesibilidad populares son los siguientes:

• Editoria11y Accessibility Checker: este módulo examina un sitio web en busca de problemas de accesibilidad y hace recomendaciones para encontrar soluciones.
• Complemento de accesibilidad de CKEditor: este complemento mejora la accesibilidad del editor de texto ampliamente utilizado para Drupal, CKEditor.
• Widget de accesibilidad todo en uno: este módulo incluye un widget de accesibilidad que permite a los usuarios cambiar el tamaño del texto del sitio web, el contraste y otras configuraciones relacionadas con la accesibilidad.
• A11Y: Ayudantes de formulario: este módulo ayuda a que todos los formularios web de Drupal cumplan con los estándares de accesibilidad
• Bloquear roles de hitos de ARIA: este módulo agrega elementos adicionales a los formularios de configuración de bloques que permiten a los usuarios asignar un rol de hitos de ARIA y/o etiquetas de ARIA a un bloque.

4. Fuerte apoyo de la comunidad para la accesibilidad

Los desarrolladores y diseñadores comprometidos con la accesibilidad constituyen una parte considerable de la comunidad de Drupal. Un esfuerzo liderado por la comunidad para hacer que Drupal sea más accesible para las personas con discapacidades es el Grupo de Accesibilidad de Drupal. El grupo ofrece orientación, herramientas y mejores prácticas para desarrollar sitios web de Drupal que cumplan con ADA.

Referencias:

https://www.cdc.gov/ncbddd/disabilityandhealth/infographic-disability-impacts-all.html

Pensamientos finales

Drupal es un sistema de administración de contenido efectivo y de código abierto que proporciona una variedad de funciones, herramientas y complementos para mejorar la accesibilidad de un sitio web. Debido a su dedicación a la accesibilidad y la fortaleza de su comunidad centrada en la accesibilidad, Drupal es una plataforma fantástica para crear sitios web que sean utilizables y accesibles para personas con discapacidades.
Espero que este artículo le proporcione la información necesaria sobre las pruebas de accesibilidad con WCAG 2.1. ¿Quiere crear un sitio web de Drupal accesible desde cero o quiere que su sitio actual sea más accesible? ¡Nos encantaría que eso sucediera! ¡Hablemos!