Accessibility

Screen Reader Classes

Hide content visually while keeping it accessible to assistive technologies. These utilities follow the standard visually hidden pattern used across the web.

.sr-only

Hides an element visually while keeping it available to screen readers. Use this for text that should only be announced to assistive technologies, like icon-only buttons or decorative elements with meaningful content.

<span class="sr-only">Screen reader only text</span>
<button>
  <span class="sr-only">Close dialog</span>
  <svg><!-- icon --></svg>
</button>

.not-sr-only

Makes an element visible again. Often used in combination with .sr-only to reveal content on focus, such as skip navigation links that become visible when focused.

<div class="sr-only focus-within:not-sr-only">
  <a href="#main">Skip to main content</a>
</div>

.sr-only-focusable

Hides content visually but makes it visible when focused. Perfect for skip links that help keyboard users navigate directly to main content.

<a href="#content" class="sr-only-focusable">
  Skip to main content
</a>

Focus Management

Apex provides focus management utilities for keyboard navigation. These help create clear, visible focus indicators that meet WCAG requirements.

Focus Visible (:focus-visible)

Apply styles only when an element receives focus via keyboard navigation (not on mouse click). This creates a cleaner experience for mouse users while maintaining accessibility for keyboard users.

<button class="focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:outline-none">
  Accessible Button
</button>

<input class="focus-visible:ring focus-visible:border-blue-500" />

Focus Within (:focus-within)

Apply styles to a parent element when any of its children have focus. Useful for highlighting form groups, cards, or containers when the user is interacting with contained elements.

<div class="focus-within:ring-2 focus-within:ring-blue-500 p-4 rounded-lg">
  <label>Search</label>
  <input type="text" class="w-full" />
</div>

Skip Link (.skip-link)

A pre-built skip link component that appears when focused, allowing keyboard users to bypass navigation and jump directly to main content. Position it as the first focusable element on the page.

<a href="#main-content" class="skip-link">
  Skip to main content
</a>

<main id="main-content">
  <!-- Page content -->
</main>

Reduced Motion

Respect user preferences for reduced motion with media query-based utilities. These automatically respond to the prefers-reduced-motion system setting.

Motion Reduce

Remove animations, transitions, and transforms when the user has requested reduced motion. These classes are applied automatically via media query.

<div class="motion-reduce:animate-none">
  <!-- Content with animation -->
</div>

<button class="motion-reduce:transition-none">
  Hover effect
</button>

Motion Safe

Only apply styles when motion is safe (user has not requested reduced motion). Use these to opt-in to animations that might otherwise be distracting.

<div class="motion-safe:transform-none">
  <!-- Only applies when motion is safe -->
</div>

High Contrast Mode

Support for Windows High Contrast Mode and prefers-contrast media queries. These utilities help ensure your content remains accessible in high and low contrast environments.

High Contrast

Applied automatically when the user has selected high contrast mode. Adds borders and outlines using currentColor to ensure visibility.

<button class="contrast-high:border contrast-high:outline">
  High Contrast Button
</button>

Low Contrast

Applied when the user prefers low contrast. Uses subtler borders and outlines.

<div class="contrast-low:border">
  <!-- Styled for low contrast preference -->
</div>

Focus Ring Utilities

Complete reference of focus ring and outline utilities available in Apex. All focus-visible utilities only apply on keyboard focus.

Accessibility Best Practices

• Always include visible focus indicators for interactive elements
• Use .sr-only for text that describes icons or visual elements
• Test with keyboard navigation and screen readers
• Respect prefers-reduced-motion and prefers-contrast settings
• Include a skip link as the first focusable element on the page

Color Blind Friendly Theme

Apex includes a built-in color blind friendly theme that adjusts the color palette to be more distinguishable for users with various types of color vision deficiencies.

Why Color Blind Accessibility Matters

Approximately 8% of men and 0.5% of women have some form of color vision deficiency. Using color blind friendly palettes ensures your interface remains usable and clear for these users.

How to Use

Apply the theme-colorblind class to your HTML element or any container to enable color blind friendly colors:

<html class="theme-colorblind">
  <!-- Your content -->
</html>

<!-- Or apply to a specific section -->
<div class="theme-colorblind">
  <!-- Color blind friendly content -->
</div>

Color Adjustments

The color blind theme adjusts semantic colors to have more distinct luminance values and hue separations:

Best Practices for Color Accessibility

• Never rely on color alone to convey information - always include icons or text labels
• Use patterns or textures in addition to colors for charts and graphs
• Test your designs with color blind simulation tools
• Provide a toggle for users to enable color blind mode if desired

Configuration

Accessibility utilities can be enabled or disabled in your SCSS configuration. By default, all accessibility features are enabled.

// In your SCSS configuration
$enable-accessibility: true;  // Enable/disable all accessibility utilities