Accessibility

Overview

Accessibility is a core design principle in ARC UI. Every component is built to be usable by everyone, including people who use assistive technologies, keyboards, or alternative input devices.

• Semantic HTML elements and ARIA roles where needed
• Full keyboard navigation for all interactive components
• Visible focus indicators with configurable styles
• Sufficient color contrast ratios
• Reduced motion support via prefers-reduced-motion

ARIA Attributes

ARC UI components use appropriate ARIA roles and attributes automatically. For example, arc-modal uses role="dialog" and manages aria-modal, while arc-tabs uses role="tablist", role="tab", and role="tabpanel".

You can pass additional ARIA attributes through to the underlying element:

<!-- Labels -->
<arc-button aria-label="Close dialog">
  <arc-icon name="x"></arc-icon>
</arc-button>

<!-- Descriptions -->
<arc-input
  label="Password"
  aria-describedby="pw-hint"
></arc-input>
<span id="pw-hint">Must be at least 8 characters</span>

<!-- Live regions -->
<arc-alert aria-live="polite" variant="success">
  Changes saved successfully
</arc-alert>

Keyboard Navigation

All interactive components support keyboard navigation. Here are the key bindings by component type:

Focus Management

ARC UI provides two focus indicator styles via design tokens:

Focus is only shown on keyboard navigation (via :focus-visible), not on mouse clicks. Overlay components like arc-modal and arc-drawer trap focus within the dialog while open, preventing users from tabbing to background content.

/* Customize focus styles globally */
:root {
  --focus-ring: 0 0 0 2px var(--bg-deep),
                0 0 0 4px var(--accent-primary);
  --focus-glow: var(--focus-ring),
                0 0 16px rgba(77, 126, 247, 0.3);
}

Screen Readers

ARC UI uses Shadow DOM for style encapsulation. While Shadow DOM can create challenges for screen readers, we follow these patterns to ensure compatibility:

• Slotted content remains in the light DOM, so screen readers can access it directly.
• ARIA attributes set on the host element are reflected into the shadow root where needed.
• Labels use the label attribute or aria-label to ensure elements are announced correctly.

<!-- Use slot for screen-reader-accessible content -->
<arc-card>
  <span slot="heading">Account Settings</span>
  <p>Manage your profile and preferences.</p>
</arc-card>

<!-- Use label attribute for form elements -->
<arc-input label="Email address"></arc-input>
<arc-select label="Country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</arc-select>

Color & Contrast

ARC UI's color tokens are designed to meet WCAG AA contrast requirements:

• Text on backgrounds: --text-primary on --bg-deep achieves a contrast ratio above 15:1.
• Muted text: --text-muted meets the 4.5:1 ratio for normal text.
• Feedback colors: --color-success, --color-warning, --color-error, and --color-info are tuned for sufficient contrast in both dark and light modes.
• Interactive states: Focus indicators use high-contrast accent colors with glow effects for enhanced visibility.

Reduced Motion

ARC UI respects the prefers-reduced-motion media query. When enabled, transitions and animations are minimized or disabled:

/* Built into ARC UI components */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

This affects all component transitions (hover effects, drawer slides, modal fades, etc.) without changing functionality. Users can still interact with every component — only the motion is removed.