Editoria11y para Drupal

Características principales

El módulo de Drupal conecta la biblioteca del verificador con el backend editorial, y añade numerosas herramientas del lado del servidor para informes, gobernanza y configuración

Editor de Drupal con consejos en línea
Los problemas se detectan tanto al cargar la página en el frontend como mientras se escribe en CKEditor y Gutenberg.
Información emergente que indica que el texto del enlace solo dice "haz clic aquí".
Las informaciones emergentes incorporan botones para ir al editor, ignorar la alerta (para el usuario activo) o marcarla como correcta (para todos los usuarios). Las alertas repetidas ofrecen acciones a nivel de página o de todo el sitio.
Interfaz del generador de pruebas personalizadas con campos para el título y contenido del consejo, así como selectores de elementos y exclusiones.

El submódulo CSA añade:

  • Un generador de pruebas personalizadas
  • Más de 40 pruebas para desarrolladores
  • Verificación de contraste
  • Rastreadores del sitio
  • Análisis de legibilidad
  • Configuraciones divididas para desarrolladores/editores
Panel de informes que muestra los problemas recientes y las páginas con más problemas.
Un panel de todo el sitio proporciona informes filtrables y exportables de alertas y descartes.

Instalación y pasos clave de configuración

El instalador incluido en Drupal.org incluye varios módulos:

  • Editoria11y: el verificador de contenido principal y el panel.
  • Editoria11y CSA: pruebas de desarrollador y herramientas de mantenimiento del panel.
  • Editoria11y Export: herramientas de informes en CSV.

Instálalo como cualquier otro módulo y luego sigue estos pasos clave:

  1. Verifica los permisos. Los autores de confianza deben tener los permisos "Marcar como correcto," "Marcar como ignorado" y "Ver el panel."
  2. Revisa las páginas clave en busca de alertas repetitivas o poco útiles. Márcalas como correctas en la información emergente o ajusta la configuración para ignorar elementos por selector.
  3. Busca consejos que sean difíciles de ver: fuera de pantalla, truncados, detrás de otros elementos o en elementos ocultos. Usa los consejos de "Corregir el posicionamiento de los consejos" a continuación para solucionarlo.
  4. Si el sitio ya tiene contenido y tienes una suscripción CSA, visita la pestaña "volver a verificar" del panel y rastrea el sitio para precargar los informes del sitio. Esto es opcional, pero las páginas antiguas no aparecerán en los informes hasta que sean rastreadas o visitadas por un usuario con sesión iniciada.

Ve una introducción en video a las opciones de configuración (v2.4).

Ocultar alertas innecesarias

Las buenas configuraciones suprimen las alertas innecesarias, para que los autores de contenido puedan centrarse en los problemas que deben corregir.

Aunque puedes desactivar las pruebas por completo, generalmente es mejor ocultar las alertas en elementos o páginas específicos.


Durante cada ejecución de prueba, Editoria11y recopila un único conjunto de elementos de la configuración "Verificar contenido en estos contenedores" y luego lo filtra varias veces. Así es como se ve una ejecución de prueba:

  1. Cancelar la verificación si la configuración impide la verificación en esta página o para este usuario.
  2. Recopilar elementos en las regiones de página especificadas, p. ej.:
    body > *:not('.ed11y-element')
    Para los usuarios de Editoria11y CSA, estas son las regiones en la pestaña de Pruebas de desarrollador.
  3. Eliminar los elementos que coinciden con los selectores de ignorar, p. ej.:
    .widgets, .utility-menu
    Para los usuarios de Editoria11y CSA, estos son los selectores en la pestaña de Pruebas de desarrollador.
  4. Ejecutar pruebas y sincronizar resultados con el panel.
  5. Si la configuración dividida está activa y el usuario es editor de contenido, filtrar los resultados del desarrollador:
    • Eliminar resultados de pruebas configuradas como "Solo para desarrollador".
    • Eliminar resultados sobre elementos fuera de las regiones de contenido especificadas, p. ej.:
      main, footer
    • Eliminar resultados sobre elementos que coincidan con los selectores de ignorar de contenido.
    Ten en cuenta que no hay una segunda fase de "recopilación". Las regiones de página del desarrollador deben incluir las regiones de contenido.
  6. Abrir el panel y mostrar las alertas si la configuración coincide con una configuración de apertura automática.

