YOUR GUIDE TO

Accessibility on the Canvas with JavaScript

Screen-reader ready components on the Canvas

Welcome readers from ◎ Your Guide to Coding Creativity 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.

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.

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.

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.

RadioButtons and Checkbox Accessible Components

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

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."}
];

Accessible Tabs and Pads on the Canvas

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

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.

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.

CONCLUSION

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.

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!

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

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

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