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="https://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: Technical

About Steve Faulkner

Steve was the Chief Accessibility Officer at TPGi before he left in October 2023. He joined TPGi in 2006 and was previously a Senior Web Accessibility Consultant at vision australia. Steve is a member of several groups, including the W3C Web Platforms Working Group and the W3C ARIA Working Group. He is an editor of several specifications at the W3C including ARIA in HTML and HTML Accessibility API Mappings 1.0. He also develops and maintains HTML5accessibility and the JAWS bug tracker/standards support.

Comments

I have a very strong opinion that this use of describedby is not a good one. Please see my comments on https://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.