It looks like interaction and accessibility on the canvas element is about to get much easier to implement since the old and fabled “usemap” attribute is going to be added to the much hyped element. Back in the day, the Map element was used to make regions of an image into hyperlinks to other pages. Here is an example of how it worked, in case you don’t remember:

<img src="planets.gif" usemap="#planetmap" /> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" href="sun.html" /> <area shape="circle" coords="90,58,3" href="mercury.html" /> <area shape="circle" coords="124,58,8" href="venus.html" /> </map>

Now, there is a proposal to add the same feature to the canvas element, making areas clickable to either other pages or to JavaScript code that you might want to run for interaction purposes. Besides being a boon to development of interaction, adding support for image maps to the canvas element also allows for accessibility and keyboard focus on those interactive regions without the developer having to do any additional work. It looks like the proposal has a good chance of making it into the final spec since all major browser vendors are backing it.

Here are the positive effects listed in the proposal:

Simplifies the task of adding interactive areas on a canvas.

Provides a simple mechanism for authors to use to ensure that interactive areas of a canvas are keyboard navigable by default.

Provides a simple mechanism to provide name/role/state and description information to user agents about interactive areas on a canvas.

Provides a simple mechanism to expose the focus of interactive areas to accessibility APIs and provide focus rectangles without burdening the author.

Provides a simple mechanism to add ARIA attributes to provide additonal semantics to interactive areas on a canvas.

Makes it easier for authors to make interactive canvas content accessible.

What do you think? Is this the best way to add easy interactivity and accessibility to areas within a canvas? Let’s give some feedback to this proposal!