Firefox 14: image long description via link using aria-describedby

Posted on Friday, 11 May 2012 by Steve Faulkner

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 aria-describedby.

aViewer accessibility inspection tool showing the accessible action 'showlongdesc'  exposed in MSAA from a link associated with an image using aria-describedby.y

code:

Note: example from the test page.

<figure>
<img src="shalott.jpg" aria-describedby="a" alt="Painting of a  young woman with long hair, sitting in a wooden boat.">
<figcaption>
A painting inspired by Alfred Tennyson's poem The Lady of Shalott.
</figcaption>
<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>
</figure>

Notes:

  • 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 hidden attribute or CSS display:none
  • Has the same UI issue as current longdesc attribute implementations: The link always opens in a new window/tab.
  • test page

About Steve Faulkner

Steve is the Senior Web Accessibility Consultant and Technical Director, TPG Europe. He joined The Paciello Group in 2006 and was previously a Senior Web Accessibility Consultant at Vision Australia. He is the creator and lead developer of the Web Accessibility Toolbar accessibility testing tool. Steve is a member of several groups, including the W3C HTML Working Group and the W3C Protocols and Formats Working Group. He is an editor of several specifications at the W3C including HTML 5.1, Using WAI-ARIA in HTML and HTML5: Techniques for providing useful text alternatives. He also develops and maintains HTML5accessibility

Comments

  1. Hmm. Oddly enough, the “long description” doesn’t describe the image at all. The figcaption does a better job of that (and it is stretching a point to call it a description of an image – it’s really what a title attribute might contain, and too verbose to even be a decent alt attribute).

    If this is the example usage, I am not confident about this technique meeting the requirement for long descriptions, since there doesn’t appear to be any understanding of that requirement behind the proposal.

  2. Hi Chaals,

    The example was quickly modified from Alex’s original example (I just noticed it currently has the original URL which I need to fix) to show what is exposed via the accessibility API. It is not an example use case, perhaps I should have made this clear. The example used in HTML5 providing long descriptions would be more appropriate.

    I have updated the code in the post and the example in the test page to what I consider to be an approriate alt/figcaption/longdesc for an image.

  3. I am suggesting you only use it for testings as it is only an experimental implementation in one browser. The future beenfit if interoperable support occurs will be that a link to the long description for an image will be available to AT users from the image itself, providing a programmatically associated long description.

Comments for this post are closed.

I‘d like to take this opportunity to thank you all for your great business and for your flexibility during our contract amendment. Your people are sensational.

Ray Douha, Sr. UI Planner, State of Minnesota