Accessible Publishing Knowledge Base

Interactivity

Summary

...

Techniques

When scripting SVG images in EPUB 3, you must adhere to the principle of progressive enhancement. Scripting is unlikely to be available on all reading systems, as it is an optional feature of EPUB 3. Design SVG images such that any scripting only enhances the content.

The aria-* attributes can be attached to SVG elements. Properly setting and maintaining roles, properties and states increases the ability of all users to interact with dynamic content (e.g., SVG images used as custom controls).

Similarly, ensure that text equivalents for graphical components are updated to reflect the current state of the component.

When scripting SVG images, ensure that device-independent events have been used. Not all users will interact with your images in the same way.

Example

An SVG Button—SVG and the Web shows how ARIA roles and states can be used to create an accessible button.

References