Descartar alertas

Las pruebas pueden configurarse en la biblioteca como errores o advertencias ("verificaciones manuales"). Las advertencias pueden descartarse. Hay dos tipos de descartes disponibles desde el pie de cada información emergente:

  • "Ignorar" se almacena como preferencia de usuario: la alerta ahora está oculta para el usuario actual, pero solo para ese usuario.
  • "Marcar como correcto" oculta la alerta para todos los usuarios.

La posibilidad de descartar alertas se controla a nivel de rol en los permisos de usuario de Drupal. La mayoría de los autores deben poder descartar alertas. No tiene sentido asignar una verificación manual a alguien si no puede marcar el elemento como verificado.

Ignorar elementos

¡Estas dos configuraciones son las más importantes!

Establece el primero para incluir cualquier parte del contenido de la página que los autores puedan editar. P. ej., si pueden editar el área de contenido main, .sidebar y .footer-column-two, establece esos selectores como tu área de verificación de contenido.

Usa el segundo para "eliminar" subsecciones. P. ej., si main contiene varios widgets e incrustaciones que solo los desarrolladores pueden modificar, enumera esos: .widget-1, .social-embed.

Si usas la configuración dividida, verás un par similar de configuraciones en la pestaña Pruebas de desarrollador:

Área de verificación del desarrollador

Lo más importante que debes saber sobre las áreas de verificación del desarrollador es que no son independientes de las áreas de verificación de contenido. En una configuración dividida, se verifican las áreas del desarrollador y luego esos resultados se filtran para que coincidan con las áreas de contenido. Las áreas excluidas para los desarrolladores también lo estarán para los editores de contenido. ¡No excluyas áreas de contenido editables!

Algunas pruebas permiten una configuración más precisa para ocultar solo ciertas alertas en los elementos afectados. Búscalas en:

  • Pruebas de contenido: Enlaces a verificar
  • Pruebas de contenido: Incrustaciones a verificar
  • Pruebas de contenido: Detección de contenido dinámico y shadow
  • Pruebas de desarrollador: Contraste

Ocultar para páginas o usuarios específicos

La forma más fácil de hacerlo es pasando clases o IDs de CSS a estas opciones:

La primera impedirá que se ejecuten las verificaciones y la barra de herramientas no se mostrará.

La segunda iniciará el verificador minimizado y marcará automáticamente (para el usuario actual) todos los problemas como "Ignorados," incluso si son errores. Esto permite que las pruebas se ejecuten y actualicen el panel sin molestar al usuario.

Si quieres usar esto para controlar qué usuarios ven el verificador, es posible que debas ajustar tu tema para que genere una clase, p. ej., .user-247.

Gestionar los resultados de todo el sitio

Rastreo y actualización de resultados

Editoria11y es una herramienta de monitoreo en tiempo real, no un rastreador. Sus informes de todo el sitio se actualizan cuando los autores visitan páginas, por lo que el rastreo regular generalmente no es necesario. El módulo CSA incluye un rastreador, pero solo debería ser necesario en estas tres situaciones:

  1. Al instalar Editoria11y por primera vez en un sitio existente con muchas páginas. Las páginas deben ser visitadas antes de aparecer en el panel, por lo que un rastreo inicial rápido ahorra tiempo.
  2. Las actualizaciones importantes de temas o módulos pueden corregir (o causar) problemas en muchas páginas que no aparecerán hasta que sean visitadas o rastreadas.
  3. Las acciones masivas en la interfaz de administración, como eliminar páginas o redireccionamientos, tienden a dejar resultados de páginas que ya no existen o que se han movido. En estos casos, es útil usar las acciones de mantenimiento de la pestaña "Actualizar" para actualizar las URLs de las páginas y detectar y eliminar las páginas borradas.

