Focusable Svg Elements

title: "Focusable SVG Elements — Making Interactive SVGs Keyboard Accessible" description: "Learn how to make interactive SVG elements focusable and operable via keyboard for users who cannot use a mouse." weight: 8 date: 2026-06-28 lastmod: 2026-06-28 tags: [accessibility, svg]

Interactive SVG elements need focusable="true", tabindex, and keyboard event handlers so keyboard users can interact with them.

## What You'll Learn

How to make SVG elements focusable, handle keyboard events, and provide visible focus indicators.

## Why It Matters

SVG elements are not focusable by default. Without explicit focusability, keyboard users cannot interact with clickable SVG shapes, buttons, or links.

## Real-World Use

An interactive map SVG has clickable regions. Each region has focusable="true", tabindex="0", and an onkeydown handler for Enter/Space. A keyboard user can Tab between regions and select them.

## Focusable SVG Elements

```html
<svg role="img" aria-label="Interactive map of regions"
     viewBox="0 0 500 300">
  <!-- Focusable, interactive region -->
  <rect x="50" y="50" width="100" height="80"
        role="button" tabindex="0"
        focusable="true"
        aria-label="Region 1: North"
        data-region="north"
        onclick="selectRegion('north')"
        onkeydown="if(event.key==='Enter'||event.key===' ')selectRegion('north')"
        fill="#4a90d9" stroke="#333" stroke-width="2">
    <title>Region 1: North</title>
  </rect>

  <rect x="200" y="50" width="100" height="80"
        role="button" tabindex="0"
        focusable="true"
        aria-label="Region 2: Central"
        data-region="central"
        onclick="selectRegion('central')"
        onkeydown="if(event.key==='Enter'||event.key===' ')selectRegion('central')"
        fill="#d94a4a" stroke="#333" stroke-width="2">
    <title>Region 2: Central</title>
  </rect>
</svg>

CSS Focus Indicators

/* Focus indicator for SVG elements */
svg rect[tabindex]:focus,
svg path[tabindex]:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Alternatively, use stroke */
svg rect[tabindex]:focus {
  stroke: #0066cc;
  stroke-width: 3;
}

Common Mistakes

1. No tabindex on interactive SVG elements

Without tabindex, SVG elements cannot receive keyboard focus.

2. No role attribute on interactive elements

Interactive SVG elements need role="button", role="link", or appropriate role.

3. No keyboard event handlers

onclick alone is not enough. Enter and Space keyboard events must be handled.

4. No visible focus indicator

SVG focus indicators must be explicitly styled with CSS.

5. Missing aria-label on SVG elements

Interactive shapes need aria-label to describe their purpose.

Practice Questions

1. What attributes make an SVG element focusable? tabindex="0" and focusable="true" make SVG elements focusable.

2. What keyboard keys must interactive SVG elements respond to? Enter and Space must trigger the same action as a mouse click.

3. How do you style a focus indicator on an SVG rect? Use rect[tabindex]:focus { outline: 3px solid blue; } or stroke styling.

Challenge: Create an interactive SVG with three clickable shapes. Each must be focusable, keyboard-operable, and have a visible focus indicator.

FAQ

Mini Project

Create an interactive org chart SVG where each person's box is focusable, announces the name and role, and responds to Enter/Space clicks.

What's Next

Learn about Interactive Charts Accessibility and how to make dynamic charts accessible.