Accessibility & Standards

draft

WCAG 2.2 (POUR, A/AA/AAA) with 18 AUTO checks and exact thresholds, ARIA/accname, Microsoft Inclusive Design, COGA, ISO 9241-110.

Scope: machine-checkable a11yergonomics criteria for grounding an AUTO-tier UI score, plus the irreducible judgment set. Primary frame = WCAG 2.2 (W3C Recommendation, 5 Oct 2023), supported by WAI-ARIA, Microsoft Inclusive Design, COGA, ISO 9241. Measurability tags: [AUTO] = decidable from DOM / CSS / computed-style / rendered pixels by axe-coreLighthouse-style rules; [SEMI] = partially automatable, residual judgment; [AI/HUMAN] = needs review.

1. WCAG 2.2 structure — POUR + conformance

POUR principles (the 4 top-level buckets every criterion hangs under):

  • Perceivable — information/UI must be presentable in ways users can perceive (text alternatives, contrast, adaptable layout).
  • Operable — UI and navigation must be operable (keyboard, timing, no seizures, navigable, input modalities).
  • Understandable — information and operation must be understandable (readable, predictable, input assistance).
  • Robust — content must be robust enough for assistive tech / future agents (parsing, name-role-value).

Conformance levels (cumulative): A (minimum / essential), AA (the de-facto legal/regulatory target — EN 301 549, ADA, Section 508, EAA all reference AA), AAA (enhanced; W3C states AAA is not required as blanket policy because not all content can meet it). A page conforms at a level only if all criteria at that level (and below) are met, for full pages and full processes.

WCAG 2.2 added 9 new SC over 2.1 and removed 4.1.1 Parsing (obsolete — now always satisfied). New in 2.2: 2.4.11 Focus Not Obscured (Min, AA), 2.4.12 Focus Not Obscured (Enh, AAA), 2.4.13 Focus Appearance (AAA), 2.5.7 Dragging Movements (AA), 2.5.8 Target Size (Min, AA), 3.2.6 Consistent Help (A), 3.3.7 Redundant Entry (A), 3.3.8 Accessible Authentication (Min, AA), 3.3.9 Accessible Authentication (Enh, AAA).

2. Notable success criteria — exact thresholds + measurability

Perceivable — contrast & visual

SC Name Level Exact threshold Tag
1.4.3 Contrast (Minimum) AA Textimages-of-text ≥ 4.5:1; large text ≥ 3:1. Large = ≥18pt (24px) regular or ≥14pt (18.66px) bold. Incidentaldisabled/logo text exempt. [AUTO] for solid bg; [SEMI] over gradientsimagestransparency
1.4.6 Contrast (Enhanced) AAA Text ≥ 7:1; large text ≥ 4.5:1. [AUTO]/[SEMI] same caveat
1.4.11 Non-text Contrast AA UI components (boundaries needed to identify), states (focus/checked), and graphical objects required to understand content: ≥ 3:1 against adjacent colors. [SEMI] — "which graphics are essential" is judgment; component-state contrast partly [AUTO]
1.4.10 Reflow AA No 2-D scroll at 320 CSS px width (= 1280px @ 400% zoom) for vertical content, or 256 CSS px height for horizontal. No loss of content/function. [AUTO] via headless viewport probe + scrollbar/overflow detection
1.4.12 Text Spacing AA No content/function loss when user sets: line-height ≥1.5× font size; paragraph spacing ≥2×; letter-spacing ≥0.12×; word-spacing ≥0.16×. [AUTO] — inject the spec stylesheet, assert no clipping/overlap
1.4.4 Resize Text AA Text resizable to 200% without loss of content/function. [SEMI]
1.4.1 Use of Color A Color not the sole means of conveying info. [AI/HUMAN] (semantic)
1.1.1 Non-text Content A All non-text has text alternative (alt, aria-label, etc.). Presence is [AUTO]; correctness/quality of the alt text is [AI/HUMAN]. [SEMI]

Operable — keyboard, focus, target, motion

