Skip to main content

Helper Utilities

Accessibility utilities for screen reader support in NuvoUI.

Screen Reader Only​

The .sr-only class visually hides content while keeping it accessible to screen readers. This is essential for providing context to users with assistive technologies.

How It Works​

The .sr-only utility applies specific styles to hide content visually while maintaining screen reader accessibility:

Usage Examples​

Provide keyboard users a way to skip repetitive navigation:

Form Labels​

When design uses placeholders instead of visible labels:

Icon Button Context​

Provide text descriptions for icon-only buttons:

Current Page Indicators​

In navigation menus, indicate the active page:

Status Announcements​

Announce important status changes:

Best Practices​

When to Use​

  • Navigation aids: Skip links, breadcrumb separators
  • Form elements: Labels for inputs with only placeholders
  • Icons and symbols: Text alternatives for visual indicators
  • Status updates: Announce changes that are only visual
  • Table headers: Additional context for complex tables
  • Pagination: "Page X of Y" information

When NOT to Use​

  • Don't hide important content: If sighted users need it, don't hide it
  • Don't duplicate visible text: Avoid redundancy
  • Don't overuse: Too many screen reader announcements can be overwhelming

Implementation Guidelines​

  1. Be concise but descriptive: "Close" is better than "X button"
  2. Provide context: "Delete item" is better than just "Delete"
  3. Test with real screen readers: NVDA, JAWS, VoiceOver
  4. Use semantic HTML first: Often better than hiding content
  5. Consider all users: What makes sense aurally and visually

Accessibility Testing​

Tools​

  • Screen Readers: NVDA (free), JAWS, VoiceOver
  • Browser Extensions: axe DevTools, WAVE
  • Keyboard Navigation: Tab through your interface
  • Automated Testing: Pa11y, Lighthouse

Quick Test​

  1. Turn on a screen reader
  2. Close your eyes
  3. Navigate your interface
  4. Can you understand everything?

API Reference​

ClassDescriptionCSS Properties
.sr-onlyScreen reader only contentposition: absolute, width: 1px, height: 1px, clip: rect(0,0,0,0)

Browser & Screen Reader Support​

Universal support across:

  • All modern browsers: Chrome, Firefox, Safari, Edge
  • All major screen readers:
    • NVDA (Windows)
    • JAWS (Windows)
    • VoiceOver (macOS/iOS)
    • TalkBack (Android)
    • Narrator (Windows)

This pattern follows WCAG 2.1 Level AA guidelines for accessibility.