Keyboard Navigation Tester
HTML Code Input
Visual Preview & Report
| Order | Element | Accessible Name | Tabindex |
|---|---|---|---|
| Run a test to see the report. | |||
Understanding Keyboard Navigation
Keyboard navigation is essential for accessibility, allowing users who cannot use a mouse to navigate a webpage. The most common form of keyboard navigation is using the Tab key to move between interactive elements like links, buttons, and form fields.
How Tab Order is Determined
The order in which elements are focused is determined by the following rules:
- Positive `tabindex`: Elements with a `tabindex` greater than 0 are focused first. They are ordered from the smallest `tabindex` value to the largest (e.g., `tabindex="1"` comes before `tabindex="2"`).
- Natural Order (`tabindex="0"`): Next, all naturally focusable elements (like ``, `
- Negative `tabindex`: Elements with a `tabindex` of -1 (e.g., `tabindex="-1"`) are not included in the tab order but can be focused programmatically with JavaScript.
Best Practices
- Avoid positive `tabindex` values. It's often better to structure your HTML logically so the natural DOM order creates an intuitive navigation flow.
- Ensure the visual order matches the DOM order. A user tabbing through your page should follow a path that makes sense visually.
- All interactive elements must be focusable. If you create a custom button with `` and JavaScript, add `tabindex="0"` to make it accessible to keyboard users.