RGAA Scripts Accessibility Audit (Theme 7)

Audits a web page against the 5 criteria of RGAA v4.1.2 Theme 7: Scripts.

Audit procedure

Step 1: Gather interactive component data

(() => {
  const components = [];

  // ARIA widgets
  const ariaRoles = ['button','tab','tabpanel','tablist','dialog','alertdialog','menu',
    'menuitem','menubar','listbox','option','combobox','slider','spinbutton',
    'progressbar','tooltip','tree','treeitem','grid','gridcell','switch',
    'checkbox','radio','radiogroup','accordion','alert','status','log','marquee','timer'];

  ariaRoles.forEach(role => {
    document.querySelectorAll(`[role="${role}"]`).forEach(el => {
      components.push({
        tag: el.tagName.toLowerCase(),
        role: role,
        ariaLabel: el.getAttribute('aria-label'),
        ariaLabelledby: el.getAttribute('aria-labelledby'),
        ariaDescribedby: el.getAttribute('aria-describedby'),
        ariaExpanded: el.getAttribute('aria-expanded'),
        ariaSelected: el.getAttribute('aria-selected'),
        ariaChecked: el.getAttribute('aria-checked'),
        ariaHidden: el.getAttribute('aria-hidden'),
        ariaLive: el.getAttribute('aria-live'),
        ariaDisabled: el.getAttribute('aria-disabled'),
        tabindex: el.getAttribute('tabindex'),
        hasOnclick: !!el.getAttribute('onclick') || el.tagName === 'DIV' || el.tagName === 'SPAN',
        text: el.textContent.trim().substring(0, 60)
      });
    });
  });

  // Clickable non-interactive elements (potential issues)
  const clickables = [];
  document.querySelectorAll('div[onclick], span[onclick], div[tabindex], span[tabindex]').forEach(el => {
    if (!el.getAttribute('role')) {
      clickables.push({
        tag: el.tagName.toLowerCase(),
        tabindex: el.getAttribute('tabindex'),
        role: el.getAttribute('role'),
        text: el.textContent.trim().substring(0, 60),
        hasKeyHandler: !!(el.getAttribute('onkeydown') || el.getAttribute('onkeypress') || el.getAttribute('onkeyup'))
      });
    }
  });

  // Live regions
  const liveRegions = [];
  document.querySelectorAll('[aria-live], [role="alert"], [role="status"], [role="log"], [role="marquee"], [role="timer"]').forEach(el => {
    liveRegions.push({
      tag: el.tagName.toLowerCase(),
      role: el.getAttribute('role'),
      ariaLive: el.getAttribute('aria-live'),
      ariaAtomic: el.getAttribute('aria-atomic'),
      ariaRelevant: el.getAttribute('aria-relevant'),
      text: el.textContent.trim().substring(0, 80)
    });
  });

  return JSON.stringify({
    ariaComponents: components.slice(0, 40),
    clickableNonInteractive: clickables.slice(0, 20),
    liveRegions: liveRegions
  }, null, 2);
})()