Skip to content

ACCESSIBILITY.md

Latest commit

 

History

History
174 lines (142 loc) · 5.8 KB

ACCESSIBILITY.md

File metadata and controls

174 lines (142 loc) · 5.8 KB

Accessibility Guide for Learn by Design Website

Overview

This website has been designed and developed with comprehensive accessibility features to ensure it's usable by people with various disabilities, following WCAG 2.1 AA guidelines.

Accessibility Features Implemented

1. Keyboard Navigation

  • Tab Navigation: All interactive elements are keyboard accessible
  • Focus Management: Clear visual focus indicators with high contrast outlines
  • Mobile Menu: Supports Escape key to close and Tab key navigation
  • Focus Trapping: Mobile menu traps focus when open

2. Screen Reader Support

  • Semantic HTML: Proper use of headings, landmarks, and semantic elements
  • ARIA Labels: Comprehensive ARIA labeling for complex UI components
  • Skip Links: "Skip to main content" link for efficient navigation
  • Screen Reader Text: Hidden descriptive text for context

3. Visual Accessibility

  • Color Contrast: Enhanced color contrast ratios meeting WCAG AA standards
  • Focus Indicators: High-contrast focus outlines (3px magenta border)
  • High Contrast Mode: Support for prefers-contrast: high
  • Reduced Motion: Respects prefers-reduced-motion for vestibular disorders

4. Form Accessibility

  • Labels: All form fields have descriptive labels
  • Required Fields: Clear indication with asterisks and aria-required
  • Error Handling: Accessible error messages with role="alert"
  • Field Descriptions: Hidden help text for screen readers
  • Validation: Client-side validation with accessible feedback

5. Content Structure

  • Headings: Logical heading hierarchy (h1, h2, h3)
  • Landmarks: Proper use of header, main, nav, footer roles
  • Lists: Semantic lists with proper roles
  • Articles: Service cards marked as articles with proper labeling

6. Images and Media

  • Alt Text: Descriptive alternative text for all images
  • Decorative Elements: Icons marked with aria-hidden="true"
  • Loading: Appropriate loading attributes for performance

Accessibility Standards Compliance

WCAG 2.1 AA Compliance

  • ✅ 1.1.1 Non-text Content: All images have alt text
  • ✅ 1.3.1 Info and Relationships: Semantic markup
  • ✅ 1.3.2 Meaningful Sequence: Logical reading order
  • ✅ 1.4.1 Use of Color: Information not conveyed by color alone
  • ✅ 1.4.3 Contrast: Minimum contrast ratio of 4.5:1
  • ✅ 2.1.1 Keyboard: All functionality available via keyboard
  • ✅ 2.1.2 No Keyboard Trap: Users can navigate away from any component
  • ✅ 2.4.1 Bypass Blocks: Skip links provided
  • ✅ 2.4.2 Page Titled: Descriptive page titles
  • ✅ 2.4.3 Focus Order: Logical focus order
  • ✅ 2.4.6 Headings and Labels: Descriptive headings and labels
  • ✅ 3.1.1 Language of Page: Lang attribute set
  • ✅ 3.2.1 On Focus: No unexpected context changes
  • ✅ 3.3.1 Error Identification: Errors clearly identified
  • ✅ 3.3.2 Labels or Instructions: Clear labels provided
  • ✅ 4.1.1 Parsing: Valid HTML
  • ✅ 4.1.2 Name, Role, Value: Proper ARIA implementation

Screen Reader Testing

Tested with:

  • NVDA (Windows)
  • JAWS (Windows)
  • VoiceOver (macOS/iOS)
  • TalkBack (Android)

Keyboard Navigation Map

Global Navigation

  • Tab - Move to next interactive element
  • Shift + Tab - Move to previous interactive element
  • Enter/Space - Activate buttons and links
  • Escape - Close mobile menu

Form Navigation

  • Tab - Move between form fields
  • Enter - Submit form
  • Arrow keys work in select dropdowns

Skip Links

  • Tab (on page load) - Access skip link
  • Enter - Jump to main content

Accessibility CSS Features

Focus Styles

*:focus {
    outline: 3px solid var(--magenta);
    outline-offset: 2px;
}

Reduced Motion Support

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

High Contrast Support

@media (prefers-contrast: high) {
    .bg-magenta { background-color: #990033; }
    .bg-blueberry { background-color: #4a1a5c; }
}

JavaScript Accessibility Features

Mobile Menu

  • ARIA expanded states
  • Focus management
  • Escape key handling
  • Focus trapping

Form Validation

  • Live error announcements
  • Field-specific error messaging
  • Success confirmations
  • Focus management on errors

Color Accessibility

Color Palette (WCAG AA Compliant)

  • Primary Blue: #5a2d91 (enhanced for better contrast)
  • Magenta: #d63384
  • Sage: #495057 (darkened for better contrast)
  • Text on White: Minimum 4.5:1 contrast ratio
  • Text on Colored Backgrounds: Minimum 4.5:1 contrast ratio

Testing Checklist

Manual Testing

  • Navigate entire site using only keyboard
  • Test with screen reader
  • Verify all images have appropriate alt text
  • Check color contrast ratios
  • Test form validation and error handling
  • Verify skip links function correctly

Automated Testing Tools

  • axe-core: For automated accessibility testing
  • WAVE: Web accessibility evaluation tool
  • Lighthouse: Accessibility audit scores

Future Improvements

Planned Enhancements

  • Add keyboard shortcuts for power users
  • Implement voice navigation support
  • Add language switching capability
  • Enhance error recovery mechanisms

Ongoing Monitoring

  • Regular accessibility audits
  • User feedback collection
  • Assistive technology compatibility testing
  • Performance monitoring for screen readers

Contact for Accessibility Issues

If you encounter any accessibility barriers on this website, please contact us at:

We are committed to making our website accessible to all users and welcome feedback for continuous improvement.