pour-engine 1.29.0 → 1.31.0

package/README.md

@@ -21,10 +21,6 @@ can verify are returned as a `manualReview` checklist instead of being
 silently skipped, and findings the engine can't judge conclusively land in
 `incomplete` rather than being guessed at.
 
-An experimental WCAG 3.0 draft mode (`engine/wcag30-draft.js`) reframes
-results against the draft's guidelines — clearly stamped as a draft, because
-no tool can honestly claim conformance to an unfinished standard.
-
 ## Getting started
 
 ```sh
@@ -39,7 +35,6 @@ const results = await run(document, {
   // optional: filter rules by tag. Tags are cumulative — WCAG 2.2 AA means
   // every A/AA rule from 2.0 through 2.2. Omit to run everything.
   tags: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22a', 'wcag22aa'],
-  // standard: 'wcag30-draft', // optional: experimental WCAG 3.0 draft mode
 });
 
 console.log(results.violations, results.passes, results.incomplete);
@@ -89,7 +84,7 @@ static HTML strings. For Node-based testing, drive it through a real browser
   (`1.1.1-image-alt.js`), plus the catalog index.
 - `engine/lib/` — shared helpers: DOM traversal, accessible-name
   computation, contrast math, role model.
-- `engine/wcag22.js`, `engine/wcag30-draft.js` — the WCAG catalogs.
+- `engine/wcag22.js` — the WCAG catalog.
 - `config/project.config.js` — package-local stand-in for the pour
   monorepo's project config (engine name + version only).
 

package/config/project.config.js

@@ -6,6 +6,6 @@
 export default {
   engine: {
     name: 'pour engine',
-    version: '1.29.0',
+    version: '1.31.0',
   },
 };

package/engine/index.js

@@ -4,7 +4,6 @@
 import config from '../config/project.config.js';
 import rules from './rules/index.js';
 import wcagCatalog from './wcag22.js';
-import wcag30Draft from './wcag30-draft.js';
 import { isVisible, isRendered, cssPath, htmlSnippet, ownText, collectRoots } from './lib/dom.js';
 import { accessibleName } from './lib/accessible-name.js';
 import { resetAuditCaches } from './lib/contrast.js';
@@ -79,16 +78,11 @@ function toResultNode(element, outcome) {
 /**
  * Run the audit.
  * @param {Document|Element} context - what to scan
- * @param {{ tags?: string[], exclude?: string, standard?: string, signal?: AbortSignal }} options -
+ * @param {{ tags?: string[], exclude?: string, signal?: AbortSignal }} options -
  *   rule selection by tag (wcag2a…wcag22aa, best-practice), empty selects
  *   every rule; exclude is a CSS selector — elements matching it, or inside
  *   a match (including across shadow boundaries), are left out of every
- *   rule; standard 'wcag30-draft' reframes the report against the WCAG 3.0
- *   Working Draft (results.standard is stamped draft, the manual checklist
- *   becomes the draft guidelines, and each rule result carries the draft
- *   guideline it maps to) — the rules themselves stay WCAG 2.x, which is
- *   the only honest claim a tool can make about a draft;
- *   signal aborts the run between rules (throws AbortError)
+ *   rule; signal aborts the run between rules (throws AbortError)
  * @param {(progress: object) => void} [onProgress] - called before each rule
  *   starts ({rule, running}), during a rule at each renderer yield with a
  *   fractional done (completed rules + this rule's evaluated-element share,
@@ -97,17 +91,15 @@ function toResultNode(element, outcome) {
  */
 export async function run(context = document, options = {}, onProgress) {
   const auditStarted = performance.now();
-  const draft30 = options.standard === 'wcag30-draft';
   const results = {
     testEngine: { name, version },
     timestamp: new Date().toISOString(),
     url: context.location?.href ?? context.ownerDocument?.location?.href ?? '',
-    standard: draft30 ? wcag30Draft.draftInfo : null,
     violations: [],
     passes: [],
     incomplete: [],
     inapplicable: [],
-    manualReview: draft30 ? wcag30Draft.manualReviewChecklist() : manualReviewCriteria(options.tags),
+    manualReview: manualReviewCriteria(options.tags),
     ruleTimings: [],
   };
 
@@ -223,17 +215,15 @@ export async function run(context = document, options = {}, onProgress) {
 
     const ruleResult = {
       id: rule.id,
+      // Human display name ("Form field labels"); the id stays the
+      // machine handle everywhere (selectors, exports, docs anchors).
+      name: rule.name ?? rule.id,
       impact: rule.impact,
       tags: rule.tags,
       help: rule.help,
       description: rule.help,
       helpUrl: rule.helpUrl,
     };
-    if (draft30) {
-      // Which draft guideline this 2.x rule speaks to (null for rules with
-      // no draft counterpart, e.g. best-practice extras).
-      ruleResult.wcag30 = wcag30Draft.guidelineForTags(rule.tags);
-    }
     if (!elements.length) results.inapplicable.push({ ...ruleResult, nodes: [] });
     if (buckets.fail.length) results.violations.push({ ...ruleResult, nodes: buckets.fail });
     if (buckets.incomplete.length) results.incomplete.push({ ...ruleResult, nodes: buckets.incomplete });
@@ -252,6 +242,15 @@ export async function run(context = document, options = {}, onProgress) {
       ms,
       counts: { ...liveCounts },
       typeCounts: { ...liveTypeCounts },
+      // The completed rule's actual findings, so a UI can BUILD its list
+      // as rules finish rather than delivering everything at the end.
+      // Present only when the rule found something.
+      ...(buckets.fail.length || buckets.incomplete.length ? {
+        findings: {
+          ...(buckets.fail.length ? { violation: { ...ruleResult, nodes: buckets.fail } } : {}),
+          ...(buckets.incomplete.length ? { incomplete: { ...ruleResult, nodes: buckets.incomplete } } : {}),
+        },
+      } : {}),
     });
   }
 

package/engine/rules/best-practice/accesskeys.js

@@ -1,5 +1,6 @@
 export default {
   id: 'accesskeys',
+  name: 'Duplicate access keys',
   impact: 'serious',
   tags: ['best-practice'],
   help: 'The same accesskey must not be assigned twice',

package/engine/rules/best-practice/button-type.js

@@ -1,5 +1,6 @@
 export default {
   id: 'button-type',
+  name: 'Button types in forms',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'Buttons inside forms should declare their type',

package/engine/rules/best-practice/empty-heading.js

@@ -1,5 +1,6 @@
 export default {
   id: 'empty-heading',
+  name: 'Empty headings',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'Headings must contain text',

package/engine/rules/best-practice/fieldset-legend.js

@@ -3,6 +3,7 @@
 import { labelledByName } from '../../lib/accessible-name.js';
 export default {
   id: 'fieldset-legend',
+  name: 'Grouped field labels',
   impact: 'moderate',
   tags: ['best-practice'],
   help: 'Radio and checkbox groups should be grouped with a label',

package/engine/rules/best-practice/heading-order.js

@@ -1,10 +1,24 @@
+import { effectiveRole } from '../../lib/roles.js';
+
 const level = (el) =>
   el.hasAttribute('aria-level')
     ? parseInt(el.getAttribute('aria-level'), 10)
     : parseInt(el.tagName[1], 10) || 2; // role="heading" without aria-level defaults to 2
 
+// An honoured presentational role (or any other role override, e.g. role="tab")
+// removes the element from the page's heading outline: Chromium exposes no
+// heading node for <h3 role="none">, so it can neither skip a level nor set
+// the level the next heading is judged against. A null effective role means an
+// unknown explicit role, which browsers ignore in favour of the implicit one —
+// still a heading for everything this selector matches.
+const inOutline = (el) => {
+  const role = effectiveRole(el);
+  return role === 'heading' || role === null;
+};
+
 export default {
   id: 'heading-order',
+  name: 'Heading order',
   impact: 'moderate',
   tags: ['best-practice'],
   help: 'Headings should step down one level at a time',
@@ -14,6 +28,7 @@ export default {
   evaluateAll(elements) {
     let previous = 0;
     return elements.map((element) => {
+      if (!inOutline(element)) return { status: 'pass' };
       const current = level(element);
       const skipped = previous > 0 && current > previous + 1;
       const outcome = skipped

package/engine/rules/best-practice/landmark-one-main.js

@@ -1,5 +1,8 @@
+import { collectRoots } from '../../lib/dom.js';
+
 export default {
   id: 'landmark-one-main',
+  name: 'One main landmark',
   impact: 'moderate',
   tags: ['best-practice'],
   help: 'The page should have exactly one main landmark',
@@ -8,8 +11,14 @@ export default {
   visibleOnly: false,
   evaluate(element, { isVisible }) {
     // Hidden mains (responsive/SPA double-renders kept display:none) are
-    // not exposed and must not count as duplicates.
-    const count = [...element.ownerDocument.querySelectorAll('main, [role="main"]')].filter(isVisible).length;
+    // not exposed and must not count as duplicates. The count spans every
+    // open shadow root: a web-component SPA whose only <main> renders
+    // inside its app shell's shadow tree HAS a main (measured on a live
+    // archive home, where the light-DOM-only count reported a false
+    // "no main" on a page whose shadow main is plainly exposed).
+    const count = collectRoots(element.ownerDocument)
+      .flatMap((root) => [...root.querySelectorAll('main, [role="main"]')])
+      .filter(isVisible).length;
     if (count === 1) return { status: 'pass' };
     return {
       status: 'fail',

package/engine/rules/best-practice/landmark-top-level.js

@@ -1,5 +1,8 @@
-// ARIA APG landmark pattern: banner, main, and contentinfo are page-level
-// regions — nesting them inside other landmarks breaks the page outline.
+// ARIA APG landmark pattern: banner, main, contentinfo and complementary
+// are page-level regions — nesting them inside other landmarks breaks the
+// page outline. Complementary joins via the aside demotion semantics in
+// lib/roles.js: only an aside that actually reaches the accessibility tree
+// as complementary owes top-levelness.
 import { implicitRole } from '../../lib/roles.js';
 
 const LANDMARK_ROLES = new Set([
@@ -22,11 +25,12 @@ function landmarkAncestor(element) {
 
 export default {
   id: 'landmark-top-level',
+  name: 'Top-level landmarks',
   impact: 'moderate',
   tags: ['best-practice'],
-  help: 'banner, main and contentinfo landmarks must be top level',
+  help: 'banner, main, contentinfo and complementary landmarks must be top level',
   helpUrl: 'https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/',
-  selector: 'header, footer, main, [role="banner"], [role="contentinfo"], [role="main"]',
+  selector: 'header, footer, main, aside, [role="banner"], [role="contentinfo"], [role="main"], [role="complementary"]',
   evaluate(element) {
     const tag = element.tagName.toLowerCase();
     // <header>/<footer> inside sectioning content are not landmarks at all.
@@ -34,9 +38,20 @@ export default {
         element.closest('article, aside, main, nav, section')) {
       return { status: 'pass' };
     }
+    // An <aside> is complementary only when implicitRole says so: unnamed
+    // inside sectioning content it is generic (Chromium exposes NO
+    // complementary node for a news home full of related-content asides,
+    // measured live) — there is no landmark to be top level. An aside
+    // directly inside <main> is NOT demoted (main is not sectioning
+    // content), so an ad-slot aside nested in main is a real finding.
+    if (tag === 'aside' && !element.hasAttribute('role') &&
+        implicitRole(element) !== 'complementary') {
+      return { status: 'pass' };
+    }
     const container = landmarkAncestor(element);
     if (!container) return { status: 'pass' };
-    const role = element.getAttribute('role') ?? { header: 'banner', footer: 'contentinfo', main: 'main' }[tag];
+    const role = element.getAttribute('role') ??
+      { header: 'banner', footer: 'contentinfo', main: 'main', aside: 'complementary' }[tag];
     return {
       status: 'fail',
       message: `This ${role} landmark is nested inside a ${container.role} landmark (<${container.element.tagName.toLowerCase()}>) — page-level regions lose their meaning when nested.`,

package/engine/rules/best-practice/landmark-unique.js

@@ -22,6 +22,7 @@ const landmarkName = (element) =>
 
 export default {
   id: 'landmark-unique',
+  name: 'Distinguishable landmarks',
   impact: 'moderate',
   tags: ['best-practice'],
   help: 'Landmarks of the same type need distinguishing labels',

package/engine/rules/best-practice/multiple-labels.js

@@ -5,6 +5,7 @@
 // pair usually reads better as label + aria-describedby.
 export default {
   id: 'multiple-labels',
+  name: 'Multiple labels',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'Form fields should not have multiple labels',

package/engine/rules/best-practice/new-window-link.js

@@ -4,6 +4,7 @@ const MENTIONS_NEW_WINDOW = /new (window|tab)|opens? in/i;
 
 export default {
   id: 'new-window-link',
+  name: 'New-window warnings',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'Links opening a new window should say so',

package/engine/rules/best-practice/no-autofocus.js

@@ -1,5 +1,6 @@
 export default {
   id: 'no-autofocus',
+  name: 'Autofocus on load',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'autofocus disorients assistive-technology users',

package/engine/rules/best-practice/page-heading-one.js

@@ -1,5 +1,6 @@
 export default {
   id: 'page-heading-one',
+  name: 'Leading page heading',
   impact: 'moderate',
   tags: ['best-practice'],
   help: 'Every page should start its outline with an <h1>',

package/engine/rules/best-practice/positive-tabindex.js

@@ -1,5 +1,6 @@
 export default {
   id: 'positive-tabindex',
+  name: 'Positive tabindex',
   impact: 'serious',
   tags: ['best-practice'],
   help: 'Positive tabindex values disrupt the natural focus order',

package/engine/rules/best-practice/redundant-alt-phrase.js

@@ -5,6 +5,7 @@ const REDUNDANT_PHRASE = /^(image|picture|graphic|icon)\b( of\b)?/i;
 
 export default {
   id: 'redundant-alt-phrase',
+  name: 'Redundant alt phrasing',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'alt text should not start with "image of" or similar',

package/engine/rules/best-practice/redundant-aria-label.js

@@ -11,6 +11,7 @@ const NAME_FROM_CONTENT = new Set(['button', 'link', 'menuitem', 'menuitemcheckb
 
 export default {
   id: 'redundant-aria-label',
+  name: 'Redundant aria-label',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'aria-label should not repeat the visible text',

package/engine/rules/best-practice/redundant-aria.js

@@ -10,6 +10,7 @@ const NATIVE_PAIRS = [
 
 export default {
   id: 'redundant-aria',
+  name: 'Redundant ARIA attributes',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'aria attributes should not duplicate native HTML attributes',

package/engine/rules/best-practice/redundant-image-alt.js

@@ -1,20 +1,64 @@
+// The question this rule answers: does the image's text alternative
+// duplicate text the control ALREADY announces beside it? Both halves of
+// that must be measured in accname terms, not raw DOM text:
+//  - The comparison text is the container's AT-exposed text (aria-hidden,
+//    hidden, display:none and visibility:hidden subtrees never reach the
+//    name — a display:none "Search" span does not make the alt redundant,
+//    it makes the alt the button's ONLY name, and advising alt="" there
+//    would delete it. Measured on a live banking home + Chromium AX tree.)
+//  - The alternative is alt when present, else title: HTML-AAM's fallback
+//    chain names an alt-less image from its title, so a card thumbnail
+//    whose title repeats the headline doubles the link name just the same
+//    (measured on a live news home where every card did exactly this).
+const HIDDEN_TAGS = new Set(['script', 'style', 'noscript', 'template']);
+
+/** The container's name-contributing text EXCLUDING image alternatives:
+ *  mirrors the accname content walk's hidden-content rules. */
+function exposedText(root) {
+  let text = '';
+  for (const node of root.childNodes) {
+    if (node.nodeType === Node.TEXT_NODE) { text += node.textContent; continue; }
+    if (node.nodeType !== Node.ELEMENT_NODE) continue;
+    const tag = node.tagName.toLowerCase();
+    if (HIDDEN_TAGS.has(tag) || tag === 'img' || tag === 'area' || tag === 'svg') continue;
+    if (node.getAttribute('aria-hidden') === 'true' || node.hasAttribute('hidden')) continue;
+    const style = getComputedStyle(node);
+    if (style.display === 'none' || style.visibility === 'hidden') continue;
+    text += exposedText(node);
+  }
+  return text;
+}
+
+const norm = (s) => (s ?? '').replace(/\s+/g, ' ').trim().toLowerCase();
+
 export default {
   id: 'redundant-image-alt',
+  name: 'Redundant image alt',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'Image alt should not repeat adjacent link or button text',
   helpUrl: 'https://www.w3.org/WAI/tutorials/images/functional/',
-  selector: 'a[href] img[alt], button img[alt]',
+  selector: 'a[href] img[alt], button img[alt], a[href] img[title]:not([alt]), button img[title]:not([alt])',
   evaluate(element) {
-    const alt = element.getAttribute('alt').replace(/\s+/g, ' ').trim().toLowerCase();
-    if (!alt) return { status: 'pass' };
+    const alt = element.getAttribute('alt');
+    const usesTitle = alt === null;
+    const alternative = norm(usesTitle ? element.getAttribute('title') : alt);
+    if (!alternative) return { status: 'pass' };
     const container = element.closest('a[href], button');
-    const text = container.textContent.replace(/\s+/g, ' ').trim().toLowerCase();
-    if (alt !== text) return { status: 'pass' };
+    const text = norm(exposedText(container));
+    // No exposed text: the image's alternative is the control's only name.
+    // Nothing is announced twice — and removing it would unname the control.
+    if (!text) return { status: 'pass' };
+    if (alternative !== text) return { status: 'pass' };
+    const kind = container.tagName === 'A' ? 'link' : 'button';
     return {
       status: 'fail',
-      message: `The image alt repeats the ${container.tagName === 'A' ? 'link' : 'button'} text — screen readers announce "${element.getAttribute('alt')}" twice.`,
-      fix: 'Use alt="" on the image; the visible text already names the control.',
+      message: usesTitle
+        ? `The image title repeats the ${kind} text — the title names the image, so screen readers announce "${element.getAttribute('title')}" twice.`
+        : `The image alt repeats the ${kind} text — screen readers announce "${element.getAttribute('alt')}" twice.`,
+      fix: usesTitle
+        ? 'Add alt="" to the image (and drop the title if it is not needed as a tooltip); the visible text already names the control.'
+        : 'Use alt="" on the image; the visible text already names the control.',
     };
   },
 };

package/engine/rules/best-practice/redundant-role.js

@@ -28,6 +28,7 @@ function implicitRole(element) {
 
 export default {
   id: 'redundant-role',
+  name: 'Redundant roles',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'role attributes should not repeat the element’s built-in role',

package/engine/rules/best-practice/redundant-tabindex.js

@@ -1,5 +1,6 @@
 export default {
   id: 'redundant-tabindex',
+  name: 'Redundant tabindex',
   impact: 'minor',
   tags: ['best-practice'],
   help: 'tabindex="0" is unnecessary on natively focusable elements',

package/engine/rules/best-practice/region.js

@@ -1,11 +1,21 @@
+// header/footer are banner/contentinfo ONLY outside sectioning content
+// (HTML-AAM; mirrored from lib/roles.js implicitRole): a footer buried in an
+// <article> is generic, so treating it as a landmark hid its stray content.
+// Divs do NOT demote — a header wrapped in plain divs is still a banner.
+// role="alertdialog" joins dialog: both are modal containers whose content
+// region navigation reaches through the dialog itself, and consent banners
+// (measured on a live news home) are exactly this shape.
 const LANDMARK =
-  'main, nav, header, footer, aside, form[aria-label], form[aria-labelledby], ' +
+  'main, nav, aside, form[aria-label], form[aria-labelledby], ' +
+  'header:not(:is(article, aside, main, nav, section) header), ' +
+  'footer:not(:is(article, aside, main, nav, section) footer), ' +
   'section[aria-label], section[aria-labelledby], [role="main"], [role="navigation"], ' +
   '[role="banner"], [role="contentinfo"], [role="complementary"], [role="region"], ' +
-  '[role="search"], [role="form"], [role="dialog"]';
+  '[role="search"], [role="form"], [role="dialog"], [role="alertdialog"]';
 
 export default {
   id: 'region',
+  name: 'Content outside landmarks',
   impact: 'moderate',
   tags: ['best-practice'],
   help: 'All readable content belongs inside a landmark region',
@@ -28,8 +38,12 @@ export default {
     // Any perceivable content counts, not just text — but only content in
     // the accessibility tree: decorative images (alt="", presentation) and
     // unnamed inline svg are invisible to AT, so they can't be "unreachable".
+    // Bare form controls belong here too: an input has no text of its own,
+    // yet it is exactly the content a region-navigating user needs to reach
+    // (a booking form outside every landmark was invisible to this rule).
     const isMedia = element.matches(
-      'img:not([alt=""]):not([role="presentation"]):not([role="none"]), svg[role="img"], video, audio, canvas, iframe',
+      'img:not([alt=""]):not([role="presentation"]):not([role="none"]), svg[role="img"], video, audio, canvas, iframe, ' +
+        'input:not([type="hidden"]), select, textarea, button',
     );
     if (!ownText(element) && !isMedia) return { status: 'pass' };
     if (element.closest(LANDMARK)) return { status: 'pass' };

package/engine/rules/wcag/1.1.1-area-alt.js

@@ -1,6 +1,7 @@
 // WCAG SC 1.1.1 Non-text Content (Level A) · SC 2.4.4 Link Purpose (In Context) (Level A)
 export default {
   id: 'area-alt',
+  name: 'Image map alt text',
   impact: 'critical',
   tags: ['wcag2a', 'wcag111', 'wcag244'],
   help: 'Image map areas must have alternative text',

package/engine/rules/wcag/1.1.1-canvas-alt.js

@@ -15,6 +15,7 @@
 // matters.
 export default {
   id: 'canvas-alt',
+  name: 'Canvas accessible name',
   impact: 'moderate',
   tags: ['wcag2a', 'wcag111'],
   help: 'Meaningful <canvas> graphics need an accessible name or fallback',

package/engine/rules/wcag/1.1.1-embed-alt.js

@@ -11,6 +11,7 @@
 // is, but no criterion provably fails.
 export default {
   id: 'embed-alt',
+  name: 'Embed accessible name',
   impact: 'serious',
   tags: ['wcag2a', 'wcag111'],
   help: '<embed> needs an accessible name',

package/engine/rules/wcag/1.1.1-image-alt.js

@@ -10,6 +10,7 @@ const GENERIC_ALT = /^(image|img|photo|photograph|picture|graphic|icon|untitled|
 
 export default {
   id: 'image-alt',
+  name: 'Image alt text',
   impact: 'critical',
   tags: ['wcag2a', 'wcag111'],
   help: 'Every <img> needs a text alternative',

package/engine/rules/wcag/1.1.1-input-image-alt.js

@@ -1,6 +1,7 @@
 // WCAG SC 1.1.1 Non-text Content (Level A) · SC 4.1.2 Name, Role, Value (Level A)
 export default {
   id: 'input-image-alt',
+  name: 'Image button alt text',
   impact: 'critical',
   tags: ['wcag2a', 'wcag111', 'wcag412'],
   help: 'Image inputs need alt text describing their action',

package/engine/rules/wcag/1.1.1-object-alt.js

@@ -1,6 +1,7 @@
 // WCAG SC 1.1.1 Non-text Content (Level A)
 export default {
   id: 'object-alt',
+  name: 'Object alt text',
   impact: 'serious',
   tags: ['wcag2a', 'wcag111'],
   help: '<object> embeds must have a text alternative',

package/engine/rules/wcag/1.1.1-svg-img-alt.js

@@ -3,6 +3,7 @@ import { labelledByName } from '../../lib/accessible-name.js';
 
 export default {
   id: 'svg-img-alt',
+  name: 'SVG accessible name',
   impact: 'serious',
   tags: ['wcag2a', 'wcag111'],
   help: 'Inline SVG and role="img" graphics need an accessible name',

package/engine/rules/wcag/1.2.2-media-captions.js

@@ -1,6 +1,7 @@
 // WCAG SC 1.2.2 Captions (Prerecorded) (Level A)
 export default {
   id: 'media-captions',
+  name: 'Video captions',
   impact: 'critical',
   tags: ['wcag2a', 'wcag122'],
   help: 'Video content must have captions',
@@ -21,17 +22,23 @@ export default {
     if (!element.currentSrc && !element.getAttribute('src') && !element.querySelector('source')) {
       return { status: 'pass' };
     }
-    // The decorative no-audio-path signature — the same boundary
-    // video-loop-motion draws for 2.2.2: muted, autoplaying, no controls.
-    // With no controls there is no user path to unmute, so whatever audio
-    // the file may carry is never presented to anyone; audio that cannot be
+    // The decorative no-audio-path signature: muted with no controls. With
+    // no controls there is no user path to unmute, so whatever audio the
+    // file may carry is never presented to anyone; audio that cannot be
     // presented is not audio content under 1.2.2, and asking a human to
     // verify captions for it is noise (measured on the benchmark corpus:
     // our own site's aria-hidden hero loops, ffprobe-confirmed to carry no
     // audio stream, plus the same family on four news/university homes).
+    // HOW playback starts is deliberately not part of the signature: an
+    // earlier autoplay condition missed the two other members of the same
+    // family, measured on our own site — a crossfade B-roll take that only
+    // ever plays via script (no autoplay attribute, so the review fired
+    // exactly when the script had wired its src), and heroes whose
+    // autoplay attribute a reduced-motion handler removes. Muteness and
+    // controls decide whether audio can reach anyone; autoplay never did.
     // Properties, not attributes: script-muted heroes count too. A muted
     // video WITH controls keeps its review — one click unmutes it.
-    if (element.muted && element.autoplay && !element.controls) {
+    if (element.muted && !element.controls) {
       return { status: 'pass' };
     }
     // Captions may be burned in or provided by the player — a human must check.

package/engine/rules/wcag/1.3.1-aria-required-children.js

@@ -47,6 +47,7 @@ function candidateDescendants(element) {
 
 export default {
   id: 'aria-required-children',
+  name: 'Required ARIA children',
   impact: 'critical',
   tags: ['wcag2a', 'wcag131'],
   help: 'Composite ARIA roles must contain their required children',

package/engine/rules/wcag/1.3.1-aria-required-parent.js

@@ -20,6 +20,7 @@ const IMPLICIT_CONTAINER = { ul: 'list', ol: 'list', menu: 'list', table: 'table
 
 export default {
   id: 'aria-required-parent',
+  name: 'Required ARIA parent',
   impact: 'critical',
   tags: ['wcag2a', 'wcag131'],
   help: 'ARIA child roles must be inside their required container role',

package/engine/rules/wcag/1.3.1-definition-list.js

@@ -3,6 +3,7 @@ const ALLOWED = new Set(['DT', 'DD', 'DIV', 'SCRIPT', 'TEMPLATE']);
 
 export default {
   id: 'definition-list',
+  name: 'Definition list structure',
   impact: 'serious',
   tags: ['wcag2a', 'wcag131'],
   help: '<dl> must be structured as term/description pairs',

package/engine/rules/wcag/1.3.1-dlitem-parent.js

@@ -1,6 +1,7 @@
 // WCAG SC 1.3.1 Info and Relationships (Level A)
 export default {
   id: 'dlitem-parent',
+  name: 'Definition item placement',
   impact: 'serious',
   tags: ['wcag2a', 'wcag131'],
   help: '<dt> and <dd> must be inside a <dl>',

package/engine/rules/wcag/1.3.1-form-label.js

@@ -6,6 +6,7 @@ import { labelledByName } from '../../lib/accessible-name.js';
 
 export default {
   id: 'form-label',
+  name: 'Form field labels',
   impact: 'critical',
   tags: ['wcag2a', 'wcag131', 'wcag332', 'wcag412'],
   help: 'Every form field needs a label',

package/engine/rules/wcag/1.3.1-list-structure.js

@@ -8,6 +8,7 @@ const ITEM_ROLES = ['listitem', 'presentation', 'none'];
 
 export default {
   id: 'list-structure',
+  name: 'List structure',
   impact: 'serious',
   tags: ['wcag2a', 'wcag131'],
   help: 'Lists must only contain list items',

package/engine/rules/wcag/1.3.1-listitem-parent.js

@@ -1,6 +1,7 @@
 // WCAG SC 1.3.1 Info and Relationships (Level A)
 export default {
   id: 'listitem-parent',
+  name: 'List item placement',
   impact: 'serious',
   tags: ['wcag2a', 'wcag131'],
   help: '<li> must be inside a list',