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.

User Preferences

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.

Both longdesc and 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).

Some Guessing

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.

Low-Budget Research

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 <img>: longdesc=([^>]+).

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.

Other than 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).

Low-Budget Analysis

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 alt and 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.

Stand-out Example

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: ?view=renderLongdescr

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:

@aardrian @webaim samples http://t.co/Fj0IPBznom http://t.co/k9TVEBym1t http://t.co/rYh3WRTxMg http://t.co/XeekyZAQbX http://t.co/J8NlcACqw3

— Laura Carlson (@laura_carlson) September 3, 2015

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:

Disagree with @webaim interpretation of longdesc/aria-describedat. Neither requires off-site link. Anchor is fine. https://t.co/MLoZl5nGzY

— Adrian Roselli (@aardrian) August 28, 2015

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.

Related

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.

If 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:

@brucel Implementation Report http://t.co/sVG45B5dTn @chaals @webaim @johnfoliot

— Laura Carlson (@laura_carlson) September 3, 2015

@brucel (2 of 2) JAWS, SuperNova/Hal, WindowEyes etc announce automatically that a longdesc available @yatil @chaals @webaim @johnfoliot

— Laura Carlson (@laura_carlson) September 3, 2015

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