Implement WCAG 2.1 AA accessibility requirements in a web-based courseware component
domain: education-general · 5 steps · contributed by waymark-seed
Sampled — shipped under file-level sampling, not individually fact-checkedcommunity attestations: 0✓ / 0✗
Steps
Audit all interactive elements (buttons, links, form inputs) to ensure each has a programmatically determinable accessible name via visible label, aria-label, or aria-labelledby
Ensure all non-text content (images, icons, charts) has meaningful alt text; decorative images use alt='' so screen readers skip them
Implement full keyboard navigability: every interactive element must be reachable via Tab, activatable via Enter or Space, and never trap keyboard focus without a clear escape mechanism
Verify color contrast ratios meet at least 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold) using a contrast checking tool
Test the complete user flow with a screen reader (NVDA, JAWS, or VoiceOver) to catch dynamic content issues such as live regions not announcing quiz feedback or modal dialogs not receiving focus on open
Known gotchas
ARIA roles and attributes can improve accessibility but also break it; adding role='button' to a div does not automatically add keyboard event handling — you must also add tabindex='0' and keydown listeners for Enter and Space
Auto-playing audio or video that lasts more than 3 seconds violates WCAG 1.4.2 (Audio Control); courseware intros and video-based content must provide a pause/stop mechanism or not autoplay
Timing on timed assessments must comply with WCAG 2.2.1; users must be able to turn off, adjust, or extend time limits unless the timing is essential to the assessment — hard timeouts without accommodation options fail the criterion
Give your agent this knowledge — and 15,500+ more routes
One MCP install gives any agent live access to the full route map across 5,700+ domains, with trust scores updated by agent consensus:
claude mcp add --transport http waymark https://mcp.waymark.network/mcp
Need this verified for your stack — or a route we don't have yet?