Add usemap attribute to the canvas element

The following is a Change Proposal for Section 4.8.10 The canvas element of the HTML5 Specification.

Partial resolution for ISSUE 74 canvas-accessibility

• Proposal Editor: Steve Faulkner (faulkner.steve@gmail.com)

Date: April 6 2010 (updated June 25 2010).

Please address feedback to the Public Canvas API mailing list (public-canvas-api@w3.org) and the HTML working group mailing list (public-html@w3.org ).

Summary

Modify 4.8.10 The canvas element section of the HTML5 specification to allow the usemap attribute to be applied to the canvas element.

Rationale

Currently the specification does not allow the usemap attribute to be applied on the canvas element. Allowing usemap on canvas will provide a method to easily add interactive areas to a canvas. The method is familiar to developers and is conceptually simple. Interactive areas are keyboard accessible by default, provide default focus rectangles that are exposed to accessibility APIs without the author having to do anything. They expose role/name/state/description information to assistive technology and can also have other behaviours attached to them using the HTML event handler attributes. ARIA can be used to expose additional/modified semantics to Accessibility APIs as required by developers/designers needs. The addition of usemap has support from browser vendor representatives including Microsoft, Mozilla, Opera and Safari/Webkit.

Example of where implementing image map functionality on canvas world be useful: http://caimansys.com/painter/index.html on the right had side are 3 widgets built using canvas

• color widget
• brush size widget
• playback toolbar

It would be trivial for all 3 to be made keyboard accessible using an image map and have ARIA attached to the area elements to expose the semantics (roles, states and properties) of the interface elements.

Details

Add the usemap attribute to the canvas element.

The following details are from the change proposal Improve image maps and use them to make canvas accessible:

In 4.8.10 the canvas element

Add the usemap attribute to the list of attributes for the canvas element

Add

          attribute DOMString useMap;

to the interface description.

Add

The usemap attribute, if present while the canvas element represents embedded content, indicates that the canvas has an associated image map.

to the description of the element.

In section 4.8.11 The map element

Change the following text:

The images attribute must return an HTMLCollection rooted at the Document node, whose filter matches only img and object elements that are associated with this map element according to the image map processing model.

to

The images attribute must return an HTMLCollection rooted at the Document node, whose filter matches only canvas, img and object elements that are associated with this map element according to the image map processing model.

(and adjust non-normative text and examples analagously).

In section 4.8.12 The area element

change the text

The area element represents either a hyperlink with some text and a corresponding area on an image map, or a dead area on an image map.

to

The area element represents either a hyperlink with some text and a corresponding area on an image map, an interactive region of an image map, or a dead area on an image map.

remove the text

If the area element has no href attribute, then the area represented by the element cannot be selected, and the alt attribute must be omitted.

Rationale: An area element may be used represent an aria region, or some other command element, without having an href attribute.

Impact

Positive Effects

• 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.

Negative Effects

• Places additional requirements on implementors, the current version of the spec does not.
• Additional issues will need to be taken into consideration such as "How do you handle things like the drawing of the

canvas is not complete but the 'usemap' is active"

Conformance Classes Changes

Allow usemap on canvas to be conforming.

Risks

unknown