Accessibility
|
|
| Feature ID |
FEA022 |
| Subsystem the feature is part of |
UX |
| Responsible person |
Developers |
| Status |
Implemented |
Description
Disabilities are taken into consideration when designing the application. Various accessibility options are implemented in the application, including multiple color modes for those who are color blind.
|
|
| Use Case 1 |
User wants to change the color of data clusters for clarity |
| FUNC-REQ-C0022 |
The user is able to toggle common color blindness filters |
Preliminary user stories
- #58 User wants to switch to color blind mode clusters
Implementation
- Use WAVE Tools to check for WCAG2.1 basic level compliance.
- Ensure proper contrast levels for text and background colors.
Use React Aria labels to provide accessible names for interactive elements.
- Include alt text for all images to provide alternative descriptions.
- Ensure proper heading structure and hierarchy.
- Use semantic HTML tags to provide meaningful structure.
- Provide keyboard navigation for all interactive elements.
- Ensure proper form labels and input field accessibility.
- Implement skip navigation links for easier keyboard navigation.
- Test for screen reader compatibility and make necessary adjustments.
- Provide clear and descriptive error messages for form validation.
- Ensure proper focus management and visibility for focus indicators.
- Use appropriate language attributes to indicate the language of the content.
- Test for color blindness and ensure information is conveyed without relying solely on color.
- Consider adding captions or transcripts for audio and video content.
- Test the website with assistive technologies and make necessary improvements.
Testing / possible acceptance criteria