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:

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:

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.

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:

I’ve written bunches on text alternatives for images in the past…

6 Comments

Reply

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.

In response to Jared Smith. Reply

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.

aroselli; . Permalink
In response to Jared Smith. Reply

BTW, fixed the text size in the comment box. Thanks for the bug report.

aroselli; . Permalink
Reply

[…] Use On-Page Image Descriptions – Adrian Roselli – https://adrianroselli.com/2015/09/use-on-page-image-descriptions.html […]

Reply

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.

Fabian G; . Permalink
Reply

[…] 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 […]

Image Search Engines - Optimize Image Searchablity; . Permalink

Leave a Comment or Response

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>