Accessibility on the Canvas with JavaScript

Screen-reader ready components on the Canvas

Welcome readers from ◎ Your Guide to Coding Creativity on the Canvas

an example of setting the sides of a polygon with a stepper and the color with a colorpicker. Click link beneath to try
Example of an accessible Stepper and ColorPicker on the canvas

It is quite an experience to close your eyes and be able to make a yellow triangle using only voice guidance, tabs and enter or tap patterns. The canvas is one big picture so does not have built in accessibility for screen readers. We solved this by adding HTML tags in behind the canvas as a surrogate accessibility system.

The ZIM JavaScript Canvas Framework is referred to in the guide. Please see alternatives in ◎ Your Guide to Selecting a JavaScript Canvas Library or Framework. Although, as far as we know, ZIM is one of the most advanced canvas frameworks with respect to accessibility.

This image shows a grid of accessible examples. Press the link beneath to try out the canvas examples.
ZIM accessibility examples

A caveat… handling accessibility on the canvas was extremely tricky to code. The goal was to put HTML tags with proper Aria parameters in behind the canvas to accommodate accessibility. Over the three years since its launch, we have massaged the code to fix issues with different readers. The majority of the features work with Windows Narrator, Apple VoiceOver, Android TalkBack and NVDA. We expect others to work as well.

Video demonstrating accessibility on canvas with ZIM

Accessible Components on the Canvas

Here is the code to make a Button, Slider and Dial accessible in ZIM. This will put the components on the screen and make them available to a screen reader and add a highlight box around active components.

new Button().center();
new Slider().pos(0,100,CENTER,CENTER);
new Dial().pos(0,-100,CENTER,CENTER);
new Accessibility();

Accessible Button and Indicator on Canvas

To try out a screen reader, go the button example, if in Windows, type Narrator into your start bar and start Narrator. For Apple, turn on VoiceOver in the System Preferences. Tab and Enter through the content. In the example, pressing Enter will change the indicator which is read but the rectangle does not lose focus.

An example of accessibility with a button and label — click link under picture
Accessibility example clicking button and toggling label and rectangle with indicator

Accessible Dial and Slider on the Canvas

Below are a Dial and a Slider that are changing the width and height of the circle. On mobile, these will provide select boxes that are well known on mobile in accessibility. These then change the values of the components.

An example of accessibility with a dial and slider— click link under picture
Accessible Slider and Dial for desktop and mobile

RadioButtons and Checkbox Accessible Components

Here are standard RadioButton and CheckBox components. The options will be read as they are tabbed or swiped through.

An example of accessibility with a radiobutton and checkbox — click link under picture
Accessible RadioButtons and Checkbox on the canvas

Accessible Text and Images on the Canvas

Here are accessible Label and Loader for pictures on the canvas. Extra text can be written for any DisplayObject and passed in to accessibility:

accessibility.tabOrder = [
{obj:pic, title:"A tall slender vase, by Slam DarkLo, sits on a paint-splattered potter's wheel. The vase has curves like a woman with wavy black and white lines accentuated by stripes and zig-zags like running your finger over a comb."}
An example of accessibility with a label and picture uploader — click link under picture
Accessible Label and Loader on the canvas

Accessible Tabs and Pads on the Canvas

Pressing the tabs make the rectangle change width and pressing the pad makes the rectangle change height.

An example of accessibility with a tabs and pad— click link under picture
Accessible Tabs and Pad on the canvas

Accessible Waiter and Pane (Pop-up) on the Canvas

Here is an example of an accessible Waiter and Pane pop-up message. The waiter will read that we are loading and when the pane pops up, the message will be read. You can also call the talk() method of Accessibility to have the screen reader read what is specified.

An example of accessibility with a waiter and pane pop-up— click link under picture
Accessible Waiter and Pane on the canvas

The Code Behind the Accessibility!

As you saw, the code to use Accessibility on the Canvas in ZIM is quite simple. The code in behind was very tricky. Below is a Screen Capture. Sort of cool if you think of it as a city.


There are over a dozen ZIM Components that are hooked up for accessibility with a screen reader using the Accessibility class. If you have suggestions or would like to get involved with the ZIM community, please contact us on ZIM Slack where we have a channel for Accessibility.

An example of accessibility with over a dozen ZIM Components— click link under picture
ZIM components with accessibility

We also have a surprise in the ZIM Skool and ZIM Kids sites for those with screen readers. We may have gone overboard, but we really hope that you like our alt tags on the images there, throughout the lessons.

Further reading

If you would like to see what coding in general is like on a canvas library or framework, here is ◎ Your Guide to Coding Creativity on the Canvas. This guide includes twelve other guides of which the Accessibility guide is one.

All the best, Dr Abstract!

Dr Abstract leaning of from his computer with a sly smile presenting the content written above. Code Creativity with ZIM!

Follow us on Twitter at ZIM Learn and here is ZIM Learn on YouTube!

Written by

Inventor, Founder of ZIM JavaScript Canvas Framework and Nodism, Professor of Interactive Media at Sheridan, Canadian New Media Awards Programmer and Educator

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store