stack/skills/ms-frontend-design/references/accessibility.md

Accessibility requirements and checks

Apply these checks to changed surfaces. WCAG 2.2 AA is the default target; this focused checklist is not a complete conformance assessment. Honor the actual criterion's scope and exceptions rather than inventing stricter legal claims. House recommendations are labeled separately.

ID	Requirement	Verification and qualification
A11Y-01	Ordinary text contrast at least 4.5:1; qualifying large text at least 3:1.	Measure actual foreground/background pairs in applicable states. Large text is at least 18pt, or 14pt bold (approximately 24/18.67 CSS px). Account for images/gradients behind text. Respect criterion exceptions; do not round a failing ratio upward.
A11Y-02	Visual information required to identify controls, states, and meaningful graphics meets applicable 3:1 contrast against adjacent colors.	Inspect essential boundaries, indicators, and authored focus cues. Decorative borders and every hover color difference are not automatically subject to this rule.
A11Y-03	Meaning must not depend on color alone.	Pair errors, status, chart distinctions, and selection with text, shape, pattern, or another appropriate cue.
A11Y-04	Pointer targets meet 24 × 24 CSS px or a valid criterion exception.	Measure the hit region, not the icon. For undersized targets using the spacing exception, centered 24px-diameter circles must not intersect another target or another undersized target's circle. Inline text links and other documented exceptions exist. A 44 × 44 target is a house touch recommendation, not the AA minimum.
A11Y-05	All functionality is keyboard operable except genuinely path-dependent input; no keyboard trap. Focus is visible and not entirely hidden by author-created content.	Complete the primary flow with keyboard input and check sticky headers, banners, overlays, order, and visible focus. Prefer fully unobscured focus as a house default. Provide non-drag alternatives when required.
A11Y-06	Semantic structure, accessible names, and appropriate role/state/value.	Prefer links for navigation and buttons for actions. Check landmarks, heading hierarchy, labels, meaningful image alternatives, decorative image treatment, and programmatic errors/status. Do not add ARIA where native semantics suffice.
A11Y-07	Ordinary vertically scrolling content reflows at 320 CSS px without lost information/functionality or two-dimensional page scrolling.	Test narrow width and zoom. Genuine two-dimensional content such as a data table/map may have an appropriately contained scrolling region. Do not conceal required content to pass. Also check text resizing to 200% without loss.
A11Y-08	Content remains usable with WCAG text-spacing overrides.	Apply line height 1.5 times font size, paragraph spacing 2 times, letter spacing 0.12 times, and word spacing 0.16 times where applicable. These are override resilience checks, not required authored typography values.
A11Y-09	Dialogs follow an appropriate accessible interaction pattern.	For a modal: sensible initial focus, Tab/Shift+Tab contained inside, Escape dismissal, accessible name, inert background, and focus restored to the trigger or logical successor. A nonmodal banner should not trap focus.
A11Y-10	Motion does not prevent access; respect reduced motion as a house requirement.	Check reduced-motion behavior; preserve state meaning without movement. Apply relevant pause/stop/hide and flashing criteria to moving or flashing content.

Sources for exact applicability and exceptions:

• WCAG 2.2 reference
• Text contrast
• Non-text contrast
• Target size
• Focus not obscured
• Reflow
• Text spacing
• Modal dialog pattern

Automated checks can identify some violations; combine them with actual keyboard operation, rendered inspection, and assistive-technology checks appropriate to the change. Record any unavailable checks as not verified.