Thursday, July 5, 2012

Canvas Accessibility

On its own the HTML canvas element is not accessible to everyone and that's not likely to change. The canvas itself is simply a primitive drawing surface that web developers can use via a fairly low level graphics API. For example code to draw a triangle might look something like this:

ctx.beginPath();
ctx.moveTo(75,50);
ctx.lineTo(100,75);
ctx.lineTo(100,25);
ctx.fill();
  -- MDN
 
This offers developers a "standards compliant" way to have high fidelity control over the graphics of their web offering. Polished visual experiences usually reserved for the desktop, or for browser plugins (which are not web standards) can now be delivered in a web page.

Canvas sucks though.

You might say wat!? I'm going to naively try to condense thousands of words into a few here. There have been a great many splendid web experiences built with a good underlying document structure (DOM) consisting of the elements that have been around a lot longer than canvas. Combined with CSS, ARIA, and js it is possible to provide innovative web experiences for everyone. The elements and structure provide meaning that can be leveraged for accessibility, for searching, for styling etc. With canvas we lose that.

So what can we do for developers that need to use canvas?

Well, presumably if they are creating anything sophisticated there is meaning and structure somewhere. For example right now it might be in home-grown js data structures. If we could just find a way to have a consistent way for web developers to store structure then we have a glimmer of hope in providing accessibility tools with the information they need. What structure should we suggest web developers use? Well, how about HTML?

February 29th, 2012 we landed support for canvas accessibility in the development version of Firefox (which is now Firefox 13). In a nutshell a web developer can use the power of html inside canvas. The html will not itself be drawn on the screen, since that would circumvent the web developer's reason to choose canvas, and just be silly, but in all other respects this HTML will be "alive". Web developers will be able to utilize the built in keyboard navigation and event handling of the web, and the accessibility of the web.

Steve over at TPG has a good blog about HTML5 canvas accessibility support in FF and IE.

6 comments:

steve faulkner said...

Hi Dave,
I would really like your input (any one else) on the proposal currently being discussed in the HTML WG in regards to the addition of 'lightweight' canvas hit regions that can have an ARIA role and a label applied, but no author defined states and properties. These regions do are not associted with any elements in the DOM, so exist in script only. They represent a virutal DOM which will have to be communictaed to AT via the acc tree. I have concerns about this approach, as the lightweight objects will not be focusable and will not be able to represent any controls. I am having trouble how the element based DOM and the lighweight object virtual DOM will be merged as a representation in the accessibility tree and also unless authors are constrained to using them for container type structures such as a region or group, they will be used to represent interactive objects without sufficient accessibility information or interaction behaviour being able to be provided.

steve faulkner said...

Details of proposal here: 4.8.11.1.13 Hit regions. HTML WG discussion last post.

ko chess said...

jerseys cheap
cheap jersey

Fastbet said...

I recently came across your blog and have been reading along. I thought I would leave my first comment. I don't know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often. Prediksi Bola Prediksi Bola Agen Bola Online

Fastbet said...

Thank you for sharing to us.there are many person searching about that now they will find enough resources by your post.I would like to join your blog anyway so please continue sharing with us. Agen Bola Agen Bola

Andi Goda said...

Your style of presentation is very impressive. The meaningful contribution of your mind reflects on those people who are looking for new ideas and informations.. vizzy.us safety url monetize