colin
/
ploughshares
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
ploughshares/accessibility-improvements.md

3.6 KiB
Raw Blame History

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