Accessibility

Presentation Accessibility aims at making applications usable by everyone (including people with visual, auditory, motor, or cognitive disabilities).

We aimed at targetting a basic accessibility while developing React components, as it can have following benefits in following projects :

• compliance with WCAG (Web Content Accessibility Guidelines) 2.1/2.2 standards
• better UX all users can make use of keyboards navigation
• SEO helps bots understand the page structure

Testing

• axe DevTools : browser extension for automated audits.
• Lighthouse : gives an accessibility score
• screen Readers : test with VoiceOver (macOS), NVDA (Windows), or TalkBack (Android).

Checklists

HTML

• prefer native HTML elements over React components when possible : they have built-in keyboard support
• use semantic HTML : <button> over <div>
• use ARIA attributes
• have an alt attribute for images

Styling

• ensure contrast is sufficient

Forms

• forms must be clearly labeled

Focus management

• useRef helps to move focus

Do's & Don'ts

✅ Do	❌ Don't
Use Semantic HTML (<main>, <nav>, <button>).	Use <div> or <span> for clickable elements.
Maintain a Logical Tab Order (top-to-bottom).	Use tabIndex values greater than 0.
Provide Alt text for all meaningful images.	Leave alt attributes empty on informative images.
Ensure Color Contrast (min 4.5:1 for text).	Use color as the only way to convey meaning (e.g., red for error).
Use Fragments <> to avoid unnecessary <div> soup.	Break HTML table or list semantics with wrapper divs.

WCAG 2.1 Checklist (Level AA)

Success Criterion	Requirement
1.1.1 Non-text Content	Provide text alternatives (alt text) for images.
1.4.3 Contrast (Min)	Text contrast ratio of at least 4.5:1.
2.1.1 Keyboard	All functionality is available via keyboard.
2.1.2 No Keyboard Trap	Users can move focus away from any element using the keyboard.
2.4.3 Focus Order	Navigation follows a logical sequence.
2.4.7 Focus Visible	Any keyboard-focusable element has a visible focus indicator.
3.3.2 Labels or Instructions	Provide labels or instructions when content requires user input.

Useful Resources

Type	Resource	Notes
📄	Official React A11y Docs	Base reference.
📄	WCAG 2.1 Guidelines	World standard.
🛠️	WAI-ARIA Authoring Practices	Best patterns for Modals, Tabs, etc.
💻	eslint-plugin-jsx-a11y	Linting rules for React.
🎥	A11y Casts by Google	Video series on web accessibility.