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 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
Categories: Development

About Steve Faulkner

Steve is the Technical Director at TPGi. He joined TPGi 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 Web Platforms Working Group and the W3C ARIA Working Group.

Comments

I have a very strong opinion that this use of describedby is not a good one. Please see my comments on http://asurkov.blogspot.com/2012/05/firefox-14-whats-new-for-at-developers.html?showComment=1336762993735#c696651891342934123

chaals says:

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.

Steve Faulkner says:

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.

education analytics says:

Why cant we use this method other than testing? What actually is benefit of using this technique?

Steve Faulkner says:

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.