89 lines
3.6 KiB
Markdown
89 lines
3.6 KiB
Markdown
# Accessibility Improvements for Project Ploughshares
|
|
|
|
This document outlines the accessibility improvements made to the Project Ploughshares Transaction Management System to ensure compliance with WCAG 2.1 AA standards.
|
|
|
|
## Color Contrast Improvements
|
|
|
|
- Increased text contrast ratios throughout the application:
|
|
- Default text color changed to `#333333` for better contrast against white backgrounds
|
|
- Footer text color improved from `#777` to `#555555`
|
|
- Button text colors explicitly set to ensure contrast with button backgrounds
|
|
- Table headers use white text on dark blue background with sufficient contrast
|
|
|
|
- Created a consistent color palette with accessible colors:
|
|
- Primary blue: `#1b365d` (Ploughshares brand color)
|
|
- Accent color: `#c4d600` (Ploughshares brand accent)
|
|
- Success color: `#2e7d32` (Accessible green)
|
|
- Warning color: `#e65100` (Accessible orange)
|
|
- Info color: `#0277bd` (Accessible blue)
|
|
- Error color: `#c62828` (Accessible red)
|
|
|
|
## Keyboard Navigation
|
|
|
|
- Added a "Skip to main content" link that appears on keyboard focus
|
|
- Improved focus visibility with a prominent outline on all interactive elements
|
|
- Ensured all interactive elements can be accessed via keyboard
|
|
- Added `aria-current="page"` to indicate the current page in navigation
|
|
|
|
## Screen Reader Support
|
|
|
|
- Added appropriate ARIA attributes throughout the application:
|
|
- `aria-label` for icon-only buttons
|
|
- `aria-hidden="true"` for decorative icons
|
|
- `aria-describedby` for form fields with help text
|
|
- `aria-current` for indicating current page
|
|
|
|
- Improved semantic HTML structure:
|
|
- Proper heading hierarchy (h1, h2, h3, etc.)
|
|
- Semantic HTML5 elements (header, main, footer, section, etc.)
|
|
- Table captions and proper scope attributes for table headers
|
|
|
|
## Text Readability
|
|
|
|
- Set base font size to 16px for optimal readability
|
|
- Increased line height to 1.5 for better text spacing
|
|
- Ensured links are underlined for better visibility
|
|
- Added sufficient spacing between interactive elements
|
|
|
|
## Form Accessibility
|
|
|
|
- All form controls have associated labels
|
|
- Form fields with help text use `aria-describedby`
|
|
- Form validation errors are announced to screen readers
|
|
- Improved focus states for form elements
|
|
|
|
## Responsive Design
|
|
|
|
- Ensured the application is usable at all viewport sizes
|
|
- Adjusted text size on smaller screens while maintaining readability
|
|
- Made tables responsive with horizontal scrolling on small screens
|
|
- Ensured touch targets are large enough on mobile devices
|
|
|
|
## Testing Tools
|
|
|
|
- Created an accessibility testing page at `/accessibility`
|
|
- Added contrast checking script (`check_contrast.py`)
|
|
- Added Lighthouse accessibility testing script (`check_lighthouse.sh`)
|
|
|
|
## Additional Improvements
|
|
|
|
- Added support for high contrast mode with `@media (forced-colors: active)`
|
|
- Improved button and link hover/focus states
|
|
- Added proper width and height attributes to images
|
|
- Replaced Unicode icon characters with Bootstrap Icons for better screen reader compatibility
|
|
|
|
## How to Test
|
|
|
|
1. Visit the accessibility testing page at http://localhost:5005/accessibility
|
|
2. Use the keyboard to navigate through all interactive elements
|
|
3. Test with a screen reader (VoiceOver on macOS, NVDA on Windows)
|
|
4. Run the Lighthouse accessibility test using `./check_lighthouse.sh`
|
|
5. Check contrast ratios using `python3 check_contrast.py`
|
|
|
|
## Future Improvements
|
|
|
|
- Add ARIA live regions for dynamic content updates
|
|
- Implement more robust form validation with appropriate error messaging
|
|
- Add language attributes for multilingual content
|
|
- Improve keyboard shortcuts for power users
|
|
- Conduct user testing with people who have disabilities |