Skip to main content
Back to Blog
AccessibilityReactWCAG

Web Accessibility in React: Building Inclusive Apps in 2026

8 min read

How to build accessible React and Next.js applications — semantic HTML, ARIA roles, keyboard navigation, focus management, colour contrast, and tools to audit your app for WCAG compliance.

Web accessibility is both a moral imperative and an increasingly important technical requirement — with legal accessibility standards tightening in many markets and Google using accessibility signals as part of its quality assessment. Muhammad Sufyan of Sufyan Frontend from Lahore, Pakistan builds accessible interfaces for production platforms serving thousands of users and shares this practical guide to accessibility in React and Next.js for 2026.

Semantic HTML: The Foundation of Accessibility

The single most impactful thing you can do for accessibility is use semantic HTML elements correctly. A button element is keyboard focusable and announces itself as a button to screen readers automatically — a div with an onClick handler does neither without significant additional work. Use nav, main, aside, header, footer, article, and section elements to provide document structure that screen readers can navigate efficiently.

// Accessible button — keyboard focusable, correctly announced
<button onClick={handleClick} type="button">
  Save changes
</button>

// Inaccessible button — requires many extra attributes
<div
  onClick={handleClick}
  role="button"
  tabIndex={0}
  onKeyDown={(e) => e.key === "Enter" && handleClick()}
>
  Save changes
</div>

ARIA Roles and Labels

When semantic HTML alone is insufficient — for custom components like comboboxes, modals, tooltips, and carousels — ARIA attributes provide the additional context that assistive technologies need. The key rules: use ARIA to supplement native semantics, never to replace them; always provide accessible labels for interactive elements without visible text labels; and manage focus explicitly in modal components and dynamic content.

  • ▸Use aria-label or aria-labelledby on icon buttons and inputs without visible labels
  • ▸Use aria-expanded on toggle buttons to communicate open/closed state
  • ▸Use aria-live regions for dynamic content updates like notifications and alerts
  • ▸Manage focus when modals open — trap focus inside the modal, return focus on close

Colour Contrast and Visual Accessibility

WCAG 2.1 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Check your colour palette with a contrast checker tool before finalising your design. Muhammad Sufyan's portfolio at https://sufyan-frontend.vercel.app uses a dark background with high-contrast text and primary colour elements specifically to maintain WCAG compliance while achieving the desired aesthetic.

Conclusion

Building accessible React and Next.js applications is not significantly harder than building inaccessible ones — it primarily requires developing the right habits and checking your work with the right tools. Use the Axe browser extension and Lighthouse accessibility audits as part of your regular development workflow. Muhammad Sufyan builds accessibility into his production work from the start — follow his approach and build inclusive web experiences that work for every user who visits your applications.