A Guide to Building Accessible Web Forms with Robust ARIA Labels
Designed for Front-end web developers in agile product teams who are responsible for delivering forms in enterprise applications and have been tasked with meeting WCAG accessibility standards for the first time. to spark real collaboration and high-energy learning.
A 90-minute hybrid workshop for agile product teams developing B2B SaaS applications. Most participants are confident coders but have limited hands-on experience with accessibility or ARIA; they are feeling pressure from leadership and legal to build compliant, user-friendly forms but worry that accessibility is tedious, confusing, or slows down delivery.
ARIA in Action: Mystery Demo
Kick off with a quick live demo: show a common web form first with ARIA labels disabled, then enabled, using a free screen reader (e.g., NVDA or VoiceOver). Participants close their eyes and listen, noting what information they pick up in each version. They jot down one word describing their reaction.
Tap to view the full activity.
Why this works
Demonstrations that tap into senses and simulate challenges trigger curiosity, empathy, and deeper engagement right away.
Accessibility MythBusters Poll
Launch an instant poll with statements like, 'Screen readers can interpret all form fields without ARIA,' and, 'ARIA labels fix all accessibility issues.' Participants vote true/false via chat or sticky notes, then see the correct answers, which often surprise them. Follow with a quick myth-dispelling explanation.
Tap to view the full activity.
Why this works
Revealing misconceptions lowers barriers to new learning and builds psychological safety, allowing participants to engage with tricky or technical content.
Build an ARIA Label—Together
Display a simple HTML form field live (e.g., a search box). Invite participants to suggest what ARIA attributes are missing and how to add them, step-by-step in a collaborative editor. If no one volunteers, nudge with clues. No wrong answers—just experimentation.
Tap to view the full activity.
Why this works
Low-pressure group co-creation lowers fear of technical errors and creates a supportive practice environment.
ARIA Relay: Speed Coding
Turn up the energy: break into small groups (or virtual breakout rooms) and give each group a messy form snippet. Each person has 1 minute to add or fix one ARIA attribute, then ‘passes’ the code to the next teammate. Groups race to complete a fully accessible form in 5 minutes.
Tap to view the full activity.
Why this works
Fast-paced, hands-on activities build comfort with new syntax and foster teamwork—even among competitive coders.
Release Day Dilemma: Stakeholder Hotseat
Present a real-world scenario: 'Your team’s new sign-up form was flagged by a customer for inaccessibility. Marketing wants it live; compliance demands changes.' Assign roles (developer, product owner, compliance lead) and have groups discuss what they’d do, given business and user pressures.
Tap to view the full activity.
Why this works
Role-play hooks attention and helps participants see how accessibility decisions play out across teams and business realities.
Accessibility Pledge & Action Card
Close by inviting each participant to write down one web form they commit to auditing or improving this month, and their biggest accessibility 'aha!' from the session. Optionally, post these pledges in a shared doc or channel for accountability.
Tap to view the full activity.
Why this works
Active reflection and public commitment drive transfer of learning to real work contexts; visible pledges foster follow-through.
Sign up to unlock 3 more activities
Get the full pack, facilitation flow, and more ready-to-run ideas.