At the time of this writing, the HTML5 specification is still in draft form. And the CANVAS element is not showing any promise of being accessible. This could change, but for now it is up to the developer to provide alternative text for CANVAS.
Example 1 below shows the use of “Fallback Text”. HTML5 does provide this in case the browser does not support CANVAS. However, at this time, it it not readable by the JAWS screen reader so I doubt it will be helpful.
Example 2 below shows the best way to provide alternative text at this point in time. Using Alternative Text that is part of the HTML and not the CANVAS tag.
Example 1:
Using CANVAS’s fallback text.
Alternative text: a Red and Blue solid box about 1 inch square.
Code
function draw(id) { var canvas = document.getElementById(id); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } }
Works With
Browser | Screen Reader | Results |
---|---|---|
IE 9 | JAWS 12 | No |
FF 4 | JAWS 12 | No |
Example 2:
Using the HTML to create Alternative Text
Alternative text: a Red and Blue solid box about 1 inch square.
Code
function draw(id) { var canvas = document.getElementById(id); if (canvas.getContext) { var ctx = canvas.getContext("2d"); ctx.fillStyle = "rgb(200,0,0)"; ctx.fillRect (10, 10, 55, 50); ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; ctx.fillRect (30, 30, 55, 50); } } Alternative text: a Red and Blue solid box about 1 inch square.
Works With
Browser | Screen Reader | Results |
---|---|---|
IE 9 | JAWS 12 | Yes |
FF 4 | JAWS 12 | Yes |
Standards:
- WCAG 2.0 SC 1.1.1 Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)