Image hotspots are used to present information about a particular part of the image which is displayed in the form of an overlay. When users click on the hotspot the overlay appears and they can access the information available within it.
In online learning image hotspots are used to teach concepts about key organs of a human body, fruits with rich vitamins, planets in the solar system, and even different geographical locations displayed on a map.
How to Implement
This section lists the techniques to implement accessible image hotspots on a web page.
Content Writers Need To…
Specify alternate textual descriptions for each image.
Specify alternate text for hotspots that clearly describe their function. Additionally, add a hidden instruction before the image to inform screen reader users that clicking on the hotspots will reveal more information.
Practices to Apply & Avoid
Ensure that the hotspots have descriptions that clearly indicate their function. For example, on the Pearson Map Master course, the description for hotspot images is available only when the user hovers over the hotspot images.Add textual description for the above hotspot as “Country: Germany; Language Subfamilies: Germanic”.
How to Test for Accessibility
To test for accessibility of image hotspots on a web page, perform the following steps:
Open the web page that needs to be tested in a browser.
Right-click on the hotspots to inspect their code.
Check if textual description for the hotspots sufficiently describes thier function.
If the condition in step 3 fails, then it is an accessibility violoation as per WCAG 2.1 success ciriteria 1.1.1 at Level A.
