Loading...
All functionality must be available from a keyboard without requiring specific timings for individual keystrokes.
Use left/right arrows to navigate:
• Focusable by default
• Responds to Enter and Space
• Clear focus indicator
• Accessible to screen readers
• Has role="button"
• Has tabIndex="0"
• Handles Enter and Space
• Visible focus indicator
• Allows quick navigation
• Visible on focus
• Helps keyboard users
• Screen reader friendly
• Proper label association
• Clear focus indicator
• Screen reader accessible
• Logical tab order
<!-- Good Example: Keyboard Accessible Button -->
<button
type="button"
onclick="handleClick()"
onkeydown="handleKeyDown(event)"
aria-label="Save document"
class="accessible-button"
>
Save
</button>
<!-- Good Example: Keyboard Accessible Link -->
<a
href="/documents"
onkeydown="handleKeyDown(event)"
aria-describedby="documents-help"
>
View Documents
</a>
<div id="documents-help" class="sr-only">
Navigate to documents page
</div>
<!-- Good Example: Custom Interactive Element -->
<div
role="button"
tabindex="0"
onclick="customAction()"
onkeydown="handleCustomKeyDown(event)"
aria-label="Toggle sidebar"
class="custom-button"
>
Toggle Sidebar
</div>
<!-- Good Example: Skip Link -->
<a href="#main-content" class="skip-link">
Skip to main content
</a>
<main id="main-content" tabindex="-1">
<!-- Main content -->
</main>
<!-- Bad Example: Non-keyboard Accessible -->
<div onclick="handleClick()">
<!-- This div is not keyboard accessible -->
Click me
</div>
<!-- Bad Example: Missing Tab Navigation -->
<div role="button" onclick="handleClick()">
<!-- Missing tabindex and keyboard handlers -->
Not keyboard accessible
</div>Remember: Keyboard accessibility is essential for users with motor disabilities, power users, and anyone who cannot use a mouse effectively.
Test your interfaces with keyboard-only navigation regularly to ensure full accessibility.