SC Name Level Exact threshold Tag
2.1.1 Keyboard A All functionality operable via keyboard, no per-key timing. [SEMI] — focusability/tab-order [AUTO]; "all functionality" needs flow review
2.1.2 No Keyboard Trap A Focus can move away by keyboard. [SEMI] (headless tab-walk detects most traps)
2.4.7 Focus Visible AA Keyboard focus indicator is visible (any visible indicator). [SEMI] — presence of :focus/:focus-visible style detectable [AUTO]; "actually visible" partly judgment
2.4.11 Focus Not Obscured (Min) AA When focused, the component is not entirely hidden by author content. [SEMI] — geometric overlap test
2.4.12 Focus Not Obscured (Enh) AAA No part of focused component hidden by author content. [SEMI]
2.4.13 Focus Appearance AAA Focus indicator area ≥ area of a 2 CSS px thick perimeter of the component (rect w×h ⇒ 4w+4h px²), and ≥ 3:1 contrast between focused vs unfocused pixels. [SEMI] — computable from rendered pixels but needs render diff
2.5.5 Target Size (Enhanced) AAA Pointer target ≥ 44 × 44 CSS px (exceptions: inline, equivalent control, essential). [AUTO] via bounding-box
2.5.8 Target Size (Minimum) AA Target ≥ 24 × 24 CSS px; or if smaller, 24px-diameter spacing circle doesn't overlap neighbors (undersized 20×20 passes with ≥4px gap). Exceptions: inline/text, UA-default, essential, equivalent. [AUTO] via bounding-box + neighbor spacing
2.5.7 Dragging Movements AA Any drag operation has a single-pointer non-drag alternative. [AI/HUMAN]
2.3.1 Three Flashes / Below Threshold A No content flashes > 3 times/sec (or below general/red flash thresholds). [SEMI] (frame analysis)
2.3.3 Animation from Interactions AAA Motion animation triggered by interaction can be disabled unless essential (respect prefers-reduced-motion). [AUTO] — assert media query honored: no non-essential transform/animation when prefers-reduced-motion: reduce
2.2.1 / 2.2.2 Timing Adjustable / Pause-Stop-Hide A Time limits adjustable; auto-movingblinking >5s can be pausedstopped/hidden. [SEMI]

Understandable — input assistance, predictability

SC Name Level Exact threshold Tag
3.3.1 Error Identification A Input errors identified in text, and the erroring item described. [SEMI] — presence of aria-invalid + text message [AUTO]; adequacy [AI/HUMAN]
3.3.2 Labels or Instructions A Labels/instructions provided when content requires user input. [SEMI] — every input has programmatic label [AUTO]; sufficiency [AI/HUMAN]
3.3.3 Error Suggestion AA If a fix is known, suggest the correction (unless it risks security). [AI/HUMAN]
3.3.4 / 3.3.6 Error Prevention (legal/financial; all) AA/AAA Submissions reversible / checked / confirmed. [AI/HUMAN]
3.2.3 Consistent Navigation AA Repeated navigation occurs in the same relative order across pages. [SEMI] — cross-page DOM order diff
3.2.4 Consistent Identification AA Same-function components identified consistently (labels/names). [SEMI]
3.2.6 Consistent Help A Help mechanism appears in same relative order across pages. [SEMI]
3.3.7 Redundant Entry A Don't re-ask info already entered in same process (auto-populate/select). [AI/HUMAN]
3.3.8 Accessible Authentication (Min) AA No cognitive function test (e.g., transcribing, puzzles) for any auth step unless alternative/mechanism exists (password managers must work; copy-paste allowed). [SEMI] — detect blocked paste/autocomplete [AUTO]
3.1.1 Language of Page A <html lang> set to a valid language. [AUTO]
3.2.1 / 3.2.2 On Focus / On Input A No unexpected context change on focus or input. [SEMI]

Robust — programmatic semantics

SC Name Level Exact threshold Tag
4.1.2 Name, Role, Value A For every UI component: name + role programmatically determinable; statesvaluesproperties set and changes notified to AT. [AUTO] — core axe-coreARIA checks (missing role, missing accessible name, invalid ARIA attrvalue)
4.1.3 Status Messages AA Status messages exposed via roleproperty (aria-live, `role=statusalert`) without focus. [SEMI]
4.1.1 Parsing — Removed in WCAG 2.2 (always satisfied). n/a

3. WAI-ARIA — roles, states, properties, name computation

