Accessibility

NOBI’S ACCESSIBILITY EFFORTS

Accessibility

Disclaimer: We are not lawyers or certified accessibility auditors. This documentation presents our intended accessibility design. We make no warranties or guarantees about legal compliance (e.g. ADA, WCAG, Section 508). You should conduct your own audits in your environment.

Purpose

This page gives a high-level view of our accessibility approach, shared UI patterns, and integration guidance. Each component continues to maintain its own “Accessibility” section—this is the central reference.

Core Accessibility Philosophy

  • Keyboard-first interaction: All core UI elements and modes are operable via keyboard (Tab, Enter, Escape, Arrow keys).
  • Semantic ARIA wiring: Components use proper ARIA roles and attributes (e.g. role="combobox", aria-expanded, role="listbox", role="option").
  • Live announcements: For dynamic states (loading, no results), we use aria-live="polite" or role="status" to inform assistive tech.
  • Focus management & clearing: When overlays or panels close, focus returns or stays sensibly, and interim states (e.g. aria-activedescendant) are cleared.
  • Visible focus: Focus rings are visible by default (via :focus-visible); we avoid globally disabling outlines.
  • Respect reduced-motion: Animations/transitions respond to prefers-reduced-motion so users can disable motion.
  • Stable DOM & role consistency: We maintain consistent roles and ARIA relationships (e.g. don’t swap wrapper roles mid-flow) so screen readers don’t get mismatches.
  • Graceful fallback: In degraded environments (e.g. JS disabled), the default mode still behaves as a basic form input + submit.

Shared UI Patterns & Behaviors

Typeahead / Autocomplete Pattern

Many search and suggestion-based components share this pattern. Key behaviors:
  • The input is role="combobox" with attributes: aria-controls, aria-expanded, aria-activedescendant.
  • The suggestion panel is role="listbox"; its items are role="option" and the active one gets aria-selected="true".
  • When loading suggestions: aria-busy="true" on the input and a role="status" element inside the panel announces “Loading…”
  • When there are no matches: the same panel remains role="listbox", with a child role="status" for “No suggestions found”
  • Keyboard interactions:
    • ArrowDown / ArrowUp to move selection
    • Home / End to jump
    • Enter to choose an option
    • Escape to close panel & clear selection
  • Focus behavior: focus stays on the input (the panel is navigated via aria-activedescendant)
  • Closing: on Escape, click-away, or selection the panel hides/unmounts and aria-activedescendant / aria-expanded are reset
Whenever you use a suggestion UI pattern, follow the above wiring.

Integrator Guidelines & Styling Tips

Concern
Recommendation
Overriding CSS
Avoid removing focus outlines, removing :focus-visible, or hiding elements with display: none that carry ARIA roles.
Theming / Contrast
Ensure that your theme’s colors maintain contrast for text, icons, focus rings, and backgrounds per WCAG AA.
User motion preferences
Use CSS media queries to disable or simplify transitions when prefers-reduced-motion is set.
Touch / Mobile
Make tap targets at least 44×44 CSS px, and ensure responsive layout doesn’t hide or break keyboard navigation.

Testing & Audit Checklist

  1. Keyboard-only navigation — Tab through, open panels, traverse with arrows, select, close with Escape
  1. Screen reader flow — Using NVDA / VoiceOver / JAWS, verify that announcements (loading, suggestion count, no results) occur as expected
  1. Focus and selection clearing — Confirm that after closing a panel, aria-activedescendant is removed and aria-expanded="false"
  1. Contrast & focus visibility — Check that focus rings and text are visible and meet contrast thresholds
  1. Reduced motion test — With prefers-reduced-motion enabled, animations should either not run or be simplified
  1. Automated tooling — Run axe, pa11y, WAVE, or Lighthouse on pages using Nobi components to catch regressions

Links to Component Accessibility Specs