Accessibility Traps in Modern Frontend Development

Accessibility isn’t just about adding alt text. Frontend frameworks like React, Vue, and Angular give developers speed, but also tempt them into practices that break accessibility without realizing it. Let’s dive into the hidden traps developers hit and how to fix them.

Why This Matters

Websites excluding users with screen readers, mobility impairments, or low vision aren’t just a moral failure—they’re legal liabilities. But more importantly, accessible sites load faster, rank better on SEO, and have higher engagement.

Trap #1: Div Soup

Developers love wrapping everything in <div>. But divs are meaningless to assistive tech.

Instead:

JSX
// Bad
<div onClick={handleClick}>Submit</div>


// Good
<button onClick={handleClick}>Submit</button> 

// Replacing a <div> with semantic elements like <button> instantly improves accessibility and keyboard navigation.
Copy

Trap #2: Ignoring Focus States

Frameworks often strip default focus outlines in CSS to look “clean,” but this makes navigation impossible for keyboard users.

CSS
/* Bad */
:focus {
  outline: none;
}

/* Good */
:focus {
  outline: 2px solid #4be1ec;
}
Copy

Trap #3: Infinite Scroll Done Wrong.

Without ARIA roles or landmarks, infinite scroll is unusable with screen readers. Always announce dynamically added content:

JS
<div role="status" aria-live="polite">
  {newItems.map(item => <p key={item.id}>{item.name}</p>)}
</div>
Copy

Quick Checklist

✅ Use semantic HTML first.

✅ Don’t disable outlines without adding custom ones.

✅ Add ARIA attributes where content is dynamic.

✅ Test with keyboard-only navigation.

Common Pitfalls

Thinking accessibility = screen readers only.

Forgetting color contrast.

Over-engineering ARIA roles where semantic HTML already works.

What To Do Next

Audit your app using Lighthouse or axe-core. Fix one category at a time—color contrast, keyboard navigation, ARIA landmarks.

Accessibility is never a one-time task; it’s continuous. But fixing these traps early avoids lawsuits, user frustration, and costly rewrites.