You are about to experience the web the way a blind user does.
The screen will go dark. You must navigate a support form using
only your keyboard and a built-in screen reader.
Fill in: name, age, email, message. Check the donate box. Then try to submit.
TabnextShift+TabpreviousEnterinteract
A yellow focus ring and text log will help you track where you are.
Audio will read each element aloud.
Tab through the form. Fill name, age, email, message. Check the donate box. Then try to submit.1:30
Contact Support
Need help? Fill out the form below and we'll get back to you.
Your Name
Email Address
Your Message
Your Age
Before submitting, please read our policy:
Click Here
I agree to the terms
Submit
🔍 Developer Accessibility Report
You struggled for 60 seconds. Here's why.
📋 What you managed to do
1 Missing Alt Text
The hero image has no alt attribute. The screen reader announced: "Image. header_bg_final_v2_FINAL.jpg" — meaningless to a blind user.
Fix: <img alt="Customer support team smiling" …>
2 Inputs Without Labels
All four form fields (name, email, message, age) use a visual <span> instead of a proper <label>.
The screen reader says "Edit text, blank" with no indication of what the field is for.
Fix: <label for="name">Your Name</label>
3 "Click Here" Link
The link says "Click Here". A screen reader user tabbing through links hears
a list of "Click Here, Click Here, Click Here" with zero context.
Fix: <a href="…">Read our Privacy Policy</a>
4 Checkbox Not Linked to Label
The checkbox has no <label> wrapping or for pointing to it.
The screen reader says "checkbox, unchecked" but never reads "I agree to the terms".
Fix: <label><input type="checkbox"> I agree</label>
5 <div> as a Button
The submit "button" is a <div>. It has no tabindex, no role="button",
and no keyboard handler. It is completely invisible to keyboard and screen reader users.
Fix: Use a real <button type="submit">Submit</button>
✨ The Takeaway
Develop your apps as if they need to be accessible to everyone.
Use semantic HTML — <button>, <label>,
<nav>, <main> — and your product
will work for everybody: screen reader users, keyboard-only users,
and those with motor impairments.
Accessibility is not a feature. It is a responsibility.
🛠 Run These Audits on Your Projects
Google Lighthouse
Built into Chrome DevTools (Audits tab). Scores your page 0–100 on accessibility,
flags missing alt text, contrast issues, and ARIA problems. Run it on every deploy.
axe DevTools
A browser extension by Deque. Finds WCAG violations in real-time with clear
descriptions and code-level fix suggestions. Ideal for dev and QA workflows.