Durante el rastreo, ningún dato sale de tu sitio. El rastreador CSA no es una herramienta en la nube; usa tu navegador para cargar y verificar las páginas de tu propio sitio. La desventaja de este enfoque es que los navegadores pausan las pestañas en segundo plano. Deberás mantener tu computadora encendida y activa durante el rastreo. Planea abrir una nueva ventana para el rastreador y dejarla como la pestaña en primer plano de esa ventana mientras trabaja. Puedes seguir trabajando en otra ventana. El rastreador actualizará su estimación después de cada lote de páginas.

Ver informes

  • Recientes permite explorar por alertas individuales. Esto te permite, por ejemplo, filtrar para encontrar todas las instancias del mismo tipo de alerta, ver qué alertas aparecen con frecuencia en el contenido reciente, o qué autores siguen cometiendo el mismo error.
  • Páginas muestra el recuento de alertas por página, agrupadas por página. Esto te permite encontrar las páginas con más problemas y filtrar por atributos de página como el tipo de contenido y el estado de publicación.
  • Alertas muestra los problemas por tipo.
  • Descartes permite monitorear si los autores están descartando correctamente y tiene botones de "restablecer" para restaurar las alertas descartadas.
  • Exportar contiene versiones de los informes de Páginas, Alertas y Descartes que se pueden filtrar para preparar descargas en CSV. Proporcionado por el submódulo de Exportación CSV
  • Actualizar contiene herramientas de mantenimiento del panel para eliminar alertas de páginas borradas, eliminar alertas de pseudopáginas parametrizadas como /search?query=ejemplo, actualizar los títulos y URLs de páginas almacenados y ejecutar un rastreo manual. Proporcionado por el submódulo CSA

Corregir consejos ocultos o fuera de pantalla

El módulo proporciona campos para dos de las opciones de configuración de la biblioteca para cambiar cómo se ubican los consejos:

Algunos temas tienen columnas o widgets que ocultan el desbordamiento horizontal o vertical. La biblioteca detecta automáticamente cuando un indicador de alerta caería fuera de la parte visible de la página. Indicar a la biblioteca que ciertos contenedores ocultan el desbordamiento significa que también intentará posicionar los consejos para los elementos de esos contenedores dentro de sus bordes.

Algunos temas tienen widgets que activan la visibilidad del contenido, como acordeones, pestañas y presentaciones de diapositivas. Los consejos dentro de estos elementos también estarán ocultos. Proporcionar una lista de selectores para estos widgets significa que Editoria11y hará una breve pausa cuando un usuario intente ir a esos consejos usando el botón siguiente o anterior. Los temas y módulos de Drupal pueden entonces seguir las instrucciones de la sección de la biblioteca sobre cómo tratar los consejos en contenido oculto para revelar el contenido oculto.

Escribe tu propia configuración

En PHP: el módulo Drupal proporciona un hook_editoria11y_alter_config para cambiar el contenido de drupalSettings.editoria11y en un módulo o tema. Por ejemplo:

Modificar drupalSettings solo ayuda si el JS del módulo ya está configurado para pasar ese valor a la biblioteca. Para añadir parámetros adicionales, necesitas modificar el objeto JS options directamente. El módulo verifica una variable JS global de editoria11yOptionsOverride. Si está configurada, pasará el objeto options a una función editoria11yOptions que hayas proporcionado en tu módulo o tema. Ahora puedes establecer cualquiera de los parámetros de la biblioteca.

Escribe tus propias pruebas

Primero, en la configuración del módulo, añade 1 a las opciones de "Pruebas personalizadas" para que sepa que debe esperar las pruebas.

Luego crea una biblioteca JS de Drupal con tus pruebas en tu tema o módulo, usando la guía de la biblioteca para escribir pruebas personalizadas.

Aquí hay un ejemplo funcional de Princeton, de una prueba personalizada para alertar sobre Safe Links. Ten en cuenta que accede a la clase Editoria11y a través de Drupal.Ed11y.

Obtener ayuda

Consulta la página de contacto para ver las opciones de soporte comunitario. @itmaybejj suele estar disponible en el Slack de Drupal siempre que el sol esté arriba en el hemisferio occidental.

La mayoría de los niveles de contribución CSA incluyen una reunión anual, que puede incluir asistencia directa con la instalación y configuración