An ARIA for long description links

Published 2012-04-05 06:05 by Leif Halvard Silli.

Please note that this article is about an experiment. Don’t take it as an endorsement. And don’t think that I am married to this method.

This is a — currently invalid (and questionable?) — method for providing long description links to images in HTML5. I was inspired to publishh this after I read Steve Faulkner’s experiments on how to provide long descriptions in HTML5, and the image below is the same as found in his article.

The basic idea behind this method, is to add a link wrapper with the long description URL around the img element, and set the role of the link to role=img and thereby make assistive technology (AT) think of the link as an image rather than as a link. As a consequence, the presence of the link has to be anounced in the alternative text itself. (Of course, AT could have brought the text themselves, but they are currently not programmed to do that.) I use CSS generated content to make the hover and focus effects.

The “real” alternative text for the image.

Why is the above example non-conforming in HTML5?

I per the ARIA profile for HTML4, then this solution is conforming. But per HTML5, then role=img for the anchor element, is not permitted.

Advantages and disadvantages to this method

Advantages:

  • The link is keyboard accessible
  • The link works in all user agents
  • Duplication, in case the AT supports both longdesc and the ARIA role attribute values, should in fact be avoided.

Disadvantages:

  • If the AT doesn’t support the ARIA role attribute values, but does support longdesc, then the user perhaps gets the same link twice (unless the AT has some heuristics to work around that.)
  • It is currently invalid to do this, per HTML5.
  • The link presence (currently) has to be announced in the alternative text.

The code

How does this example work? Basically, it puts role=img on the a element, and there makes the anchor wrapper around the image be perceived not as a link but as an image. (I’ll add more explanation later — for now, I hope that those that are into ARIA get it. I’ll just say that AT varies with regard to how they react to the ARIA attributes — and it is necessary to make up for that by experimenting a little to see what works.)

<a
             id="anchor201204" 
           role='img link'
aria-labelledby="img anchor201204" 
     aria-label='A painting inspired by Alfred Tennyson’s poem The Lady of Shalott. Activate for long description! '
          title="Activate for long description!"
         target='_blank'
           href="http://bit.ly/5HJvVZ" 
          ><img 
             id='img'
         border="0"
           role="img"
            alt="The “real” alternative text for the image."
       longdesc="http://bit.ly/5HJvVZ"
            src="../../../images/7t.jpg" /></a>
blog comments powered by Disqus

|