Accessibility

Fidus is built for everyone. We follow WCAG 2.1 Level AA standards to ensure our application is usable by people with disabilities, including those using screen readers, keyboard navigation, and assistive technologies.

WCAG 2.1 Level AA Compliance

We commit to meeting Web Content Accessibility Guidelines (WCAG) 2.1 Level AA. This includes:

Color Contrast

All text meets WCAG 2.1 AA contrast requirements:

Testing Contrast

Keyboard Navigation

All interactive elements must be keyboard accessible:

Interactive Keyboard Navigation Demo

Try navigating through these buttons using Tab, Shift+Tab, and Enter:

Focus Indicators

All focusable elements have visible focus indicators:

/* Global focus styles */
*:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

Screen Reader Support

Semantic HTML

Use proper HTML elements for their intended purpose:

<button onClick={...}>
  Submit
</button>

<nav>
  <a href="/dashboard">
    Dashboard
  </a>
</nav>

<div onClick={...}>
  Submit
</div>

<div>
  <div onClick={...}>
    Dashboard
  </div>
</div>

ARIA Labels

Provide labels for elements when visual text isn't sufficient:

// Icon-only button
<button aria-label="Close card">
  <X className="h-4 w-4" />
</button>

// Decorative image
<img src="banner.jpg" alt="" role="presentation" />

// Form input
<label htmlFor="email">Email</label>
<input id="email" type="email" aria-required="true" />

ARIA Roles & States

Use ARIA attributes to communicate state changes:

Screen Reader Testing Guide

Testing with screen readers is essential for ensuring your application is truly accessible. Here's how to test with the most common screen readers:

Touch Targets

All interactive elements meet minimum touch target size:

Forms & Input

Labels & Descriptions

<label htmlFor="username">Username</label>
<input
  id="username"
  type="text"
  aria-describedby="username-hint"
  aria-required="true"
/>
<span id="username-hint">
  Must be 3-20 characters
</span>

Error Messages

<input
  id="email"
  type="email"
  aria-invalid="true"
  aria-describedby="email-error"
/>
<span id="email-error" role="alert">
  Please enter a valid email address
</span>

Reduced Motion

Respect user preferences for reduced motion. Users who enable this setting should see instant state changes:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

// In Tailwind
<div className="transition-all motion-reduce:transition-none">

Accessibility Testing Checklist

Use this comprehensive checklist to ensure your features meet accessibility standards before deployment:

Automated Testing Tools

Automated tools catch 30-50% of accessibility issues. Use them as a first pass, then perform manual testing:

Related Components

Resources

Key Takeaways