accessibility-check

Accessibility Check

Thresholds

The same bar the frontend developer builds to (accessibility-basics, ui-quality-floor, responsive-mobile-first) — QA and developer share one bar, not a separate QA opinion:

• labels on every control, aria-label on icon-only buttons;
• visible focus on every interactive element;
• contrast ≥4.5:1 body text / ≥3:1 large text;
• touch targets ≥44px phone / ≥24px desktop;
• <input> font ≥16px on phone;
• exactly one <h1>, lang set on <html>, no user-scalable=no;
• a dialog traps focus while open, Escape closes it, focus returns to the trigger;
• submitting with errors moves focus to the first invalid field, which carries aria-invalid.

Scan (public pages)

QA=${TMPDIR:-/tmp}/tt-<task-key>/qa; mkdir -p "$QA"; node -v   # lighthouse@13 needs Node >=22, else lighthouse@12
CHROME_PATH="$CHROME_BIN" npx -y lighthouse@13 "http://localhost:5173/settings" \
  --only-categories=accessibility,best-practices --form-factor=mobile \
  --screenEmulation.mobile --screenEmulation.width=360 --screenEmulation.height=800 --screenEmulation.deviceScaleFactor=2 \
  --chrome-flags="--headless=new" --output=json --output-path="$QA/lh-settings-360.json" --quiet
jq -r '.audits|to_entries[]|select(.value.score==0)|"\(.key)\t\(.value.title)"' "$QA/lh-settings-360.json"  # no jq: node -e 'for (const [k,v] of Object.entries(require(process.argv[1]).audits)) if (v.score===0) console.log(k+"\t"+v.title)' "$QA/lh-settings-360.json"

Run with run_terminal timeout_seconds: 300. errors-in-console in the output doubles as the console check for page load.

Full axe (pages behind login, or when Lighthouse flags something)

Install playwright-core + @axe-core/playwright into $QA, never the workspace:

cd "$QA" && [ -d node_modules/@axe-core/playwright ] || npm i --no-audit --no-fund --silent [email protected] @axe-core/[email protected]
cat > axe.cjs <<'EOF'
const { chromium } = require('playwright-core');
const { AxeBuilder } = require('@axe-core/playwright');
(async () => {
  const [url, width = '360'] = process.argv.slice(2);
  const browser = await chromium.launch({ executablePath: process.env.CHROME_BIN });
  const page = await browser.newPage({ viewport: { width: Number(width), height: 800 } });
  await page.goto(url);
  const { violations } = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa']).analyze();
  for (const v of violations) console.log(`${v.impact}\t${v.id}\t${v.nodes.length}\t${v.nodes[0].target.join(' ')}`);
  console.log(`violations=${violations.length}`);
  await browser.close();
})();
EOF
node axe.cjs http://localhost:5173/settings 360