Editoria11y Verificador de Accesibilidad
Un verificador de accesibilidad automático y fácil de usar que se ejecuta en cada carga de página para ayudar a los autores de contenido a identificar y corregir problemas de accesibilidad.
editoria11y
Install
composer require 'drupal/editoria11y:^2.2'
Overview
Editoria11y (aliado de accesibilidad editorial) es un verificador de accesibilidad integral diseñado específicamente para autores de contenido. A diferencia de las herramientas de accesibilidad tradicionales que requieren ejecución manual, Editoria11y se ejecuta automáticamente en cada carga de página, de manera similar a cómo funciona el corrector ortográfico moderno.
El módulo se enfoca exclusivamente en problemas sencillos que los autores de contenido pueden entender y corregir fácilmente, evitando abrumarlos con problemas técnicos a nivel de código. Verifica el contenido en contexto, lo que significa que puede detectar problemas en Views, Layout Builder, Paragraphs y otros componentes de página ensamblados que las herramientas que se ejecutan solo dentro de CKEditor no detectarían.
Las capacidades principales incluyen la verificación de problemas con texto alternativo de imágenes, problemas de estructura de encabezados, accesibilidad de enlaces, encabezados de tablas, accesibilidad de contenido incrustado y problemas de formato de texto. Los resultados se sincronizan con un panel de control a nivel de sitio para que los administradores rastreen los problemas en todo el contenido, y los usuarios pueden descartar o marcar problemas como correctos para gestionar falsos positivos.
Features
- Verificación automática de accesibilidad en cada carga de página sin requerir activación manual
- Verificación en tiempo real dentro de los cuadros de edición de CKEditor5 y Gutenberg durante la edición de contenido
- Botón de alternancia visual en la esquina inferior derecha que muestra el recuento de problemas con panel de detalles expandible
- Visualizador de esquema del documento que muestra la jerarquía de encabezados en toda la página
- Visualizador de texto alternativo de imágenes que muestra todos los atributos de texto alternativo de las imágenes
- Panel de control a nivel de sitio que rastrea problemas de accesibilidad en todo el contenido con ordenación y filtrado
- Exportación CSV de problemas, resumen de páginas y descartes para informes
- Capacidad de marcar problemas como correctos (globalmente) u ocultarlos (por usuario) para gestionar falsos positivos
- Más de 25 pruebas de accesibilidad configurables que cubren imágenes, enlaces, encabezados, tablas, incrustaciones y texto
- Selectores personalizables para contenedores de contenido, elementos ignorados y manejadores de contenido oculto
- Soporte multiidioma con cadenas de interfaz traducibles a través del sistema de traducción de Drupal
- Integración con CKEditor5 para agregar automáticamente encabezados de tabla a las nuevas tablas
- Eventos JavaScript para que los desarrolladores de temas revelen contenido oculto con errores (acordeones, pestañas)
- Soporte de escaneo de shadow DOM de componentes web para frameworks de frontend modernos
- Modos de alerta inteligentes: mostrar siempre, mostrar en la primera detección, o nunca mostrar automáticamente
- Tres temas visuales: Elegante, Clásico y Oscuro
Use Cases
Flujo de trabajo diario del editor de contenido
Cuando un editor de contenido crea o edita una página, Editoria11y verifica automáticamente el contenido al guardar y previsualizar. El botón de alternancia en la esquina inferior derecha muestra un recuento de problemas, y al hacer clic en él se revelan detalles sobre cada problema con explicaciones de por qué importa y cómo solucionarlo. Los editores pueden marcar los falsos positivos como correctos u ocultar los recordatorios de verificación manual que ya han abordado.
Auditoría de accesibilidad a nivel de sitio
Los administradores pueden usar el panel de control en /admin/reports/editoria11y para ver todos los problemas de accesibilidad en todo el sitio. El panel de control muestra los principales problemas por tipo, las páginas con más problemas y los hallazgos recientes. Las exportaciones CSV permiten a los equipos crear planes de remediación y rastrear el progreso a lo largo del tiempo.
Capacitación de editores de contenido
Las descripciones emergentes descriptivas ayudan a educar a los editores de contenido sobre accesibilidad mientras trabajan. Cada problema incluye una explicación del problema y orientación sobre cómo solucionarlo, convirtiendo la verificación de accesibilidad en una oportunidad de aprendizaje.
Aseguramiento de calidad antes del lanzamiento
Antes de lanzar nuevas secciones o rediseños, los equipos pueden revisar todos los problemas marcados en las páginas afectadas. La capacidad de filtrar por tipo de contenido y exportar informes facilita garantizar el cumplimiento de accesibilidad antes del lanzamiento.
Gestión de falsos positivos
Para contenido legítimo que activa advertencias (por ejemplo, una cita que es intencionalmente corta, o una imagen que es deliberadamente decorativa), los usuarios autorizados pueden marcar los problemas como correctos para suprimirlos para todos los usuarios, mientras que los editores regulares pueden ocultar alertas solo para ellos mismos.
Integración de tema personalizado
Los desarrolladores de temas pueden usar eventos JavaScript para integrar Editoria11y con componentes de acordeón, pestaña y carrusel. Cuando los usuarios intentan saltar a un problema oculto dentro de dichos componentes, el JS del tema puede revelar automáticamente el contenido antes de que Editoria11y lo enfoque.
Tips
- Comience con la configuración predeterminada y ajuste solo según sea necesario basándose en su tema y estructura de contenido
- Use 'main' o '#main-content' como raíz de contenido en lugar de 'body' para un escaneo más enfocado
- Agregue enlaces de edición a las tareas locales de su tema para habilitar enlaces convenientes de Editar/Layout en las descripciones emergentes
- Configure niveles de encabezado personalizados para los campos de CKEditor para que el contenido del cuerpo comience en nivel H2
- Use el modo de alerta 'En la primera detección' para notificaciones menos intrusivas después de las correcciones iniciales
- Exporte informes CSV mensualmente para rastrear las tendencias de mejora de accesibilidad a lo largo del tiempo
- Capacite a los editores de contenido que 'Marcar como correcto' es para excepciones permanentes mientras que 'Ocultar' es para preferencia personal
- Agregue selectores de componentes con shadow DOM si su tema usa componentes web con shadow roots
- Use el evento ed11yHiddenHandler en el JS de su tema para abrir automáticamente acordeones que contienen errores
- El parámetro de consulta ed1ref activa la apertura inmediata del panel, útil para enlazar desde paneles de control a páginas específicas
Technical Details
Admin Pages 5
/admin/config/content/editoria11y
Configura todos los aspectos del verificador de accesibilidad, incluyendo qué elementos de página escanear, qué pruebas ejecutar, opciones de visualización y configuración de sincronización.
/admin/reports/editoria11y
Panel de control a nivel de sitio que muestra los problemas de accesibilidad detectados en todo el contenido. Muestra los principales problemas por tipo, páginas con más problemas, problemas recientes y descartes recientes. Proporciona funcionalidad de exportación CSV para todos los datos.
/admin/reports/editoria11y/page
Ver todos los problemas de accesibilidad en una página específica con capacidad de navegar a la página o purgar sus resultados
/admin/reports/editoria11y/issue
Ver todas las páginas que contienen un tipo específico de problema de accesibilidad
/admin/reports/editoria11y/dismissals
Ver y gestionar todos los problemas de accesibilidad descartados en todo el sitio con filtrado por tipo de descarte y antigüedad
Permissions 5
Hooks 3
hook_page_attachments
Adjunta la biblioteca Editoria11y y la configuración a las páginas para usuarios con el permiso de visualización. Maneja la detección de rutas, la carga de descartes y la configuración de sincronización.
hook_entity_predelete
Limpia los resultados y descartes de Editoria11y cuando se eliminan entidades de contenido
hook_ckeditor5_plugin_info_alter
Modifica el plugin de tablas de CKEditor5 para establecer filas/columnas de encabezado predeterminadas cuando se insertan tablas
Troubleshooting 6
Limpie la caché de Drupal, verifique que el rol del usuario tenga el permiso 'Ver verificador Editoria11y', compruebe que ningún CSS esté ocultando el contenedor ed11y-element-panel (problemas de z-index o overflow:hidden), busque errores de JavaScript en la consola del navegador, y asegúrese de que la configuración 'Deshabilitar el escáner si...' no coincida con elementos en todas las páginas.
Verifique que la configuración 'Verificar contenido en estos contenedores' incluya su área de contenido. Muchos sitios necesitan 'main' en lugar de 'body'. Compruebe que la configuración 'Omitir estos elementos' no esté excluyendo su contenido. Las páginas de inicio y Views a menudo insertan contenido fuera del elemento main.
Los resultados solo se sincronizan al ver la ruta canónica de la entidad (por ejemplo, /node/123). Las páginas de edición, las vistas previas y las revisiones no sincronizan nuevos problemas. Verifique que la sincronización no esté deshabilitada en la configuración. Compruebe la consola del navegador para ver errores de API.
Agregue selectores CSS para elementos problemáticos (feeds sociales, widgets de terceros) a la configuración 'Omitir estos elementos'. Opcionalmente, agréguelos a 'Recordar al editor que el contenido en estos elementos incrustados necesita revisión manual' para marcarlos para verificación manual en su lugar.
Si su tema usa overflow:hidden en los contenedores, agregue esos selectores a 'Elementos con desbordamiento oculto'. Si el panel está cubierto por otros elementos, ajuste el z-index a través de CSS para #ed11y-panel o use la configuración 'No cubrir estos otros widgets'.
Las listas largas de selectores en 'Omitir estos elementos' pueden ralentizar el rendimiento ya que se verifican contra cada elemento. Los selectores de atributos ([aria-hidden]) son mucho más lentos que los selectores de clase/ID. Simplifique y acorte la lista de selectores.
Security Notes 6
- El permiso 'Administrar verificador Editoria11y' está marcado como acceso restringido y solo debe otorgarse a administradores de confianza
- El permiso 'Gestionar resultados de Editoria11y' permite ver todas las rutas y títulos de contenido del sitio en el panel de control
- Los endpoints de la API están protegidos por tokens CSRF y requieren autenticación
- El módulo valida todas las entradas de la API para prevenir ataques de inyección
- Las exportaciones CSV sanitizan las cadenas para prevenir ataques de inyección CSV
- La validación de rutas previene el informe de URLs inexistentes