Picture element. Is longdesc on the child img element a good solution?

Document history Created 6th of September 2012, updated 7 September 2012. Reference test updated 8 September 2012.

Note: In test 1 and test 2, the short, alternative text is supplied via fallback directly in the picture element — rather than inside the alt of the img element.

Test results

See page bottom.

Reference test

• The img element has a longdesc.
• There is no picture element or polyfil
• There is a picture element, but it is unstyled — thus there is no polyfil.
  (The reference test was changed in order to make the reference test 100% identical to the unstyled and unpolyfilled test that Laura put forward.)

The point with this test is just to show/demo how the longdesc attribute works.

Test 1

• The img element has a longdesc.
• The image resource of the picture element loads above (and thus hides) the img child element.

This is before the image. Photo of a Eurasian lynx, resting on the ground, with raised head, and attentive eyes looking towards the photographer. The forefeet in front of itself. This is after the image.

Test 2

• The img element has a longdesc.
• Inspired by Harry Roberts’ “responsive images right now”-technique:
  The image resource of the picture element loads behind the img child element, and the — transparent — image of the img element loads on top.

This is before the image. Photo of a Eurasian lynx, resting on the ground, with raised head, and attentive eyes looking towards the photographer. The forefeet in front of itself. This is after the image.

(Read about the photographer and rights of the above photo at Wikipedia)

Results data

Reference test

All equipment mentioned in this test has some level of support for longdesc and do thus (unless something else is noted) support the reference test.

Test 1

iCab and Opera (Browsers with native contextual menu access to longdesc)

None of them works with Test 1.

JAWS (screenreader)

Works

Test 2

iCab and Opera (Browsers with native contextual menu access to longdesc)

Works

JAWS (screenreader)

Works