Accessibility

The Neuroon widget is designed to comply with WCAG 2.2 Level AA guidelines, ensuring an accessible experience for all users.

Compliance Summary

Criteria	Status	Notes
WCAG 2.2 AA	Complete	All criteria
Keyboard navigation	Complete	Tab, Enter, Escape, arrows
Screen readers	Complete	NVDA, VoiceOver, JAWS
Color contrast	4.5:1+	Normal text
Reduced motion	Respected	prefers-reduced-motion
Zoom up to 200%	Functional	No loss of functionality

Keyboard Navigation

Global shortcuts

Key	Action
Cmd/Ctrl + K	Open/close widget
Escape	Close widget
Tab	Navigate forward
Shift + Tab	Navigate backward

Within the widget

Key	Context	Action
Enter	Search input	Execute search
↓	Search input	Go to suggestions
↑/↓	Results list	Navigate products
Enter	Product	Go to product
Space	Checkbox/button	Activate
←/→	Filters	Navigate options
Home/End	Lists	Go to start/end

Focus trap

The widget implements focus trap when open:

// Focus remains contained within the modal
// Tab at end → returns to start
// Shift+Tab at start → goes to end

This prevents users from losing context when navigating with keyboard.

Screen Readers

ARIA Regions

<div role="dialog" aria-label="Search products" aria-modal="true">
  <div role="search" aria-label="Search field">
    <input
      type="search"
      aria-label="Search products"
      aria-describedby="search-hint"
      aria-expanded="false"
      aria-controls="suggestions-list"
    />
  </div>

  <div role="listbox" id="suggestions-list" aria-label="Suggestions">
    <!-- ... -->
  </div>

  <div role="region" aria-label="Search results" aria-live="polite">
    <!-- ... -->
  </div>
</div>

Live regions

The widget uses aria-live to announce changes:

<!-- Number of results -->
<div aria-live="polite" aria-atomic="true">
  20 products found
</div>

<!-- Loading states -->
<div aria-live="assertive">
  Loading results...
</div>

<!-- Notifications -->
<div role="alert">
  Product added to comparison
</div>

Labels and descriptions

All interactive elements have descriptive labels:

<button aria-label="Search by voice">
  <svg><!-- microphone icon --></svg>
</button>

<button aria-label="Search by image">
  <svg><!-- camera icon --></svg>
</button>

<button
  aria-label="Add Nike Air Max to comparison"
  aria-pressed="false"
>
  Compare
</button>

<button aria-label="Close search">
  <svg><!-- X icon --></svg>
</button>

Color Contrast

Minimum ratios

Element	Minimum ratio	Widget
Normal text	4.5:1	4.5:1+
Large text (>18px)	3:1	3:1+
Icons, borders	3:1	3:1+
Focus states	3:1	3:1+

Verification

Default colors comply with WCAG AA:

Combination	Ratio
Primary text / Background	15.3:1 (dark) / 16.1:1 (light)
Secondary text / Background	7.2:1 (dark) / 4.6:1 (light)
Primary / Background	4.5:1+

Safe customization

When customizing colors, verify contrast:

// Use tools like WebAIM Contrast Checker
// https://webaim.org/resources/contrastchecker/

NeuroonWidget.init({
  styles: {
    // Ensure 4.5:1+ contrast is maintained
    textPrimary: '#1f2937', // vs white background = 13.5:1 ✓
    textSecondary: '#6b7280', // vs white background = 5.0:1 ✓
  },
});

User Preferences

prefers-reduced-motion

The widget respects reduced motion preference:

@media (prefers-reduced-motion: reduce) {
  .neuroon-widget * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

prefers-color-scheme

With theme: 'auto', the widget follows system preference:

NeuroonWidget.init({
  theme: 'auto', // Follows prefers-color-scheme
});

prefers-contrast

The widget increases contrast when enabled:

@media (prefers-contrast: more) {
  .neuroon-widget {
    --nrn-border-default: 0 0 0;
    --nrn-text-secondary: var(--nrn-text-primary);
  }
}

Focus Visible

Focus indicator

All interactive elements have a visible focus indicator:

.neuroon-widget :focus-visible {
  outline: 2px solid rgb(var(--nrn-primary));
  outline-offset: 2px;
}

Skip links

The widget includes a skip link to jump to main content:

<a href="#neuroon-results" class="skip-link">
  Skip to results
</a>

Testing Accessibility

Recommended tools

Tool	Use
axe DevTools	Browser extension
WAVE	Web evaluator
Lighthouse	Chrome audit
VoiceOver	macOS screen reader
NVDA	Windows screen reader

Verification checklist

• Navigable by keyboard only
• Visible focus on all elements
• No flashing content
• Text contrast ≥ 4.5:1
• All images have alt text
• Forms have labels
• Errors announced to screen readers
• Functional at 200% zoom
• Respects prefers-reduced-motion

Report Issues

If you find any accessibility issues:

1. Describe the issue and context
2. Indicate browser and assistive technology used
3. Contact support@neuroon.ai

We are committed to resolving accessibility issues with high priority.

Resources

• WCAG 2.2 Guidelines
• WAI-ARIA Practices
• WebAIM Contrast Checker
• A11y Project Checklist

Next steps

• Theming - Customize while maintaining accessibility
• Configuration - Widget options