Tabindex – Managing Keyboard Focus in HTML
SVG (Scalable Vector Graphics) are resolution-independent and ideal for icons, diagrams, and interactive visuals. However, by default, SVGs are not accessible – unless explicitly enriched with semantic and descriptive elements.
Why SVG Accessibility Matters
By default, only interactive HTML elements like buttons, links, and form fields are focusable. With tabindex, developers can make custom elements (like <div>, <span>) focusable or remove elements from the tab order.
Tabindex Values Explained
| Value | Behavior |
|---|---|
| tabindex="0" | Makes the element focusable in the natural tab order |
| tabindex="-1" | Element is not reachable via Tab, but can be focused via script |
| role="navigation" | Sets custom tab order, but is discouraged in modern accessibility practice |
Example – Focusable Custom Button
<div tabindex="0" role="button" onclick="...">
Open Menu
</div>This allows the element to receive keyboard focus and behave like a button when paired with keyboard event handling.
Best Practices
- Use tabindex="0" to make non-native elements keyboard-accessible.
- Use tabindex="-1" for elements that should only be focused programmatically (e.g., modals, skip links).
- Avoid positive values (tabindex="1" or higher) – they override natural flow and can lead to confusion.
- Ensure focus order is logical and predictable for all users.
Note: Use focusable="false" to prevent legacy screen readers from tabbing into the SVG.
WCAG Relevance
Correct use of tabindex supports these WCAG 2.1 success criteria:
- 2.1.1 – Keyboard Accessibility
- 2.4.3 – Focus Order
- 2.4.7 – Focus Visible
You can find out more about our services in the area of digital accessibility here.
