(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