Design Converter
Education
Last updated on Mar 4, 2025
•5 mins read
Last updated on Mar 4, 2025
•5 mins read
Software Development Executive - II
Is your React app easy for everyone to use?
Many users rely on screen readers, keyboard navigation, or other assistive tools to browse the web. If a site is not built with accessibility in mind, these users may struggle to interact with it.
Web accessibility in React helps make applications usable for all, including those with disabilities. Developers can improve accessibility by using semantic HTML, ARIA attributes, and proper keyboard focus management. Testing is also key to finding and fixing issues.
This article shares best practices to build React apps that work for everyone.
A React app must be accessible to all users, regardless of their abilities. Poorly implemented accessibility features create barriers for screen reader users and those who rely on assistive technologies. Common accessibility issues in web applications include:
• Lack of semantic HTML elements
• Insufficient keyboard navigation support
• Incorrect use of ARIA attributes
• Poor focus management in dynamic content
• Low color contrast affecting readability
Addressing these problems improves the user experience and ensures compliance with accessibility standards such as WCAG (Web Content Accessibility Guidelines).
Semantic HTML improves accessibility in React applications by providing meaningful structure to a web page. Using semantic elements instead of generic <div>
and <span>
makes it easier for screen readers to interpret content.
1function Article() { 2 return ( 3 <article> 4 <h2>Understanding Web Accessibility</h2> 5 <p>Web accessibility ensures that digital content is usable by everyone, including people with disabilities.</p> 6 </article> 7 ); 8}
1function BadExample() { 2 return ( 3 <div> 4 <div className="heading">Understanding Web Accessibility</div> 5 <div>Web accessibility ensures that digital content is usable by everyone.</div> 6 </div> 7 ); 8}
Using semantic HTML elements such as <header>
, <nav>
, <article>
, and <footer>
helps assistive technologies interpret page structure.
ARIA attributes provide additional information to assistive technologies when semantic HTML alone is insufficient. A modal window or a custom component that lacks native semantics requires ARIA roles and attributes.
1function Modal({ isOpen, onClose }) { 2 return ( 3 isOpen && ( 4 <div 5 role="dialog" 6 aria-labelledby="modal-title" 7 aria-modal="true" 8 tabIndex={-1} 9 > 10 <h2 id="modal-title">Accessibility in React</h2> 11 <p>Ensuring accessibility in React applications improves user experience.</p> 12 <button onClick={onClose} aria-label="Close modal">Close</button> 13 </div> 14 ) 15 ); 16}
Using aria-modal="true" helps screen reader software recognize the modal as an active dialogue. The aria-labelledby attribute associates a label with the modal.
Proper focus management ensures that users can navigate interactive elements with the keyboard. A common issue in React applications is losing focus when components update dynamically.
1import { useEffect, useRef } from "react"; 2 3function Modal({ isOpen, onClose }) { 4 const modalRef = useRef(null); 5 6 useEffect(() => { 7 if (isOpen && modalRef.current) { 8 modalRef.current.focus(); 9 } 10 }, [isOpen]); 11 12 return ( 13 isOpen && ( 14 <div 15 ref={modalRef} 16 role="dialog" 17 tabIndex={-1} 18 aria-labelledby="modal-title" 19 aria-modal="true" 20 > 21 <h2 id="modal-title">React Accessibility</h2> 22 <button onClick={onClose} aria-label="Close modal">Close</button> 23 </div> 24 ) 25 ); 26}
This approach ensures that the modal receives focus when opened, improving accessibility for keyboard navigation.
Keyboard navigation is a fundamental part of web accessibility. Users should be able to navigate through interactive elements such as buttons, links, and form fields using the Tab key.
1function AccessibleButton({ onClick, label }) { 2 return ( 3 <div 4 role="button" 5 tabIndex={0} 6 onClick={onClick} 7 onKeyDown={(e) => e.key === "Enter" && onClick()} 8 > 9 {label} 10 </div> 11 ); 12}
This ensures that users who rely on keyboard input can activate the button using the Enter key.
Forms should be accessible to all users, including those using screen readers. Proper labeling of inputs using label elements or aria-label attributes is necessary.
1function ContactForm() { 2 return ( 3 <form> 4 <label htmlFor="name">Name</label> 5 <input id="name" type="text" aria-required="true" /> 6 7 <label htmlFor="email">Email</label> 8 <input id="email" type="email" aria-required="true" /> 9 10 <button type="submit">Submit</button> 11 </form> 12 ); 13}
Using aria-required="true" helps assistive technologies announce that the field is mandatory.
Testing accessibility is a crucial step in development. Automated and manual testing techniques help identify accessibility issues.
axe DevTools (Browser Extension) – Scans a web page for accessibility issues.
Lighthouse – Evaluates web accessibility within Chrome DevTools.
react-a11y – Provides real-time accessibility warnings in a React project.
Testing accessibility manually using screen reader software such as NVDA or VoiceOver helps identify usability concerns.
Low contrast between text and background colors affects readability. Developers can use accessibility tools such as Contrast Checker to test contrast levels.
1.button { 2 background-color: #007BFF; 3 color: white; 4}
WCAG recommends a contrast ratio of at least 4.5:1 for normal text.
Following accessibility rules improves usability for all users. Developers should:
• Use semantic HTML instead of generic <div>
and <span>
.
• Apply ARIA attributes where needed.
• Support keyboard navigation in interactive elements.
• Implement focus management for dynamic content.
• Perform accessibility tests using automated tools and manual testing.
Web accessibility in React helps create better experiences for all users. Using semantic HTML, ARIA attributes, and proper keyboard navigation makes applications easier to use.
Testing with automated tools and manual checks helps catch issues early. Small improvements can make a big difference for users who rely on assistive technologies.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.