My demo of an accessible, canvas-like picture element

(This is a quick note — I may update it later with the exact references.)

Everyone talks about a new, responsive image element. And a draft for this was resently published in the HTML Working Group. In that draft, the proposed picture> element has got an <code>alt attribute. Thus it mimics the img element very closely.

Steve Faulkners then presented the idea of using reall fallback instead of an attribute. Not only that, he suggested basing the fallback on the model of the canvas element. Thus, the img element that the picture draft suggest as fallback for UAs that don’t support picture, could continue to be used even when browsers support the new element.

How can that be? Well, in the model of the canvas element, then the fallback is not only fallback  — but a sub DOM. And, in fact, a sub DOM is not really fallback, but rather a parallel version aimed at assitive technology. Sure, it will also funciton as fallback, if the user agent is completly devoid of support for the new elemetn.

But what I wanted to tell …

… was that I have a demo. A accessible picture element demo. The demo does not seek to demo the responsive side of the element. It only seeks to demo how to emulate a canvas-like picture element.

Demo: Accessible picture element demo

The demo has been tested in VoiceOver (with Safari, iCab and Firefox nightly), in JAWS (with IE8, IE9 and Firefox 15), in NVDA (with IE9 and Firefox 15).

Room for improvement.

  • If the UA supports CSS but not JavaScript, then the fallback will not render.
  • The image-did-not-load script is not reliable enough in IE8 and below.

On the positive side

  • It works in all the tested screenreaders.
  • It works (knock on woods) both with and without the HTML5 shiv.
  • It allows markup in the fallback

Kommentera

|