Web Developers

Cover SC 2.1.1, 2.4.3, 2.4.11, and 2.5.7 by keeping keyboard orders logical, ensuring focus indicators meet the 4px/3:1 requirements, and offering single-pointer alternatives to drag/drop.

• Test with keyboard only plus Accessibility Insights’ focus order view.
• Run WAVE or DubBot on staging URLs to confirm headings/landmarks remain intact after CMS edits.

Meet SC 1.3.1, 4.1.2, and 4.1.3 by using semantic HTML, exposing accessible names, and announcing async updates with `role="status"` or live regions.

• Keep DOM order synced with visual order; rely on Quickstart components before adding custom ARIA.
• Log Accessibility Insights issues directly to Azure Boards or Jira for traceability.

When you ship docs or media alongside features, run Microsoft Accessibility Checker, follow WebAIM alt text guidance, and ensure PDFs are tagged per Adobe remediation steps.

• Confirm reading order and form field labels in Acrobat before attaching PDFs to releases.
• Ask writers to provide source files plus tagged exports so DubBot can crawl links without false positives.

• ✅ Focus appearance (2.4.11) meets thickness/contrast guidance.
• ✅ Drag actions offer single-pointer alternatives (2.5.7) and targets meet 24×24 px (2.5.8).
• ✅ Authentication and MFA support copy/paste and password managers (3.3.8).
• ✅ Error messages identify fields, include text guidance, and set `aria-invalid` (3.3.1/3.3.3).
• ✅ Live updates announce status (4.1.3) without forcing focus changes.

Download machine-readable checklists from checklist-index.json for sprint automation.

WebAIM’s annual Million report consistently shows six failures that account for 96% of detected issues. Bake these into code reviews and linters:

• Low contrast (SC 1.4.3/1.4.11): enforce token usage, run axe/Accessibility Insights contrast checks.
• Missing alternative text (SC 1.1.1): require `alt` or ARIA labels for informative media; mark decorative imagery as `alt=""`.
• Empty links/buttons (SC 2.4.4/4.1.2): ensure every interactive element has visible text and an accessible name.
• Missing form labels (SC 1.3.1): pair `` or `aria-labelledby`; include instruction text via `aria-describedby`.
• Missing document language (SC 3.1.1): set `lang` on every HTML root and ensure embedded documents inherit it.
• Link purpose (SC 2.4.4/2.4.9): write descriptive link text (“Review the procurement checklist”) instead of “click here.”

When opening links in a new window, inform users via inline text (e.g., “opens in new window”) and only do so when necessary (external policies, workflows). Source: WebAIM Million report.

1. Keyboard sweep every interactive element (Tab/Shift+Tab + Escape for dialogs) to confirm focus order and visibility.
2. Run Accessibility Insights FastPass plus the Tab Stops overlay; save the report in your PR artifacts.
3. Spot-check page templates with WebAIM WAVE and note any errors/warnings not covered by automated scans.
4. Trigger your team’s DubBot crawl or add the URL to the next scheduled scan for regression tracking.
5. Attach Microsoft Accessibility Checker or Adobe Acrobat reports for any documents or PDFs in the release.

These five steps align with the role guide's optional manual review checklist so every code drop ships with consistent evidence.

Adopt the Quickstart nav component with built-in skip links, `aria-expanded`, and roving tabindex.

• Expose a single tab stop per composite widget; move focus internally with arrow keys.
• Mirror visual labels in `aria-label` / `aria-labelledby` attributes for voice control.
• Keep the DOM order aligned with visual order so reading order stays predictable.

Reference: Keyboard guidance, Skip link snippet.

Every form field needs a visible label, programmatic name, inline help, and error messaging.

• Use native `` pairs when possible; add `aria-describedby` for help/error text.
• Mark required fields with text and `aria-required="true"`; never rely on color alone.
• Send focus to the first invalid control on submit; provide summary errors for longer forms.

Reference: Do/Don’t patterns, WCAG checklist, WebAIM form techniques.

Ensure iframes, third-party widgets, and chart components provide names, controls, and fallbacks.

• Wrap embeds with titles and descriptions; ensure keyboard focus can enter/exit.
• Provide text alternatives for charts (data tables or summary lists).
• Lazy-load media without removing it from the accessibility tree.

Reference: Media playbook, Document & media hub.

When updating DOM regions, announce changes with `aria-live`, focus management, or status messages.

• For toasts/status, use `role="status"`; for errors, use `role="alert"` and keep messages concise.
• Trap focus inside modals and restore it after close; avoid off-screen focus jumps.
• Include skeleton loaders or progress indicators that expose name/role states.

Reference: Focus playbook, Testing toolkit.

• Include skip links, keyboard support, and focus management for all interactive regions.
• Meet contrast via color guidance.
• Structure content with semantic headings and landmarks.

1. Automated: axe/Accessibility Insights in CI + Storybook linting.
2. Manual: keyboard-only navigation, focus traps, modals.
3. Screen reader: JAWS or NVDA (Windows) and VoiceOver (macOS/iOS); include TalkBack for Android webviews.

Deep dive: Testing Toolkit, Keyboard patterns, Assistive technology coverage.

Submit fundamental alteration requests with business justification, impacted WCAG criteria, alternative access plan, and remediation timeline.

1. Open the Edge/Chrome extension on the page under test.
2. Select FastPass to capture automated checks + tab stops; export the report and attach it to your PR.
3. Resolve failures immediately or log defects referencing the exact WCAG criteria surfaced in the report.

Docs: FastPass overview

1. Switch to the Assessment view; walk through each requirement (structure, landmarks, focus order, gestures).
2. Use built-in snippets (Tab stops, Landmarks, Headings) to capture evidence for reviewers.
3. Mark steps as pass/fail/not applicable and sync results to Azure Boards/Jira.

Docs: Assessment overview

• Color picker + Contrast tools validate UA tokens on the fly.
• Tab stops overlay illustrates focus order; screenshot it for documentation.
• Issue filing pipeline pushes results straight to GitHub, Azure Boards, or export JSON for DubBot.

Docs: Ad hoc tools reference

• Upload FastPass/Assessment artifacts to the release folder so auditors can trace WCAG coverage.
• Link Accessibility Insights findings with WAVE/DubBot results for prioritized remediation.
• Share the one-page WCAG highlight sheet with stakeholders so they understand the “why.”