accessibility-checks

Accessibility checks — WCAG 2.2 AA, measured in a real browser

Accessibility is a MEASURED property of the rendered DOM, never a source-reading guess. aria-label in JSX proves nothing if the runtime node is display:none, the contrast ratio is 3.9:1, or the tap target renders at 32px. This skill runs the audit against the LIVE page with omp's native browser tool and cites the number for every verdict. "looks accessible" is BANNED — every row carries a measured value or it is CANT-VERIFY.

Setup

1. git diff --name-only → identify the changed route/component. Read its DESIGN.md (tokens/tone) if present.
2. Start the dev server on its own port; wait for a stable anchor before probing (a cold compile is not "down").
3. browser action open the changed route. Then drive every check with action run + tab.evaluate.
4. All snippets below run inside tab.evaluate(() => { ... }) and RETURN a JSON value — that returned value is the evidence you cite.

1. Semantic structure — landmarks + heading order (WCAG 1.3.1, 2.4.6)

tab.evaluate(() => {
  const landmarks = [...document.querySelectorAll('header,nav,main,aside,footer,[role="banner"],[role="navigation"],[role="main"],[role="contentinfo"]')].map(e => e.tagName+ (e.getAttribute('role')?`[${e.getAttribute('role')}]`:''));
  const headings = [...document.querySelectorAll('h1,h2,h3,h4,h5,h6')].map(h => ({ lvl:+h.tagName[1], text:h.textContent.trim().slice(0,40) }));
  return { mainCount: document.querySelectorAll('main,[role=main]').length, landmarks, headings };
})

FAIL if: mainCount !== 1; no h1; heading levels skip (h2→h4). Cite the actual level sequence.

2. Keyboard nav + focus order + visible focus ring (WCAG 2.1.1, 2.4.3, 2.4.7)

• Enumerate the tab order and confirm it follows DOM/visual order (no positive tabindex reordering surprises):

tab.evaluate(() => [...document.querySelectorAll('a[href],button,input,select,textarea,[tabindex]')]
  .filter(e => !e.disabled && e.offsetParent !== null)
  .map(e => ({ tag:e.tagName, ti:e.tabIndex, label:(e.textContent||e.value||e.ariaLabel||'').trim().slice(0,30) })))

FAIL if any positive tabIndex > 0 (manual reorder trap), or a control is reachable by mouse but absent from this list.

• Visible focus ring — focus each interactive node and read :focus-visible computed style; a ring is only real if outline-width/box-shadow actually changes on focus:

tab.evaluate(() => {
  const el = document.querySelector('button');           // repeat per control class
  el.focus();
  const s = getComputedStyle(el);
  return { outlineWidth:s.outlineWidth, outlineStyle:s.outlineStyle, boxShadow:s.boxShadow };
})

FAIL if focused control shows outline-style:none AND no distinguishing box-shadow (invisible focus). outline:0 with no replacement = FAIL.