Use On-Page Image Descriptions
I feel I need to manage your expectation that this post is mostly about the
longdesc attribute, that I voted for bringing it from HTML4 into HTML5, and that I know this is a polarizing topic among, well, anyone who has an opinion on it.
Now for the TL;DR:
- based on WebAIM’s screen reader survey results since 2009, screen reader users prefer an on-page long description (whether using
longdescor some other method);
- for the few cases where
longdescis used properly in the wild on the data-set I used, it is never an on-page link.
Some images, such as charts, diagrams, or comic strips, are too complex to describe in only a few words. If a long, detailed description of these images is available, how would you prefer to have it presented to you?
Users today vastly prefer having the long descriptions on the same page.
How to Achieve This
Use an in-page anchor for long-form descriptions for images.
aria-describedat require a valid non-empty URL potentially surrounded by spaces. That includes in-page anchors. The
longdesc spec is pretty clear on this right in the intro, and even shows an example with a data URI.
The first year the question was asked the responses weren’t so clearly in favor of the on-page approach. This may be partly due to not understanding quite what the question meant. It may also be partly due to the extra time spent loading a new page full of trackers and beacons only to have to go back and reload that same collection of add-ons that slow the modern web page to a crawl.
I went about checking how
longdesc is used in the wild. I borrowed the same techniques that I employed when researching use of the
lang attribute on the
html element. I grabbed the January 2015 archive from WebDevData.org (from a W3C Community Group) consisting of the HTML from 87,000 web pages.
I used the following regular expression pattern (suggestions always welcome) to return all instances of
longdesc, pulling all attributes until the close of the
Of the 84,054 pages I parsed (I excluded XML, ISO files, and so on), I found that 490 use the
longdesc attribute. That’s just about 0.58%. Of those 490 instances of
longdesc none of them used in-page anchors. When a valid URL was included as the value, it was typically a link to an image or a site’s home page or the current page, meaning
longdesc was used incorrectly.
alt I found no other image long description techniques in use. Even most cases of
alt (when included) were empty or of questionable utility (plenty of cases of HTML blocks, among other dramatic failures).
I suspect that the vast majority of
longdesc use in these results came from a CMS or HTML editor of some sort. Given how poorly many tools handle
title today (I’m looking at you, WordPress) and given how few content authors know enough about HTML (let alone accessibility) to understand how to use those attributes, I don’t expect that to change regardless of the specific syntax we use.
Whomever built the site for Bundesministerium der Finanzen deserves some credit. Not only does the slurped page properly use
longdesc but the URL of the page acting as its image description belies the system’s built-in support for these long descriptions by exposing a query string switch:
Examples Beyond the Test Data
The data I used represent the home pages of the top ~100,000 web pages. Most of these are probably powered by a CMS that has poor support for accessibility, let alone support for any semantics similar to
longdesc. These pages are also unlikely to be authored by HTML or accessibility experts.
As such, we are unlikely to find the kind of sustainable, locally-sourced, hand-hammered artisanal markup that everyone in accessibility or standards would sometimes like to see.
Laura Carlson quickly tossed me some examples of
longdesc in the wild that use in-page anchors:
What Prompted This Research
The original analysis of the WebAIM results stated that
longdesc requires an off-page link. This was repeated in shorter form in a tweet:
For complex images, the behavior of longdesc/aria-describedat is very unpopular, 2nd only to being ignored entirely – http://t.co/R2fzfheEfN— WebAIM (@webaim) August 28, 2015
Of course I disagreed:
WebAIM quickly corrected this, but it still includes an assertion about the most common use that I wanted to validate, even though I suspected it was right (though there was no indication what data supported WebAIM’s assertion):
The option of placing the alternative on a separate page but having it announced by the screen reader, the most common current behavior of images with the
longdescattribute (and likely the
aria-describedatattribute), was a very unpopular option, second only to being ignored entirely.
longdesc is your bag, Laura Carlson has written extensively and researched far more than I could ever have done. Check out her research or just read these two tweets for a quick overview:
I’ve written bunches on text alternatives for images in the past…
- Don’t Tweet Pictures of Text, December 21, 2014
- Image alt Exception Change Re-Re-Re-Requested, November 24, 2013
- Alt Text on the Picture Element? August 31, 2012
- Image alt Exception Change Re-Re-Requested, June 11, 2012
- More on Image alt Requirement in HTML5, May 2, 2011
- Image alt Attributes Not Always Required in HTML5, April 20, 2011
This is great research. Thanks for sharing it.
Of note is our recent analysis of longdesc behavior – http://webaim.org/techniques/alttext/longdesctestcases I have not changed the language on the survey results page based on these finding. In all cases where longdesc is supported (which is rather rare to begin with), if a longdesc references an in-page anchor it treats it identical to an external URL which means that the target page is opened in new tab or window. With an in-page anchor, it will set focus to that anchor in the new tab/window. So it would be a stretch to suggest that the longdesc is “optional text, available on the same page” when it is neither optional (only presented on demand) or treated as being on the same page.
PS – The default text in your Comment text box is super tiny.
Holy cow, that is super tiny. I guess that’s what happens when you don’t set a size and let the UA stylesheet do it. It’s now on my bug list. Thanks!
The behavior you found sounds like a bug in each of those implementations. In the longdesc spec, 3.0.3 User Agents, UAs are not given any instruction to open links in a new window. I am curious why each of them decided that was a good idea unless they all also assumed only off-page links and that it might be a better experience as a result.
BTW, fixed the text size in the comment box. Thanks for the bug report.
[…] Use On-Page Image Descriptions – Adrian Roselli – http://adrianroselli.com/2015/09/use-on-page-image-descriptions.html […]
Very informative article! I am an artist and photographer. I’m developing a website and was very interested in finding ways to broaden and make my works more accessible to readers. Thanks for the info Adrian.
[…] is not always cross browser friendly. If you would like to see more on this topic you can visit Adrian Roselli he really covers this topic very well along with other alternatives that are in […]