Skip to content
AnglinAI Docs

Help Desk Accessibility Documentation

This document outlines the accessibility features and improvements implemented in the Help Desk application to ensure it’s usable by people with disabilities and complies with WCAG (Web Content Accessibility Guidelines) standards.

Implemented Accessibility Features

  1. Skip-to-content Link

    • Added a visually hidden link that becomes visible on focus to allow keyboard users to bypass the navigation menu
    • Implementation: AppLayout.tsx

  2. ARIA Landmarks

    • Added proper landmarks for main content regions: role="main", role="navigation", role="region"
    • Added proper labeling for these regions with aria-label attributes

  3. Keyboard Navigation

    • Ensured all interactive elements are reachable via keyboard
    • Added tabIndex attributes where needed
    • Implemented keyboard event handlers (onKeyDown) for custom interactive elements
    • Made focus states visible and identifiable

Forms and Inputs

  1. Form Labels and Associations

    • Replaced generic FormLabel with proper InputLabel components for Select elements
    • Added labelId and proper id attributes to form controls
    • Added missing labels for file inputs

  2. Error Messaging

    • Ensured error messages are programmatically associated with their inputs
    • Made validation errors clear and descriptive

  3. Button and Input States

    • Added proper aria-label attributes to describe the purpose of buttons
    • Ensured disabled states are properly reflected for screen readers

Interactive Components

  1. Notifications

    • Added proper ARIA attributes to notification system
    • Added aria-controls, aria-expanded, and aria-haspopup to notification trigger button
    • Made notification items keyboard accessible

  2. Tooltips and Popovers

    • Added proper ARIA attributes to associate tooltips with their triggers
    • Ensured tooltips have descriptive content

  3. Tables

    • Added caption elements to tables for better screen reader context
    • Added proper aria-label attributes to table elements
    • Made table rows keyboard focusable

  4. Chips and Status Indicators

    • Added proper role and aria-label to status indicators
    • Ensured delete buttons on chips have descriptive labels

Images and Icons

  1. Alternative Text
    • Added descriptive alt text to all images
    • Marked decorative icons as aria-hidden="true"
  1. Menu Structure
    • Added proper role attributes to menu items
    • Added aria-expanded state to collapsible menus
    • Added aria-controls to associate menu triggers with their content

Screen Reader Considerations

  • Added descriptive ARIA labels to components that may not be clear to screen reader users
  • Made sure interactive elements have clear purposes and states
  • Added screen-reader-only classes for additional context where needed

Keyboard Focus Management

  • Added visible focus states to all interactive elements
  • Ensured logical tab order throughout the application
  • Added focus management for modals and popovers

Color and Contrast

  • Ensured status indicators (chips) have sufficient color contrast
  • Using semantic colors from the Material UI theme system for consistent contrast
  • Added additional context beyond color for status indicators

Ongoing Accessibility Work

To further improve accessibility:

  1. Conduct regular automated testing with tools like Axe or Lighthouse
  2. Perform manual testing with screen readers (NVDA, JAWS, VoiceOver)
  3. Implement focus management in modal dialogs and popovers
  4. Regularly review and update accessibility features as the application evolves

Accessibility Standards Compliance

The Help Desk application has been improved to better comply with:

  • Web Content Accessibility Guidelines (WCAG) 2.1 Level AA
  • WAI-ARIA 1.1 practices for web applications
  • Section 508 requirements