How To Build Accessible Web Applications in React and JavaScript

A practical guide for frontend developers

Accessibility is not a secondary concern or a checklist item. It is a fundamental part of building inclusive, production-ready applications. At the senior engineer level, it becomes a key differentiator between writing functional UI and engineering robust systems.

This article explores accessibility from a practical, engineering-first perspective, focusing on how to build accessible applications using React and JavaScript

1. What Accessibility Really Means

Accessibility (often abbreviated as a11y) refers to designing applications that can be used by people with a wide range of abilities.

This includes users who:

• Rely on keyboard navigation instead of a mouse
• Use screen readers due to visual impairments
• Have limited motor control
• Experience temporary or situational limitations

An accessible application ensures that all users can perceive, navigate, and interact with the interface effectively.

2. The Root Problem in Modern Frontend Development

Many accessibility issues arise from how UI is implemented, not from complex logic.

A common example:

<div onClick={handleSubmit}>Submit</div>

Visually, this behaves like a button. Functionally, it is not.

• It is not focusable via keyboard
• It does not respond to Enter or Space
• It is not announced correctly by screen readers

This highlights a broader issue: visual correctness does not imply functional correctness.

3. Semantic HTML

The most effective way to build accessible applications is to rely on native HTML semantics.

Correct implementation:

<button onClick={handleSubmit}>Submit</button>

Native elements provide:

• Built-in keyboard support
• Proper focus behavior
• Screen reader compatibility

A key principle:

Prefer native HTML elements over custom implementations whenever possible.

4. Keyboard Navigation

A reliable way to evaluate accessibility is to use the application without a mouse.

Key expectations:

• All interactive elements must be reachable using the Tab key
• The tab order should follow a logical flow
• Interactive elements must respond to keyboard actions (Enter, Space)

Common issues:

• Non-focusable interactive elements
• Broken tab order due to improper DOM structure
• Hidden elements still receiving focus

Keyboard accessibility is not optional — it is a baseline requirement.

5. Focus Management

Focus management becomes especially important in dynamic interfaces.

Consider a modal:

When the modal opens:

• Focus should move inside the modal
• Background content should not be accessible

When the modal closes:

• Focus should return to the triggering element

In React, this is typically handled using refs and effects:

useEffect(() => {
  modalRef.current.focus();
}, []);

Improper focus management leads to:

• Confusing navigation
• Broken user flows
• Poor screen reader experience

6. ARIA: Accessible Rich Internet Applications

ARIA attributes are used to provide additional context when native HTML is insufficient.

Example:

<div role="button" tabIndex="0">Click</div>

However, ARIA should be used carefully.

Important guideline:

ARIA does not replace semantic HTML. It supplements it.

7. Form

Forms are one of the most common sources of accessibility issues.

Key requirements:

• Every input must have a label
• Errors should be clearly communicated
• Inputs must be accessible via keyboard

Correct example:

<label htmlFor="email">Email</label>
<input id="email" type="email" />

For error handling:

<p role="alert">Invalid email address</p>

This ensures that assistive technologies immediately notify the user.

8. Images and Media

Images must include descriptive alternative text.

<img src="profile.png" alt="User profile picture" />

The alt attribute enables screen readers to convey meaning.

Guidelines:

• Provide meaningful descriptions
• Use empty alt (alt="") for decorative images

9. Accessibility Challenges in React Applications

React introduces additional complexity due to dynamic rendering.

Common issues include:

• Components that update without notifying assistive technologies
• Improper focus handling during re-renders
• Missing roles in custom components

Example of dynamic UI issue:

{isOpen && <Modal />}

Without additional context, screen readers may not detect this change.

Solution:

<div aria-live="polite">Modal opened</div>

This ensures changes are announced.

10. Designing Complex Components (Dropdown Example)

Custom components such as dropdowns require careful handling.

Requirements:

• Keyboard navigation (arrow keys, Enter, Escape)
• Proper focus transitions
• Clear selection state
• Screen reader announcements

These components often require combining:

• Semantic structure
• ARIA attributes
• Controlled state management

This is why many teams rely on headless UI libraries for consistency.

11. Accessibility and Performance

Accessibility is often misunderstood as a performance trade-off.

In reality:

• Semantic HTML improves DOM structure
• Better structure improves rendering efficiency
• Accessibility enhancements often align with performance best practices

Additionally:

• Accessible applications tend to have better SEO
• Cleaner structure improves maintainability

Accessibility in Interviews

Accessibility is rarely asked directly, but it is frequently evaluated indirectly.

Common interview questions:

• How would you design a modal?
• How do you handle focus in dynamic components?
• How do you ensure forms are usable?

Strong answers include:

• Keyboard navigation considerations
• Focus management
• Semantic HTML usage

This signals senior-level thinking.

A Practical Mental Model

Accessibility can be simplified into three core principles:

1. Structure — Use semantic HTML
2. Interaction — Ensure full keyboard support
3. Communication — Support screen readers effectively

If these are handled correctly, most accessibility issues are eliminated.

The goal is not just to build interfaces that look good, but to build systems that work for everyone

Thanks for reading, If you found the article helpful, then you can follow me on Medium and LinkedIn for more informative content