Instalar y configurar

Versiones preconfiguradas

Instalación personalizada

Para crear tu propia implementación, descarga una copia local (o haz referencia a una versión CDN) de un paquete de idioma, el archivo JS minificado y el archivo CSS minificado, y luego crea una nueva instancia de "Ed11y".

Para importaciones ESM/módulo JS:

Usa los archivos JavaScript .umd para navegadores y sistemas heredados:

Parámetros

Una implementación completa solo se ejecutará para editores con sesión iniciada (¡no querrás que los visitantes de tu sitio vean el verificador!), y puede sobreescribir cualquiera de los parámetros predeterminados.

Ten en cuenta que se proporcionan valores predeterminados para todos los parámetros; solo incluye los que quieras sobreescribir.

Una implementación muy personalizada podría verse así:

Las integraciones llave en mano a menudo establecen estas variables sobre la marcha; por ejemplo, cargando páginas en modo "assertive" cuando se han editado recientemente y volviendo a "polite" después de varios minutos.

Temas

Varios parámetros permiten seleccionar un tema, sobreescribir colores e inyectar CSS.

Solo incluye los parámetros que necesitas sobreescribir para facilitar las actualizaciones futuras.

Eventos JS útiles

Los desarrolladores de temas pueden engancharse a estos eventos para reaccionar y modificar la página según sea necesario.

En orden típico de aparición…

  • ed11yRunCustomTests: se emite cuando el objeto Results está listo para que se inyecten resultados personalizados. Ten en cuenta que el parámetro customTests debe establecerse en el número de funciones de prueba personalizadas que ejecutarás (…probablemente uno…) para que este evento se emita. Detalles en la sección siguiente.
  • ed11yResults: se emite cuando todas las verificaciones han finalizado. Las integraciones de API pueden ahora extraer datos del objeto Ed11y.results.
  • ed11yPanelOpened: se emite si el panel se abre, automática o manualmente.
  • ed11yShowHidden: proporciona un número data-ed11y-result y un booleano viaJump. Solo se emite si el parámetro "ed11yShowHidden" está configurado y el padre del elemento coincide con un selector. Se usa para revelar alertas en contenedores aún no abiertos, p. ej., acordeones, pestañas y carruseles. Ejemplos de uso en la sección siguiente.
  • ed11yPop: proporciona el ID de data-ed11y-result, así como referencias a los objetos result y tip. Se emite cuando aparece una información emergente, lo que te permite modificar los consejos en tiempo de ejecución.
  • ed11yShut: proporciona el ID de data-ed11y-result. Se emite cuando se cierra una información emergente.
  • ed11yDismissalUpdate: proporciona información extendida cuando un usuario descarta o restaura una alerta. Se usa para integraciones de API. El objeto de evento contiene:
    • dismissPage
    • dismissTest
    • dismissKey
    • dismissAction

En las secciones siguientes se pueden encontrar ejemplos.

Modificar los consejos

Si todo lo que quieres hacer es modificar el texto de un consejo, los elementos del objeto global ed11yLang.en (antes de llamar a la biblioteca) o Ed11y.M (después de llamar a la biblioteca) pueden sobreescribirse directamente. P. ej., en el módulo Drupal donde se creó un alias del paquete de idioma como Drupal.ed11yLang:

Drupal.ed11yLang.lang.testNames.title = "Please write shorter headings."

Esto se aplica a cualquiera de las claves predeterminadas en el archivo de localización o la traducción específica del idioma activo.

El módulo Drupal también añade enlaces de edición personalizados a los consejos, usando el parámetro editLinks. Nota "Page editor" y "Layout editor:"

Información emergente con los enlaces "Page editor" y "Layout editor" insertados.

Una versión simplificada del código que establece ese parámetro:

El módulo Drupal luego usa el evento ed11yPop para mostrar y ocultar dinámicamente el enlace de edición según el contexto cuando se muestran los consejos.

Este evento proporciona referencias a los objetos result y tip:

Pruebas personalizadas

Si el parámetro customTests es un número, Editoria11y emitirá un evento "ed11yRunCustomTests" durante la verificación y luego hará una pausa de hasta 500ms escuchando ese número de eventos "ed11yResume".

Esto puede aprovecharse para llamar a tantos scripts con pruebas personalizadas como desees, que pueden enviar sus resultados al array de resultados antes de que se dibujen los consejos.

Por ejemplo, si quisieras crear este consejo para marcar los enlaces pegados desde correos electrónicos con URLs ofuscadas:

Consejo que dice "URL está codificada como Safe Link"

Deberías:

  1. Añadir un listener para el evento ed11yRunCustomTests
  2. Encontrar los elementos coincidentes
  3. Definir el mensaje del consejo
  4. Emitir el evento "resume" para que Editoria11y dibuje el consejo:

Gestionar alertas en contenido oculto o con restricciones de tamaño

Muchos componentes interactivos (pestañas, deslizadores, acordeones) ocultan contenido. El panel de información de Editoria11y incluye botones siguiente/anterior para saltar directamente a los problemas. Si Editoria11y cree que la información emergente del problema está actualmente invisible, avisará al usuario de que algo va mal y luego resaltará el primer ancestro visible; por ejemplo, el div alrededor de un acordeón.

Lo ideal es que tu tema haga visibles esos elementos antes de que se ejecute la verificación de visibilidad de Editoria11y, para que todo funcione como por arte de magia para tus usuarios: los carruseles avanzan automáticamente y los acordeones se abren para mostrar el problema.

Para hacer esto cuando el panel se abre por primera vez (p. ej., desplegando todos los paneles del acordeón con problemas), añade un listener de eventos JS para ed11yPanelOpened, luego haz un querySelectorAll de los elementos ed11y-element-result relevantes y activa la función que usa tu tema para revelar esa parte de la página.

Aquí hay un ejemplo basado en jQuery. Cuando el panel se abre, deshabilita un menú fijo (para que los elementos no queden cubiertos) y luego busca cualquier elemento ed11y-element-result dentro de elementos de acordeón cerrados y simula un clic en su botón de conmutación:

Para revelar contenido solo al saltar a un consejo específico mediante el botón "siguiente" del panel (p. ej., en una pestaña cerrada o la siguiente diapositiva del carrusel), necesitarás establecer tanto hiddenHandlers con los selectores CSS relevantes como checkVisible en TRUE en tus parámetros. Luego añade un listener de eventos para el evento ed11yShowHidden. Este se lanza si Editoria11y reconoce que un consejo está dentro de un contenedor con uno de los selectores hiddenHandlers proporcionados en la lista de opciones. Este evento JS incluirá el ID del consejo que está a punto de abrir. Editoria11y hará entonces una breve pausa después de emitir este evento para dar tiempo a tu JS de hacer visible el elemento.

Aquí hay un ejemplo de una implementación de Penn State. Busca el elemento que coincide con el ID proporcionado, luego encuentra su contenedor de componente interactivo padre y activa su evento para activar su conmutador:

Última nota: algunos temas simplemente no son compatibles con la verificación de visibilidad; por ejemplo, el contenedor <main> tiene una altura de 0px. En esos sitios se debe deshabilitar toda la verificación de visibilidad estableciendo checkVisible en false.