Skip to main content

Accessibility

Accessibility is a core principle of Teardrop Design System. All components and patterns are designed to meet WCAG 2.1 Level AA standards.

Overview​

Teardrop ensures that Hardwater products are accessible to everyone, including people with disabilities. This includes support for:

  • Screen readers
  • Keyboard navigation
  • High contrast modes
  • Reduced motion preferences
  • Various input methods

WCAG Compliance​

Teardrop components meet WCAG 2.1 Level AA standards, which includes:

Perceivable​

  • Text alternatives for images
  • Sufficient color contrast
  • Resizable text
  • Clear content structure

Operable​

  • Keyboard accessible
  • No seizure-inducing content
  • Sufficient time limits
  • Clear navigation

Understandable​

  • Readable text
  • Predictable functionality
  • Input assistance

Robust​

  • Compatible with assistive technologies
  • Valid markup

Color Contrast​

All text and interactive elements meet minimum contrast ratios:

  • Normal text: 4.5:1 contrast ratio
  • Large text (18pt+ or 14pt+ bold): 3:1 contrast ratio
  • Interactive elements: 3:1 contrast ratio

Checking Contrast​

Use tools to verify contrast:

Examples​

Good Contrast:

/* Dark text on light background */
color: #091e42; /* Neutral 900 */
background: #ffffff; /* White */
/* Contrast ratio: 12.6:1 ✓ */

Poor Contrast:

/* Light text on light background */
color: #dee4ea; /* Neutral 200 */
background: #ffffff; /* White */
/* Contrast ratio: 1.4:1 ✗ */

Keyboard Navigation​

All interactive elements are keyboard accessible:

Tab Order​

  • Logical tab sequence
  • Visible focus indicators
  • No keyboard traps

Keyboard Shortcuts​

  • Standard shortcuts (Enter, Space, Escape)
  • Custom shortcuts documented
  • No conflicts with assistive technologies

Focus Management​

  • Focus visible on all interactive elements
  • Focus moves logically through content
  • Focus trapped in modals

Example:

<Button
  onClick={handleClick}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      handleClick();
    }
  }}
>
  Click me
</Button>

Screen Reader Support​

Components include proper ARIA attributes and semantic HTML:

ARIA Labels​

<Button aria-label="Close dialog">
  <Icon name="close" />
</Button>

ARIA Described By​

<input
  aria-describedby="email-help"
  id="email"
/>
<span id="email-help">
  Enter your email address
</span>

Semantic HTML​

<!-- Good -->
<button>Click me</button>
<nav>Navigation</nav>
<main>Main content</main>

<!-- Avoid -->
<div onClick={handleClick}>Click me</div>
<div>Navigation</div>

Focus Indicators​

All interactive elements have visible focus indicators:

.button:focus {
  outline: 2px solid var(--teardrop-color-primary-500);
  outline-offset: 2px;
}

Custom Focus Styles​

You can customize focus styles while maintaining visibility:

.button:focus-visible {
  outline: 2px solid var(--teardrop-color-primary-500);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(0, 101, 255, 0.2);
}

Reduced Motion​

Respect user motion preferences:

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

Testing Accessibility​

Automated Testing​

Use tools to test accessibility:

import { axe, toHaveNoViolations } from 'jest-axe';

expect.extend(toHaveNoViolations);

test('component is accessible', async () => {
  const { container } = render(<Component />);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Manual Testing​

  1. Keyboard navigation - Tab through all interactive elements
  2. Screen reader - Test with NVDA, JAWS, or VoiceOver
  3. Color contrast - Verify with contrast checker
  4. Zoom - Test at 200% zoom level

Component Accessibility​

Each component includes:

  • ARIA attributes where needed
  • Keyboard support
  • Focus management
  • Screen reader announcements

View component accessibility details →

Resources​

Getting Help​

  • Accessibility Team - Reach out for questions
  • Component Documentation - Check component-specific a11y notes
  • Testing Tools - Use automated and manual testing