Description
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.
Screenshots
Blocks
This plugin provides 1 block.
- Tabspot Image Hotspots Keyboard and screen-reader accessible image hotspots for the block editor.
Installation
- Upload the plugin to the
/wp-content/plugins/directory, or install it from the Plugins screen. - Activate the plugin through the ‘Plugins’ screen.
- In the block editor, add the “Tabspot Image Hotspots” block and choose an image.
FAQ
-
Does it load any JavaScript on the front end?
-
No. Popups use the native HTML
popoverattribute. -
Can I put images or links in the popup?
-
Not yet. Popup content is plain text; line breaks become paragraphs.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Tabspot – Accessible Image Hotspots” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Tabspot – Accessible Image Hotspots” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
0.1.0
- Release