Tabspot – Accessible Image Hotspots

Add pins to an image and show a short text when a visitor activates one. Built for accessibility first:

• Every pin is a real button, reachable with Tab and opened with Enter or Space.
• Popups use the browser’s native popover: Esc closes, clicking outside closes, focus returns to the pin.
• No JavaScript on the front end.
• Pin labels are read by screen readers.

Most hotspot plugins don’t document keyboard or screen-reader support; this one is built around it.

In the editor, click the image to add a pin, drag it or use the arrow keys (Shift moves 10%) to move it. Keyboard users can also use “Add hotspot” in the sidebar, where each pin has a label, text and position sliders.

Popups sit beside their pin in browsers that support CSS anchor positioning and are centred in the others.

Source code

The build/ folder is compiled from the src/ folder included in this plugin. To rebuild it, run npm install and then npm run build.