DOMAIN:ACCESSIBILITY:WCAG_2_2

OWNER: julian ALSO_USED_BY: alexander, floris, floor, antje UPDATED: 2026-03-26 SCOPE: WCAG 2.2 AA requirements mapped to development tasks, with focus on new 2.2 criteria STANDARD: W3C Web Content Accessibility Guidelines 2.2 (October 5, 2023) LEVEL: AA (GE's minimum conformance target for all client projects)

---

WCAG_2_2:OVERVIEW

WHAT: WCAG 2.2 extends WCAG 2.1 with 9 new success criteria NEW_AT_A: 2 criteria (Consistent Help, Redundant Entry) NEW_AT_AA: 4 criteria (Focus Not Obscured, Dragging Movements, Target Size Minimum, Accessible Authentication) NEW_AT_AAA: 3 criteria (Focus Not Obscured Enhanced, Focus Appearance, Accessible Authentication Enhanced) REMOVED: 4.1.1 Parsing — removed in WCAG 2.2 (no longer relevant with modern HTML parsers)

LEGAL_STATUS: WCAG 2.1 AA is current EN 301 549 baseline LEGAL_STATUS: EN 301 549 v4.1.1 will adopt WCAG 2.2 — expected 2026 GE_POLICY: implement WCAG 2.2 AA NOW — do not wait for regulatory update REASON: stronger compliance posture, better user experience, avoids future retrofit cost

---

WCAG_2_2:NEW_CRITERIA — LEVEL A

3.2.6 CONSISTENT_HELP (A)

REQUIREMENT: if a help mechanism exists on multiple pages, it must appear in the same relative location on each page APPLIES_TO: contact information, chat widgets, FAQ links, help buttons, phone numbers

DEV_TASK: place help components in consistent position across all page templates DEV_TASK: if help appears in header on one page, it must appear in header on ALL pages DEV_TASK: help mechanism order must be consistent (e.g., FAQ then chat then phone — same order everywhere)

WHAT_COUNTS_AS_HELP: - human contact details (phone, email) - automated contact mechanism (chatbot, contact form) - self-help option (FAQ, knowledge base link) - fully automated contact (callback request)

TESTING: navigate 5+ pages — verify help mechanism is in same location and same order TESTING: resize to mobile — verify help mechanism remains consistent

COMMON_MISTAKE: footer help on desktop, floating button on mobile — this is inconsistent COMMON_MISTAKE: help link in main nav on most pages but moved to sidebar on settings page

---

3.3.7 REDUNDANT_ENTRY (A)

REQUIREMENT: information previously entered by the user in the same process must be auto-populated or selectable APPLIES_TO: multi-step forms, checkout flows, registration processes

DEV_TASK: auto-populate fields from earlier steps (billing address → shipping address) DEV_TASK: provide "same as above" checkbox for repeated information DEV_TASK: persist user input across steps — do not clear on back navigation DEV_TASK: use autocomplete attributes on all form fields

EXCEPTIONS: - re-entering information is essential for security (password confirmation) - previously entered information is no longer valid - information was not entered by the user (server-generated values)

TESTING: complete a multi-step form — verify no field asks for previously provided data TESTING: navigate back and forward — verify data persists TESTING: check "same as billing" type shortcuts exist where applicable

COMMON_MISTAKE: asking for email twice in a registration flow COMMON_MISTAKE: requiring name entry on every page of a wizard COMMON_MISTAKE: clearing form data on browser back button

---

WCAG_2_2:NEW_CRITERIA — LEVEL AA

2.4.11 FOCUS_NOT_OBSCURED_MINIMUM (AA)

REQUIREMENT: when an element receives keyboard focus, it must not be entirely hidden by author-created content APPLIES_TO: sticky headers, fixed footers, cookie banners, floating chat widgets, bottom navigation bars

DEV_TASK: audit all sticky/fixed positioned elements for focus occlusion DEV_TASK: add scroll-padding-top/bottom to account for sticky elements DEV_TASK: ensure modals and overlays do not cover focused elements outside the modal DEV_TASK: test with keyboard — tab through entire page and verify focus is never completely hidden

IMPLEMENTATION:

/* Account for sticky header */
html {
  scroll-padding-top: 80px; /* height of sticky header */
  scroll-padding-bottom: 60px; /* height of fixed footer */
}

CRITICAL: "not entirely hidden" means at least part of the focus indicator must be visible NOTE: 2.4.12 (AAA) requires the element to be FULLY visible — GE targets this as stretch goal

TESTING: tab through all interactive elements TESTING: verify focus is visible when sticky header/footer is present TESTING: verify focus is visible behind cookie consent banners TESTING: verify focus is visible with floating action buttons

COMMON_MISTAKE: sticky header covers focused element below it COMMON_MISTAKE: cookie banner covers focused link at bottom of page COMMON_MISTAKE: chat widget overlays focused form field

---

2.5.7 DRAGGING_MOVEMENTS (AA)

REQUIREMENT: all drag-and-drop functionality must have a single-pointer alternative that does not require dragging APPLIES_TO: kanban boards, sortable lists, sliders, map interactions, file upload areas, image croppers

DEV_TASK: for every drag interaction, provide a click/tap alternative DEV_TASK: sortable lists — add "move up" / "move down" buttons DEV_TASK: sliders — ensure clickable track, add +/- buttons, accept direct value input DEV_TASK: map panning — provide pan buttons or allow click-to-center DEV_TASK: kanban boards — add "move to column" dropdown/button per card DEV_TASK: file upload — always include a file picker button alongside drag area DEV_TASK: image croppers — provide numeric input for crop dimensions

PATTERN — SORTABLE_LIST:

<li>
  <span>Item content</span>
  <button aria-label="Move item up">↑</button>
  <button aria-label="Move item down">↓</button>
</li>

PATTERN — SLIDER_WITH_ALTERNATIVE:

<input type="range" min="0" max="100" value="50"
       aria-label="Volume">
<input type="number" min="0" max="100" value="50"
       aria-label="Volume (numeric input)">

EXCEPTION: dragging is essential to the functionality (e.g., freehand drawing app) EXCEPTION: functionality is controlled by the user agent (browser native scrollbar)

TESTING: disable mouse drag — can all actions still be completed? TESTING: use keyboard only — verify all sorting, sliding, and positioning works TESTING: use touch without dragging — verify single-tap alternatives exist

COMMON_MISTAKE: drag-and-drop kanban with no alternative COMMON_MISTAKE: range slider with no visible value or numeric input COMMON_MISTAKE: sortable table rows that only work via drag

---

2.5.8 TARGET_SIZE_MINIMUM (AA)

REQUIREMENT: pointer input targets must be at least 24x24 CSS pixels PREVIOUSLY: 2.5.5 Target Size was AAA only (44x44 CSS pixels) — 2.5.8 brings a minimum to AA

DEV_TASK: audit all clickable/tappable elements for 24x24 minimum DEV_TASK: use padding to increase target area (not just visual size) DEV_TASK: icon buttons without text are highest risk — explicitly size them DEV_TASK: inline links in text paragraphs are exempt (see exceptions)

EXCEPTIONS: - spacing: targets smaller than 24x24 are allowed if they have sufficient spacing (24px circle around target has no other target) - inline: target is in a sentence or block of text (inline links) - user agent: target size is determined by the browser, not the author (checkboxes, radio buttons — but custom implementations must meet 24x24) - essential: a specific presentation is essential to the information being conveyed - equivalent: another control on the same page meets 24x24 for the same function

IMPLEMENTATION:

/* Ensure minimum target size */
button, a, [role="button"], input[type="checkbox"],
input[type="radio"], select {
  min-width: 24px;
  min-height: 24px;
}

/* Icon buttons need explicit sizing */
.icon-button {
  min-width: 44px; /* GE standard: exceed minimum */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

GE_STANDARD: target 44x44 CSS pixels for touch interfaces (exceeds AA minimum) REASON: 24px is the legal minimum, 44px is the usability standard

TESTING: use browser developer tools to measure target areas TESTING: on mobile devices, attempt to tap small targets accurately TESTING: verify spacing between adjacent targets

COMMON_MISTAKE: icon-only buttons at 16x16 pixels COMMON_MISTAKE: close (×) buttons too small COMMON_MISTAKE: table row action buttons cramped together

---

3.3.8 ACCESSIBLE_AUTHENTICATION_MINIMUM (AA)

REQUIREMENT: no cognitive function test required for any step of authentication COGNITIVE_FUNCTION_TEST: memorization, transcription, recognition, puzzle solving, calculation APPLIES_TO: login forms, two-factor authentication, account recovery

DEV_TASK: allow password managers to fill credentials (no blocking autocomplete) DEV_TASK: allow copy-paste into password fields DEV_TASK: support passkeys/WebAuthn as primary authentication DEV_TASK: if CAPTCHA is needed, provide an alternative (audio, logic-free, or reCAPTCHA v3) DEV_TASK: if 2FA uses a code, allow paste into code input fields DEV_TASK: never require users to retype/transcribe information

WHAT_IS_ALLOWED: - username + password (if password manager can fill it) - biometric authentication (fingerprint, face) - passkeys / WebAuthn - email magic link - SMS/push notification confirmation - object recognition (select all images with cats) — ONLY if alternative exists

WHAT_IS_PROHIBITED: - CAPTCHA with no alternative - password field blocking paste - requiring user to remember and type a code displayed on another page - requiring user to retype email or password without autocomplete support

GE_STANDARD: passkey/WebAuthn as primary, email magic link as fallback GE_STANDARD: never block autocomplete on authentication fields GE_STANDARD: never block paste on any input field

IMPLEMENTATION:

<!-- Allow password manager -->
<input type="email" autocomplete="email" name="email">
<input type="password" autocomplete="current-password" name="password">

<!-- 2FA code — allow paste -->
<input type="text" autocomplete="one-time-code" inputmode="numeric"
       name="otp" aria-label="Verification code">

TESTING: verify password manager can fill login form TESTING: verify paste works in all authentication fields TESTING: verify no cognitive test is required without alternative TESTING: verify magic link or biometric option exists

NOTE: 3.3.9 (AAA enhanced) prohibits ALL object recognition and personal content recognition — GE targets this as stretch goal

COMMON_MISTAKE: autocomplete="off" on login fields COMMON_MISTAKE: custom OTP inputs that block paste COMMON_MISTAKE: image-based CAPTCHA with no audio alternative

---

WCAG_2_2:EXISTING_CRITERIA — QUICK_REFERENCE

PERCEIVABLE (Guideline 1)

1.1.1 NON_TEXT_CONTENT (A): all images have alt text, decorative images have alt="" 1.2.1-1.2.5 TIME_BASED_MEDIA (A-AA): captions, transcripts, audio description 1.3.1 INFO_RELATIONSHIPS (A): semantic HTML, proper headings/lists/tables 1.3.2 MEANINGFUL_SEQUENCE (A): reading order correct without CSS 1.3.3 SENSORY_CHARACTERISTICS (A): instructions not based on shape/color/size alone 1.3.4 ORIENTATION (AA): content works in portrait and landscape 1.3.5 IDENTIFY_INPUT_PURPOSE (AA): autocomplete attributes on personal data fields 1.4.1 USE_OF_COLOR (A): color not sole means of conveying information 1.4.2 AUDIO_CONTROL (A): auto-playing audio can be paused or volume controlled 1.4.3 CONTRAST_MINIMUM (AA): 4.5:1 normal text, 3:1 large text 1.4.4 RESIZE_TEXT (AA): text resizable to 200% without content loss 1.4.5 IMAGES_OF_TEXT (AA): avoid images of text 1.4.10 REFLOW (AA): content reflows at 320px wide without horizontal scroll 1.4.11 NON_TEXT_CONTRAST (AA): UI components and graphics 3:1 contrast 1.4.12 TEXT_SPACING (AA): content works with increased text spacing 1.4.13 CONTENT_ON_HOVER_FOCUS (AA): tooltips dismissible, hoverable, persistent

OPERABLE (Guideline 2)

2.1.1 KEYBOARD (A): all functionality via keyboard 2.1.2 NO_KEYBOARD_TRAP (A): keyboard focus can always be moved away 2.1.4 CHARACTER_KEY_SHORTCUTS (A): single-key shortcuts can be remapped or disabled 2.2.1 TIMING_ADJUSTABLE (A): time limits can be turned off or extended 2.2.2 PAUSE_STOP_HIDE (A): moving/blinking content controllable 2.3.1 THREE_FLASHES (A): nothing flashes more than 3 times per second 2.4.1 BYPASS_BLOCKS (A): skip navigation link 2.4.2 PAGE_TITLED (A): descriptive page titles 2.4.3 FOCUS_ORDER (A): logical tab order 2.4.4 LINK_PURPOSE (A): link text describes destination 2.4.5 MULTIPLE_WAYS (AA): multiple navigation methods (nav, search, sitemap) 2.4.6 HEADINGS_AND_LABELS (AA): descriptive headings and labels 2.4.7 FOCUS_VISIBLE (AA): keyboard focus indicator visible 2.5.1 POINTER_GESTURES (A): multipoint/path gestures have single-pointer alternative 2.5.2 POINTER_CANCELLATION (A): down-event does not trigger action 2.5.3 LABEL_IN_NAME (A): visible label matches accessible name 2.5.4 MOTION_ACTUATION (A): motion-triggered functionality has alternative, can be disabled

UNDERSTANDABLE (Guideline 3)

3.1.1 LANGUAGE_OF_PAGE (A): lang attribute on html element 3.1.2 LANGUAGE_OF_PARTS (AA): lang attribute on content in different language 3.2.1 ON_FOCUS (A): no unexpected context change on focus 3.2.2 ON_INPUT (A): no unexpected context change on input 3.2.3 CONSISTENT_NAVIGATION (AA): navigation consistent across pages 3.2.4 CONSISTENT_IDENTIFICATION (AA): same function identified consistently 3.3.1 ERROR_IDENTIFICATION (A): errors identified and described in text 3.3.2 LABELS_OR_INSTRUCTIONS (A): labels or instructions for user input 3.3.3 ERROR_SUGGESTION (AA): error corrections suggested when detected 3.3.4 ERROR_PREVENTION_LEGAL (AA): legal/financial submissions reversible, checked, or confirmed

ROBUST (Guideline 4)

4.1.2 NAME_ROLE_VALUE (A): all components have programmatic name and role 4.1.3 STATUS_MESSAGES (AA): dynamic status updates via aria-live

---

WCAG_2_2:DEV_TASK_MAPPING

PRIORITY_1 — EVERY PROJECT

Criterion	Dev Task	Who
2.4.11 Focus Not Obscured	scroll-padding for sticky elements	floris/floor
2.5.7 Dragging Movements	single-pointer alternative for all drag	floris/floor
2.5.8 Target Size	24px minimum, 44px for touch	alexander (design) + floris/floor
3.2.6 Consistent Help	help in same location on every page	floris/floor
3.3.7 Redundant Entry	auto-populate repeated fields	floris/floor
3.3.8 Accessible Auth	passkey + paste + autocomplete	floris/floor

PRIORITY_2 — AAA STRETCH GOALS

Criterion	Dev Task	Who
2.4.12 Focus Not Obscured Enhanced	focused element FULLY visible	floris/floor
2.4.13 Focus Appearance	2px outline with 3:1 contrast	alexander + floris/floor
3.3.9 Accessible Auth Enhanced	no object recognition at all	floris/floor

---

WCAG_2_2:AGENT_INSTRUCTIONS

FOR julian: - track WCAG 2.2 adoption in EN 301 549 — when v4.1.1 is published, update all references - verify every project meets all 6 new AA criteria - include WCAG 2.2 criteria in conformance reports

FOR alexander: - design focus indicators that meet 2.4.13 (AAA stretch) — 2px solid outline with sufficient contrast - specify target sizes in DESIGN.md — minimum 24x24, recommended 44x44 for touch - design help mechanism placement as part of layout system

FOR floris, floor: - implement all new AA criteria from day one - pay special attention to: scroll-padding for sticky elements, single-pointer alternatives for drag, paste support on all inputs - automated tests can catch target size and missing autocomplete — manual testing needed for the rest

FOR antje: - add 2.5.7, 2.5.8, 3.3.8 to your test checklist - test dragging alternatives by disabling mouse drag - test authentication by verifying paste and password manager fill - measure target sizes with browser developer tools

---

READ_ALSO: domains/accessibility/index.md, domains/accessibility/eaa-requirements.md, domains/accessibility/testing-methodology.md, domains/accessibility/component-patterns.md