Clickable Floor Plans and Product Diagrams: Give Every Region a Named Destination
If customers can click different parts of an image to reach different pages, commission it as navigation, not just as a picture. Each region needs an understandable destination, and the same destinations should be available through ordinary text links on the page. A description of the whole image cannot tell customers what every clickable part does.
This matters for a showroom plan linking to departments, an equipment diagram linking to replacement parts, or an organisational chart linking to team profiles. These are illustrative project scenarios, not claims about work already delivered.
Separate the image's meaning from each link's purpose
The W3C WAI image-map tutorial describes a client-side image map as an image divided into selectable regions, usually links to other pages. It distinguishes the text alternative for the image, which supplies informative context, from the alternative for each linked region, which describes the destination or action.
For a showroom plan, the image description might identify the floor and what the plan shows. The individual links could then identify “Lighting department” and “Kitchen displays”. Those proposed labels express destinations; “Left rectangle” only describes a shape.
Do not squeeze the whole destination catalogue into one image description and leave the individual links unnamed. Conversely, a set of destination names does not automatically explain a meaningful relationship shown in the drawing. Navigation and explanation are separate parts of the brief.
Keep a region-to-destination register
My commissioning recommendation is to maintain a small register containing the visible region name, destination page and corresponding text-link label. The register gives the content owner something concrete to approve before anyone adjusts coordinates.
A product diagram needs particular care. Does selecting a component open its information page, select an exact replacement part, or merely enlarge the picture? Decide that explicitly. A picture of an assembly should not silently imply that a part is compatible or available to buy. Compatibility and ordering need their own verified information and deliberate actions.
For project scope and ownership, start with a website or web-app brief. Include the person responsible for maintaining both the artwork and the destination register.
A smaller picture can still have the wrong clickable regions
WAI warns that image maps may fail on some mobile devices when the region coordinates are not scaled in the same proportions as the image. It recommends redundant text links on the same page to compensate.
A diagram looking correct on a phone is therefore not enough. Ask the developer to check whether each selectable region still follows the right visual object when the image changes size. A customer tapping a door should not reach a neighbouring department because the artwork shrank while the link geometry did not.
The ordinary links are not a list of decorative captions. They should reach the same destinations as the corresponding image regions. Make their labels understandable without requiring the customer to find the region first.
Treat replacement artwork as a navigation change
As a project requirement, review the mapping whenever artwork is cropped, rearranged or replaced. Keeping the same filename does not prove that old coordinates still point to the same object.
For example, moving two departments in a floor plan can leave working links attached to the wrong labels. An automated check that both URLs return a page would miss that error. The content owner needs to compare the visible drawing, the region register and the actual destination.
Also agree what happens when a destination is retired. Update both routes to it, or replace them with an appropriate explanation. Do not keep a plausible-looking hotspot simply because the image still contains that shape.
Acceptance checks to request
Use a nonconfidential demonstration diagram and a known destination list. These are proposed project checks, not a claim that a particular implementation has been tested:
- The whole image has a useful contextual description, and every linked region has a destination-specific name.
- Each region opens the intended destination, not merely an available page.
- The same destinations are reachable through visible text links on the same page.
- At the supported narrow and wide layouts, selectable regions remain aligned with the intended objects.
- Keyboard users can find and operate the navigation, with a visible indication of the active link. Ask for testing with the browsers and assistive technology agreed for the project.
- A replacement-image rehearsal includes checking the region geometry and text links, not just uploading a new file.
The WAI page is implementation guidance and includes historical browser notes; it is not a current device-support matrix or a legal opinion. Named regions and equivalent links address this navigation decision, not every aspect of accessibility. If the diagram is only explanatory and has no linked regions, a clear written explanation may be the more appropriate task. Do not add invisible clickable areas merely to make a static illustration feel interactive.