Skip to content

Latest commit

 

History

History
140 lines (102 loc) · 4.77 KB

accessibility.md

File metadata and controls

140 lines (102 loc) · 4.77 KB

Accessibility Standards

This document outlines the accessibility standards that all Bayat products must adhere to.

Compliance Standards

All Bayat projects must comply with:

  • Web Content Accessibility Guidelines (WCAG) 2.1 Level AA
  • Section 508 of the Rehabilitation Act (for U.S. government-related projects)
  • ADA (Americans with Disabilities Act) requirements
  • EN 301 549 (for European projects)

Core Principles

Our accessibility approach follows the four core principles of WCAG:

  1. Perceivable: Information must be presentable to users in ways they can perceive
  2. Operable: User interface components must be operable by all users
  3. Understandable: Information and operation must be understandable
  4. Robust: Content must be robust enough to be interpreted by a variety of user agents

Technical Requirements

Visual Design

  • Maintain a color contrast ratio of at least 4.5:1 for normal text and 3:1 for large text
  • Never use color alone to convey information
  • Provide visible focus indicators for keyboard navigation
  • Ensure text can be resized up to 200% without loss of content or functionality
  • Design with responsive principles to support zooming and different viewport sizes

Navigation and Interaction

  • Ensure all functionality is accessible via keyboard
  • Provide skip navigation links for screen reader users
  • Implement proper focus management for dynamic content
  • Ensure interactive elements have appropriate size targets (minimum 44x44px)
  • Allow sufficient time for users to read and interact with content
  • Avoid content that flashes more than three times per second

Content Structure

  • Use semantic HTML elements (e.g., <header>, <nav>, <main>, <section>, <article>, etc.)
  • Implement proper heading hierarchy (H1-H6)
  • Use lists (<ul>, <ol>, <dl>) for list content
  • Provide descriptive, unique page titles
  • Ensure logical reading order in the DOM

Forms

  • Associate labels with form controls using <label> elements
  • Group related form elements with <fieldset> and <legend>
  • Provide clear error messages and suggestions for correction
  • Ensure form validation is accessible and understandable
  • Support autocomplete for common form fields

Images and Media

  • Provide alternative text for all non-decorative images
  • Use empty alt attributes for decorative images (alt="")
  • Include captions and transcripts for audio and video content
  • Ensure media controls are keyboard accessible
  • Avoid auto-playing audio or video without user control

Tables

  • Use proper table markup with <th> for headers
  • Include proper scope attributes for header cells
  • Provide captions and summaries for complex tables
  • Avoid using tables for layout purposes

Dynamic Content

  • Use ARIA roles, states, and properties appropriately
  • Ensure screen readers are notified of dynamic content changes
  • Make modal dialogs fully accessible
  • Provide status messages in an accessible manner
  • Test custom widgets with screen readers

Testing Requirements

All products must undergo the following accessibility testing:

  1. Automated testing using tools like:

    • Axe
    • WAVE
    • Lighthouse
    • SiteImprove

  2. Manual testing including:

    • Keyboard-only navigation testing
    • Screen reader testing (NVDA, JAWS, VoiceOver)
    • High contrast mode testing
    • Testing at 200% zoom

  3. User testing with people with disabilities when possible

See Frontend Testing Standards for detailed testing guidance.

Documentation Requirements

Every project must include:

  • Accessibility compliance statement
  • Known accessibility issues and workarounds
  • Accessibility testing results
  • VPAT (Voluntary Product Accessibility Template) for enterprise products

Implementation Process

  1. Requirements Phase: Define accessibility requirements for the project
  2. Design Phase: Review designs for accessibility issues
  3. Development Phase: Implement accessible code
  4. Testing Phase: Conduct accessibility testing
  5. Release Phase: Document accessibility features and known issues
  6. Maintenance Phase: Address accessibility issues in future releases

Responsibility Assignment

  • Product Managers: Ensure accessibility requirements are included in specifications
  • Designers: Create accessible designs
  • Developers: Implement accessible code
  • QA Engineers: Test for accessibility issues
  • Project Managers: Schedule accessibility testing and remediation

Version History

Version Date Description
1.0 2025-03-20 Initial version