This project is a hands-on exercise for improving accessibility in React applications. It's part of the Accessibility for React Developers knowledge sharing.
The application is a simple profile management tool that allows users to:
- View their profile information
- Edit their name and profile picture
- Clear their profile information
While the application works functionally, it has several accessibility issues that need to be fixed. Your task is to identify and resolve these issues to make the application accessible to all users, including those who use assistive technologies like screen readers.
- Clone this repository
- Install dependencies:
pnpm install
- Start the development server:
pnpm dev
Search for @todo comments throughout the codebase. These comments provide hints about accessibility issues that need to be fixed.
To help identify and fix accessibility issues, consider using:
- axe DevTools - Chrome extension for accessibility testing
- Browser developer tools (Accessibility tab)
- Screen readers like VoiceOver (macOS), NVDA or JAWS (Windows)
For guidance on fixing these accessibility issues, refer to:
- Semantic HTML: Using appropriate HTML elements (buttons, headings, etc.)
- Keyboard navigation: Ensuring all interactive elements are keyboard accessible
- Screen reader announcements: Making dynamic content changes perceivable
- Focus management: Properly managing focus, especially in modals
- Form labeling: Ensuring form controls have proper labels
- Color contrast: Ensuring text is readable against its background
- Image accessibility: Adding alt text to images
- ARIA attributes: Using ARIA roles, states, and properties correctly
Your implementation should:
- Pass automated accessibility checks using axe DevTools
- Be fully navigable using only a keyboard
- Be usable with a screen reader
- Maintain all existing functionality while improving accessibility
Good luck, and happy coding!