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
longdesc or some other method);
- for the few cases where
longdesc is used properly in the wild on the data-set I used, it is never an on-page link.
WebAIM has been asking about long-form image descriptions since its 2009 survey and asked the same question (same wording) in its most recent survey:
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.
I know in-page anchors work from my own long description collection page which I use to collect long descriptions for externally-hosted images (such as this one).
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:
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
longdesc attribute (and likely the
aria-describedat attribute), was a very unpopular option, second only to being ignored entirely.
You can download the 490 records (42.6KB) I found and further parse them, or grab the 83,196 rows (4.64MB) and check them for yourself. The files are pipe-delimited text files.
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