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…