WAI-ARIA (W3C, current 1.2; 1.3 in draft) supplies the semantics layer behind 4.1.2 / 4.1.3.

  • Roles — widget (button, checkbox, tab, slider, menuitem), composite (tablist, grid, tree, combobox), document-structure (article, heading, list), and landmark roles (banner, navigation, main, complementary, contentinfo, search, form, region). Landmarks map to HTML5 sectioning (<nav>→navigation, <main>→main, etc.).
  • States/properties — aria-checked, aria-expanded, aria-selected, aria-disabled, aria-hidden, aria-current, aria-invalid, aria-required, aria-pressed, aria-busy. States change at runtime; properties are mostly static.
  • First Rule of ARIA: use native HTML element with built-in semantics before adding ARIA. No ARIA is better than bad ARIA.
  • Accessible Name & Description Computation (accname 1.2) — deterministic precedence: aria-labelledby → aria-label → native (<label>, alt, <caption>, title/<legend>) → contents (for name-from-content roles) → title attribute fallback. [AUTO] — fully specified algorithm; the empty-accessible-name check is the single highest-yield automated rule.
  • Machine-checkable ARIA rules [AUTO]: valid role token; required ownedparent roles present (e.g., tab inside tablist); required states (aria-checked on checkbox); no abstract roles; no invalidmisspelled aria-* attribute; allowed value enums; no aria-hidden="true" on focusable element. (These are exactly axe-core's ARIA ruleset.)

4. Microsoft Inclusive Design

Three principles (the Microsoft Inclusive Design toolkit):

  1. Recognize exclusion — bias/mismatch designs out people; exclusion is a designed outcome, not an edge case.
  2. Solve for one, extend to many — designing for a constraint (the "persona spectrum") benefits everyone ("curb-cut effect").
  3. Learn from diversity — people adapt; design with, not just for.

Persona spectrum — permanent / temporary / situational disability framing (the core idea for an index because it expands "who benefits"):

  • e.g. touch/one-arm: permanent = limb difference; temporary = arm injury; situational = holding a baby.
  • e.g. vision: permanent = blind; temporary = cataract; situational = bright sunlight / glare.
  • e.g. hearing: permanent = Deaf; temporary = ear infection; situational = noisy bar.

Implication for scoring: large targets (2.5.52.5.8), high contrast (1.4.31.4.11), reduced-motion (2.3.3), and keyboard/voice operability serve the situational majority, so their AUTO checks proxy broad ergonomic quality, not just edge-case compliance.

5. Cognitive accessibility (COGA)

W3C Making Content Usable for People with Cognitive and Learning Disabilities + the emerging WCAG 3 work. Mostly [AI/HUMAN], but a few proxies are computable:

  • Plain language / readability — short sentences, common words. [SEMI] via readability scores (Flesch-Kincaid grade, sentence length) — heuristic, not normative.
  • Clear, consistent structure & navigation (maps to 3.2.33.2.43.2.6).
  • Reduce memory load / Redundant Entry (3.3.7), Accessible Authentication (3.3.8 — no memory/transcription puzzles): partially [AUTO].
  • Support undo / forgive errors, avoid distraction (overlaps 2.3.3 reduced motion [AUTO], 2.2.2 pause/stop [SEMI]).
  • Manageable chunks, clear instructions, predictable behavior — [AI/HUMAN].

6. ISO 9241 ergonomics

ISO 9241 = "Ergonomics of human-system interaction" (multipart). Relevant parts:

  • 9241-110:2020 — Interaction principles (7 dialogueinteraction principles; the index can score these as ergonomic heuristics, all *AIHUMAN]*but each has computable proxies):
    1. Suitability for the task — supports task without unnecessary effort. (proxy: # steps/clicks to complete)
    2. Self-descriptiveness — each step comprehensible via feedback or on request. (proxy: presence of labels/help — 3.3.2)
    3. Conformity with user expectations — consistency w/ conventions. (proxy: 3.2.3/3.2.4)
    4. Learnability (suitability for learning).
    5. Controllability — user controls pace/sequence (incl. undo). (proxy: 2.2.1 timing, pause)
    6. Use error robustness (error tolerance) — preventrecover from errors. *(proxy: 3.3.13.3.3)*
    7. User engagement (2020 revision; replaced older "suitability for individualisation/learning" split, which also still appear).
  • 9241-210 — human-centred design process for interactive systems.
  • 9241-112 — principles for the presentation of information.
  • 9241-11 — definition of usability = effectiveness + efficiency + satisfaction in a context of use (the canonical 3-axis usability definition).
  • 9241-3/-300 series — visual display ergonomics (legibility, luminance) — hardware-era, mostly superseded by WCAG contrast for software.

7. Machine-checkable a11y shortlist (AUTO tier)

These are decidable headless from DOM + computed-style + rendered pixels, with hard thresholds. Ordered roughly by yield/reliability. (★ = already shipped in axe-core / Lighthouse.)

# Check Threshold (PASS) Source SC Signal
1 Text contrast ★ ≥ 4.5:1 normal, ≥ 3:1 large (≥24px / ≥18.66px-bold) 1.4.3 solid-bg reliable; flag gradient/img as SEMI
2 Accessible name present ★ every interactive el (buttonlinkinput/img) has non-empty computed name 4.1.2, 1.1.1 accname algo
3 Valid ARIA ★ role token valid; no invalid aria-*; values in enum; required states present; required owner/parent present 4.1.2 axe ARIA ruleset
4 aria-hidden not on focusable ★ no focusable descendant under aria-hidden=true 4.1.2 DOM
5 Form control has label ★ every input/select/textarea programmatically labeled 3.3.2, 1.3.1, 4.1.2 DOM
6 Target size (min) ≥ 24×24 CSS px, or ≥24px spacing (undersized ≥20×20 + ≥4px gap) 2.5.8 bounding-box + neighbors
7 Target size (enhanced) ≥ 44×44 CSS px 2.5.5 (AAA) bounding-box
8 Non-text/UI contrast UI boundaries & meaningful graphics ≥ 3:1 1.4.11 SEMI (essential-graphic selection)
9 Focus indicator exists ★ focusable els have a non-suppressed :focus/:focus-visible style; no blanket outline:0 without replacement 2.4.7 computed-style
10 Focus appearance size+contrast indicator ≥ 4w+4h px² area; ≥ 3:1 focused-vs-unfocused 2.4.13 (AAA) render diff (SEMI)
11 Reflow no horizontal scroll at 320 CSS px (vertical content) 1.4.10 viewport probe
12 Text spacing tolerant inject 1.520.120.16 stylesheet ⇒ no clippingoverlap 1.4.12 overflow assert
13 Reduced motion honored prefers-reduced-motion: reduce ⇒ no non-essential animation/transform 2.3.3 (AAA) CSS media query
14 Page language ★ <html lang> present + valid BCP-47 3.1.1 DOM
15 Landmarks/heading order ★ one main; no skipped heading levels; landmarks present 1.3.1, 2.4 DOM
16 Keyboard focusability & no trap all interactive els tabbable; tab-walk escapes every container 2.1.1, 2.1.2 headless tab simulation
17 Auth: paste/autocomplete allowed password fields not blocking paste/autocomplete 3.3.8 DOM/event
18 Status messages live-regioned dynamic status uses role=status/alert/aria-live 4.1.3 DOM mutation watch

Suggested AUTO sub-score weighting note: treat 1–5 (contrast, name, ARIA, label) as the high-confidence core; 6–13 as solid geometricCSS checks; 14–18 as structural. Each is a booleanratio per element ⇒ aggregate to a coverage % (passing nodes / applicable nodes).

8. Needs AI / human judgment (not AUTO)

  • Quality of text alternatives, labels, error messages (1.1.1, 3.3.2, 3.3.1, 3.3.3) — presence is AUTO, meaningfulness is not.
  • Use of color as sole indicator (1.4.1) — semantic.
  • All-functionality keyboard operability & logical focus order beyond mere tabbability (2.1.1, 2.4.3).
  • Dragging alternative (2.5.7), Redundant entry (3.3.7), Error prevention for legalfinancial (3.3.43.3.6).
  • Consistent identification / predictable behavior semantics (3.2.x) — cross-page diffing helps but naming-equivalence is judgment.
  • COGA: plain-language adequacy, cognitive load, distraction, learnability.
  • ISO 9241-110 dialogue principles and 9241-11 satisfaction — inherently evaluative; computable proxies (step counts, readability, consistency diffs) inform but don't decide.
  • Contrast over gradients, images, transparency, video — sampling/worst-case needed (SEMI→HUMAN).

Tooling reality check: axe-core / Lighthouse / IBM Equal Access automate only ~30–50% of WCAG SC; the rest is SEMIHUMAN. The shortlist above is essentially the automatable frontier — good for an AUTO index tier, but a complete UI-quality index must reserve an AIHUMAN tier for the items in §8.

Sources