Accessibility (a11y)

Build inclusive components with ARIA and keyboard support.

Building Accessible Components

Alpine gives you full control over keyboard interactions and ARIA attributes. By combining @keydown, :aria-*, and the Focus plugin, you can create components that are usable by everyone, including people using assistive technologies.

Key Principles

• Always manage focus – when opening a modal, move focus inside it; when closing, return focus to the trigger.
• Use appropriate ARIA roles (role="menu", role="dialog", etc.).
• Link labels and descriptions with $id and :aria-labelledby.
• Ensure all interactive elements are keyboard accessible.

Example: Accessible Dropdown

<div x-data="{ open: false, id: $id('dropdown') }">
  <button @click="open = !open" :aria-expanded="open" :aria-controls="id">
    Options
  </button>
  <ul x-show="open" :id="id" @keydown.escape="open = false" role="menu">
    <li role="menuitem" tabindex="0"><a href="#">Item 1</a></li>
    <li role="menuitem" tabindex="0"><a href="#">Item 2</a></li>
  </ul>
</div>

Focus Management with x-trap

The Focus plugin's x-trap directive automatically keeps focus inside a modal or dialog, and the $focus magic helps you move focus programmatically.