Accessibility testing <picture> element and <srcset> attribute

Demo of <picture> and <source> elements, and <srcset> attribute

The two images below use a either a combination of the <picture> and <source> elements with a <srcset> attribute defined on the <source>, or the <srcset> attribute on the <img> element directly. Support for the <picture> element and <srcset> attribute is limited to Chrome Canary Chrome Canary 38+ and Firefox Nightly 34+ with the dom.image.picture.enabled and dom.image.srcset.enabled flags set to "true." Support for <srcset> also appears in Webkit 7.0.7+. Tests should still be performed on non-supporting browsers as should degrade gracefully, but do not expect alternative resources to be used (default image dimensions are 100px x 100px). In supporting browsers, changing the size of your viewport and reloading the page should result in the display of images resources with appropriate dimensions.

A pug (type of dog) with its head tilted to the side
<picture> element with <srcset> attribute on <source> element
A pug (type of dog) with its head tilted to the side
<img> element with <srcset> attribute

Malformed examples

The following examples include an alt attribute on the <picture> and <source> elements and are examples of anticipated author errors. A poor accessibility experience is expected, but included here to test behavior.

<alt> attribute set on the <picture> element
<alt> attribute set on a <source> element that includes a <srcset> attribute.

<img> element with <alt> attribute for reference

Here is an example of a old fashioned <img> element with a properly defined <alt> attribute for reference.

A pug (type of dog) with its head tilted to the side
<img> element with an <alt> attribute