Skip to main content
Version: v1.3.2

Accessibility

Raaghu Design System follows accessibility best practices to ensure components work with assistive technologies and meet WCAG 2.1 AA standards.

Color Contrast​

Default color choices conform to WCAG 2.0 level AA requirements:

  • Normal text: Minimum 4.5:1 contrast ratio
  • Large text: Minimum 3:1 contrast ratio
  • Interactive elements: Minimum 3:1 contrast ratio

Guidelines:

  • Don't rely solely on color to convey information
  • Use multiple visual cues (icons, text, patterns)
  • Test color combinations with accessibility tools

High Contrast Support​

Browser Support:

  • Primary: Microsoft Edge and Internet Explorer 11
  • Secondary: Mozilla Firefox

Best Practices:

// ✅ Use semantic HTML elements
<button>Click me</button>

// ❌ Avoid non-semantic elements for interactions
<div onClick={handleClick}>Click me</div>

High Contrast CSS:

@media (-ms-high-contrast: active) {
  .custom-element {
    background-color: ButtonFace;
    color: ButtonText;
    border: 1px solid ButtonText;
  }
}

Screen Reader Support​

Primary support: Microsoft Edge with Windows Narrator

ARIA Implementation:

// Descriptive labels
<button aria-label="Close dialog">×</button>

// Progress indicators
<div
  role="progressbar"
  aria-valuenow={50}
  aria-valuemin={0}
  aria-valuemax={100}
>
  50%
</div>

// Live regions for dynamic content
<div aria-live="polite">{statusMessage}</div>

Screen Reader Only Text:

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

Keyboard Navigation​

Focus Management:

.interactive-element:focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Key Interactions:

  • Tab/Shift+Tab: Navigate between elements
  • Enter/Space: Activate buttons and links
  • Arrow keys: Navigate within components
  • Escape: Close modals or cancel actions

Component Examples​

Accessible Button:

<RdsButton
  label="Submit form"
  aria-describedby={hasError ? "error-message" : undefined}
/>

Accessible Form:

<label htmlFor="email">Email *</label>
<input
  id="email"
  type="email"
  aria-invalid={hasError}
  aria-describedby="email-error"
/>
{hasError && (
  <div id="email-error" role="alert">
    Please enter a valid email
  </div>
)}

Accessible Modal:

<div
  role="dialog"
  aria-labelledby="dialog-title"
  aria-modal="true"
>
  <h2 id="dialog-title">Confirm Action</h2>
  {/* Modal content */}
</div>

Testing Tools​

Testing Checklist:

  1. Keyboard navigation only
  2. Screen reader testing
  3. High contrast mode
  4. Color blind simulation
  5. Automated accessibility scans