«
»

HTML5 Canvas

Jun 8th, 2011 at 9:21 am

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);
      }
    }
<canvas id="canvas1" width="150" height="150">
     <p>Alternative text:  a Red and Blue solid box about 1 inch square.</p>
</canvas>
<button onClick="draw('canvas1')">See Canvas Example</button>

Works With

Using CANVAS’s fallback is NOT RECOMMENDED to create Alternative Text
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);
      }
    }
<canvas id="canvas2" width="150" height="150">
</canvas>
<p>Alternative text:  a Red and Blue solid box about 1 inch square.</p>
<button onClick="draw('canvas2')">See Canvas Example</button>

Works With

Using the HTML to create Alternative Text
Browser Screen Reader Results
IE 9 JAWS 12 Yes
FF 4 JAWS 12 Yes

Standards:

In Accessibility, Best Practices, HTML5. Both comments and pings are currently closed.

Comments are closed.