<img longdesc="">
- Attribute of
- HTML Tags Guide To Adding Images To Your Web Documents
- What does
<img longdesc="">
do? - Defines a URL at which can be found more information about the image. It was written out of the HTML5 specification, but its status is not quite so clear as other deprecated features.
Contents
Code Example
<!-- NOT IMPLEMENTED. This will not accomplish anything in most browsers. -->
<img src="/wp-content/uploads/flamingo.jpg" longdesc="https://en.wikipedia.org/wiki/Flamingo">
What is longdesc
for?
The alt
description may not provide enough space for a complete description of an image. The longdesc
attribute attempts t provide a solution to that problem, without packing information into the markup, by allowing the document author to link to another page or resource which provides the description. The content of a longdesc
attribute must be a URL, not the description itself.
Status of the longdesc
The longdesc
attribute was a part of the HTML 4.0 specification. When HTML5 was first published, it was labelled as “obsolete.” Later, it was released as a recommended “HTML Extension.” So it is sort-of deprecated, and sort-of available for use. As of this writing, no mainstream browsers support it, so using it will have no effect on your page.
Why should you use longdesc
?
Accessibility. Not everyone uses with the internet the same way you do. The blind and visually impaired use specialized browsers and text-to-voice screen readers to interact with web pages that are increasingly focused on a visual interface. Providing a longdesc
resource that describes the content of an image can make you site much more accessible, especially if your content is heavily dependent on images.
Other reasons
Some people believe that using longdesc
attributes can help with SEO. There is no evidence that this is the case, but it certainly can’t hurt. It is also possible that, if use of longdesc
for accessibility becomes more prevalent, that Google and other search engines will begin use it. There was a time when Google didn’t care what your page looked like. Then, one day, it started taking page design into account. For a while, they didn’t care whether your site worked well on mobile phones or not. Now, sites that break on small screens are penalized. It is possible that Google will one day care about accessibility. Implementing best practices for accessibility on your site is good for visually impaired users now, and may be additionally good for you in the future.
Implementing longdesc
The value of the longdesc
attribute must be a URL. But there are some options:
- Full URL of an external resource (a page on another site)
- Relative URL to an internal resource (another page on your site)
- ID-based URL to an element on the current page (
#element-id
) - Data URI (an encoded version of the actual description content)
External Resource
This is relatively easy if your image is a well-known art work, or the content is something which might have an authoritative resource location (i.e. a Wikipedia article). Simply link to the article.
<img src="/wp-content/uploads/mona-lisa.jpg" alt="Mona Lisa" longdesc="https://en.wikipedia.org/wiki/Mona_Lisa">
Internal Resource
The markup for this isn’t any more complicated, but it does require you to create a separate page for each image longdesc
. Content Management Systems like WordPress can make this easy because there is usually an HTML page for each attachment.
<img src="/wp-content/uploads/flamingo.jpg" alt="flamingo" longdesc="../flamingo">
On-page element
This is a great approach, and lets you actually use the description as on-page content. You can display the description as simply part of your content (conventional browser users might want to read it), and simply identify the description text with an element id. Then link to that id in the longdesc
attribute.
<img src="/wp-content/uploads/flamingo.jpg" alt="flamingo" longdesc="#about-flamingo-picture"> <p id="about-flamingo-picture">A single pink flamingo, in closeup, with a dark background of leaves and bushes. The flamingo has its head turned slightly to its left, so you can only see the right side of its face. The image is close-in, cutting out the flamingo's legs and lower torso.</p>
A single pink flamingo, in closeup, with a dark background of leaves and bushes. The flamingo has its head turned slightly to its left, so you can only see the right side of its face. The image is close-in, cutting out the flamingo’s legs and lower torso.
If the description would not be terribly useful for “regular” visitors, you can simply hide it with CSS.
.longdesc { display: none; }
<img src="/wp-content/uploads/flamingo.jpg" alt="flamingo" longdesc="#about-flamingo-picture"> <div id="about-flamingo-picture" class="longdesc">A single pink flamingo, in closeup, with a dark background of leaves and bushes. The flamingo has its head turned slightly to its left, so you can only see the right side of its face. The image is close-in, cutting out the flamingo's legs and lower torso.</div>
Data URI
It is possible to encode entire pieces of complete content into a data string which browsers can “understand,” and then use that encoded string to display the content. This is most often done with images, but can also be done with entire documents or large blocks of text. This is the only way to actually include the description content into the longdesc
attribute.
<img src="/wp-content/uploads/flamingo.jpg" alt="flamingo" longdesc="data:text/plain;charset=utf-8;base64,QSBzaW5nbGUgcGluayBmbGFtaW5nbywgaW4gY2xvc2V1cCwgd2l0aCBhIGRhcmsgYmFja2dyb3VuZCBvZiBsZWF2ZXMgYW5kIGJ1c2hlcy4gVGhlIGZsYW1pbmdvIGhhcyBpdHMgaGVhZCB0dXJuZWQgc2xpZ2h0bHkgdG8gaXRzIGxlZnQsIHNvIHlvdSBjYW4gb25seSBzZWUgdGhlIHJpZ2h0IHNpZGUgb2YgaXRzIGZhY2UuIFRoZSBpbWFnZSBpcyBjbG9zZS1pbiwgY3V0dGluZyBvdXQgdGhlIGZsYW1pbmdvJ3MgbGVncyBhbmQgbG93ZXIgdG9yc28u">
You need a special encoder to create data URIs. The one above was created with this tool.
Mixing it Up With JavaScript
Perhaps the most “complete” option would be to use a hidden, onpage longdesc
element and then use JavaScript to allow the user to view it. Many people think this is essentially how browsers should implement the longdesc
recommendation, so it seems like a good idea to just go ahead and implement this now. (One such project implementing this kind of functionality is Dirk Ginader’s Accessible-LongDesc, which uses and displays the longdesc
content in an overlay on top of the image.
Conclusion
The longdesc
attribute is one of those things that most people ignore, because its benefits aren’t readily apparent. However, as part of an overall strategy of accessibility, it can really pay off. Approximately 2-3% of adults in the U.S. are visually impaired, and most of them use screen reader technology to access the internet — do you really want to just ignore them? Additionally, we move every day toward a more “semantic” web — an online ecosystem powered by data-crunching artificial intelligence. Providing as much data as possible about your own content is a way to prepare for the next wave of search engine innovation.
Browser Support for longdesc
Not supported. | Not supported. | Not supported. | Not supported. | Not supported. | Not supported. |