Firefox 14: image long description via link using aria-describedby
In his latest article Mozilla accessibility engineer Alexander Surkov describes an interesting implementation development in FireFox 14, which is a possible solution using ARIA to provide a link to a long description on an image:
Using aria-describedby to provide a long description link on an image
ARIA aria-describedby attribute used on HTML image element and pointing to HTML a element makes the image accessible to expose showlongdesc action. This action opens an URL provided by @href attribute on HTML a element in a new window.
When the image has focus the screen reader user can press enter to activate the link, because a link action
showlongdesc is exposed on the image, it uses the URL from the link referenced via
Note: example from the test page.
<img src="shalott.jpg" aria-describedby="a" alt="Painting of a young woman with long hair, sitting in a wooden boat.">
A painting inspired by Alfred Tennyson's poem The Lady of Shalott.
<p><a id="a" href="http://www.tate.org.uk/art/artworks/waterhouse-the-lady-of-shalott-n01543/text-summary">Further information about the painting.</a></p>
- This is an experimental implementaion only I DO NOT suggest anyone uses this method for anything other than testing.
- Only works in FireFox 14+
- Although the accessible action is exposed and can be activated from the image when using a screen reader (when virtual focus is on the image, pressing enter will open the link), there is no indication to user that the link can be activated from the image.
- From initial discussions with implementers and stakeholders, they are not keen this implementation
- Still works when the link is hidden using the HTML5
hiddenattribute or CSS
- Has the same UI issue as current
longdescattribute implementations: The link always opens in a new window/tab.
- test page