JavaScript público

API de Ally

Inicializa componentes, ejecuta auditorías y controla patrones interactivos sin depender de un framework de aplicación.

Métodos principales

HTML
Ally.init();
Ally.scan(document.body);
Ally.scan('.selector');
Ally.report();

Ally.debug.open();
Ally.debug.close();
Ally.debug.rescan();

Ally.components.modal.open('#mi-modal');
Ally.components.modal.close('#mi-modal');

Configuración

HTML
window.AllyConfig = {
  debug: true,
  scanOnLoad: true,
  scoreThreshold: 90,
  rules: {
    headings: true,
    images: true,
    svg: true,
    forms: true,
    buttons: true,
    links: true,
    aria: true,
    landmarks: true,
    focus: true,
    components: true
  }
};

Ally.scan(document.body);
Ally.report();
Ally.debug.open();

Declara window.AllyConfig antes de cargar el script para modificar el comportamiento inicial.

Control de componentes

NamespaceUso
Ally.components.modalAbrir o cerrar diálogos.
Ally.components.tabsInicializar y seleccionar pestañas.
Ally.components.carouselCambiar, pausar o reproducir slides.
Ally.components.toastCrear notificaciones accesibles.
Ally.components.calendarNavegar y seleccionar fechas.
Ally.components.chatAbrir, cerrar y agregar mensajes.

Eventos

Los componentes emiten eventos personalizados con prefijo ally: para integrar lógica externa sin modificar el núcleo.

HTML
document.addEventListener('ally:initialized', (event) => {
  console.log(event.detail.root);
});

document.addEventListener('ally:modal:open', (event) => {
  console.log('Modal abierto', event.target);
});

document.addEventListener('ally:filter:change', (event) => {
  console.log(event.detail.values);
});

ES Modules

HTML
import Ally, {{ Modal, Audit }} from './dist/ally.esm.js';\n\nAlly.init();\nModal.open('#mi-modal');\nAudit.scan(document.body);