Accessibility — Weblisk

ARIA Announcements

Screen reader announcements via ARIA live region.

No announcements yet

import { enhance } from 'weblisk';
import { announce } from 'weblisk/a11y/aria.js';

enhance('#demo-announce', (el, { $ }) => {
  const output = $('#output-announce');
  const btn = $('#btn-announce');
  let count = 0;

  btn.addEventListener('click', () => {
    count++;
    const msg = `Announcement #${count}: Hello from Weblisk!`;
    announce(msg);
    output.textContent = `📢 Announced: "${msg}"`;
  });
});

Focus Management

Focus trap + roving tabindex. Click "Open Trap" then Tab to cycle.

<button class="btn btn-sm" id="btn-focus-trap">Open Focus Trap</button>
<div id="focus-trap-target" hidden>
  <button class="btn btn-sm">Button A</button>
  <button class="btn btn-sm">Button B</button>
  <button class="btn btn-sm">Button C</button>
  <button class="btn btn-sm" id="btn-focus-release">✕ Close</button>
</div>

import { enhance } from 'weblisk';
import { focusTrap } from 'weblisk/a11y/focus.js';

enhance('#demo-focus', (el, { $ }) => {
  const btn = $('#btn-focus-trap');
  const target = $('#focus-trap-target');
  const releaseBtn = $('#btn-focus-release');

  const trap = focusTrap(target);

  btn.addEventListener('click', () => {
    target.hidden = false;
    target.style.display = 'flex';
    trap.activate();
  });

  releaseBtn.addEventListener('click', () => {
    trap.deactivate();
    target.hidden = true;
  });
});

Reduced Motion

Detects prefers-reduced-motion. Toggle in OS settings to see it change live.

Checking...

import { effect } from 'weblisk';
import { motionReduced } from 'weblisk/a11y/motion.js';

effect(() => {
  const reduced = motionReduced();
  console.log('prefers-reduced-motion:', reduced);
  // Conditionally disable animations
});