# 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