YOUR GUIDE TO

Accessibility on the Canvas with JavaScript

Screen-reader ready components on the Canvas

Dr Abstract
5 min readJul 28, 2020

--

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.

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

--

--

Dr Abstract

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