Accessible Image Hotspots

Accessible Image Hotspots is a native Gutenberg block for creating responsive image annotations. Editors select a Media Library image, place up to 100 percentage-positioned hotspots directly on the image or through keyboard-equivalent controls, and provide a label, description, and optional link. Hotspots can be duplicated, reordered, moved with position sliders, and exported or imported as validated JSON. Four appearance presets, four marker styles, an accent color, marker sizing, and light or dark panels provide flexible presentation without a remote service.

Visitors operate each hotspot as a normal button. Opening one panel closes the previous panel, and Escape closes the active panel and restores focus to its trigger. The plugin uses local assets only and includes no jQuery, remote scripts, analytics, telemetry, accounts, or outbound requests. Reduced-motion preferences are respected, and server-rendered values are sanitized and bounded.

Features

Native Gutenberg block

Point-and-click hotspot placement

Keyboard-equivalent centered placement and position sliders

Up to 100 responsive percentage-positioned hotspots per image

Duplicate and reorder controls

Validated, bounded hotspot JSON import and export

Classic, High Contrast, Attention Pulse, and Night Panel presets

Solid circle, outline circle, pulse circle, and solid square markers

Custom accent color and 24-to-64-pixel marker sizing

Light and dark annotation panels

Keyboard-operable buttons and Escape focus restoration

Screen-reader labels and associated regions

Optional links per hotspot

Automatic edge-aware panel flipping

Reduced-motion support

Local CSS and JavaScript with no external service

Sanitized and bounded server-side rendering

Installation, privacy, and upgrade documentation included

Requirements

WordPress 5.8 or newer

PHP 7.4 or newer

The WordPress block editor

A local Media Library image

Instructions

1. Download and unzip the main Codester package.

2. In WordPress, open Plugins > Add New Plugin > Upload Plugin.

3. Upload Accessible-Image-Hotspots-WordPress-plugin-v0.2.0.zip, install it, and activate it.

4. Add the Accessible Image Hotspots block to a post or page.

5. Choose an image, place hotspots, enter labels and optional descriptions or links, select an appearance, and publish.