Accessibility Is Not Optional

Web accessibility is a legal requirement in many jurisdictions (ADA, EAA) and a moral imperative everywhere. Yet it is one of the most overlooked aspects of web development. The good news: if you use well-built components, most accessibility concerns are handled for you.

Aura UI components are built with WCAG 2.1 AA compliance from the ground up. Here is what that means in practice.

Keyboard Navigation

Every interactive Aura UI component is fully keyboard-navigable:

Buttons: focusable with Tab, activated with Enter or Space
Modals: trap focus inside, close with Escape
Dropdowns: navigate options with arrow keys, select with Enter
Tabs: switch with arrow keys, following the WAI-ARIA tabs pattern

<x-aura::tabs>
    <x-aura::tab name="profile" label="Profile">
        Profile content here.
    </x-aura::tab>
    <x-aura::tab name="settings" label="Settings">
        Settings content here.
    </x-aura::tab>
    <x-aura::tab name="notifications" label="Notifications">
        Notification preferences here.
    </x-aura::tab>
</x-aura::tabs>

This tabs component automatically applies role="tablist", role="tab", role="tabpanel", aria-selected, and aria-controls attributes. Keyboard users can navigate between tabs with arrow keys.

ARIA Attributes

Aura UI components include appropriate ARIA attributes by default:

{{-- The alert component includes role="alert" and aria-live="polite" --}}
<x-aura::alert variant="warning">
    Your session will expire in 5 minutes.
</x-aura::alert>

{{-- Inputs link labels, errors, and help text via aria-describedby --}}
<x-aura::input
    label="Username"
    name="username"
    help="3-20 characters, letters and numbers only"
    required
/>

When a validation error appears, the input's aria-describedby automatically updates to reference the error message, and aria-invalid is set to true.

Color Contrast

All Aura UI color combinations meet WCAG AA contrast ratios:

Normal text: minimum 4.5:1 ratio
Large text: minimum 3:1 ratio
UI elements: minimum 3:1 ratio against backgrounds

This applies to both light and dark modes. The "Vibrant Depth" design language uses carefully chosen gradient endpoints that maintain readability:

<x-aura::badge variant="primary">Active</x-aura::badge>
<x-aura::badge variant="danger">Overdue</x-aura::badge>
<x-aura::badge variant="success">Completed</x-aura::badge>

Each badge variant has been tested with contrast checking tools to ensure the text remains readable.

Focus Indicators

Visible focus indicators are essential for keyboard users. Aura UI uses a consistent focus ring across all interactive elements:

/* Aura UI focus styles */
:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

These focus rings are visible in both light and dark mode and meet the WCAG 2.4.7 "Focus Visible" criterion.

Screen Reader Support

Components include screen-reader-only text where visual context alone is insufficient:

{{-- The close button includes sr-only text --}}
<x-aura::modal title="Confirm Action">
    <p>Are you sure you want to delete this item?</p>
    {{-- Close button renders: <button><span class="sr-only">Close</span> X</button> --}}
</x-aura::modal>

Testing Accessibility

Tools we recommend:

axe DevTools browser extension for automated WCAG testing
Keyboard-only testing -- unplug your mouse and navigate your app
Screen reader testing with NVDA (Windows) or VoiceOver (macOS)

Aura UI handles the component-level accessibility so you can focus on page-level concerns like heading hierarchy, landmark regions, and content structure.

Back to Blog

Share:

Creating Accessible UI Components