By OZeWAI member Andrew Downie, Accessibility Consultant.
The following is an attempt to marry or, at least, arrange a harmonious relationship between two HTML elements. This happy couple, together, can provide more streamlined access to text descriptions of images.
Firstly, in all its visual glory we have the <img> element. Then there is the lesser known and more reclusive <details> element. The goal is to embellish information provided by the <alt> attribute of the <img> element.
The alt attribute
For as long as I can remember, there has been debate about the appropriate length of text within <alt> attributes. My favourite response is “As long as necessary”.
One problem with lengthy <alt> text descriptions is that they can be tedious to read with a screen reader. Lengthy <alt> text can also prove disruptive when revisiting familiar pages.
The <longdesc> attribute was therefore invented. But the much maligned <longdesc> fell into disrepute and has long since been deprecated. Reasons included misuse by many authors (rendering it useless) and, in rare cases when used correctly, limiting the extra information to screen reader users only.
The details element
The W3C’s HTML5: Edition for Web Authors states that:
The
<details>element represents a disclosure widget from which the user can obtain additional information or controls.
Allowing readers to open and close elements on a page is not new. A really nice feature of the <details> element, however, is that no scripting is needed to achieve this. And it is supported in recent versions of major browsers.
As shown below, the <details> element should include a <summary>. This acts something like a <heading>, providing a synopsis of the content.
The aria-details property
As shown in the code below, the <aria-details> property can be added to the <image> element. This causes JAWS and NVDA screen readers to report “Has details”. But if the <id> is omitted or incorrect, the screen reader will not present “Has details”.
Despite referring to the <id> of the relevant <details>, what it does not do is to provide the user with a snappy way of navigating to the information. Ideally then, the extra <details> should immediately follow the image.
As yet, neither VoiceOver on Mac and iOS or Narrator on Windows report the impending added information. It is therefore a good idea to include that information in the <alt> attribute (see below).
As a frustrating aside, like so many other ARIA properties attributes, I am finding plentiful examples of <aria-details> being misused. In Chromium browsers (and not Firefox), due to some dodgy code, both the JAWS and NVDA screen readers are tricked into reporting that the image has details but there is no <details> element. The ghost of <longdesc> haunts us still.
Putting it all together
Here is an example of an image with very brief <alt> text and a rather detailed description within the <details> element. Lest people quibble with the wording, <alt> text should be written with the context of the image’s use in mind. This image is placed with no context.
Details of two men on bike
A dark-coloured motorcycle is on a racetrack with a rider and pillion passenger. The bike is rounding a sweeping lefthand corner. The rider appears to be making an acknowledging gesture to the camera with his left hand. He is wearing a whitish helmet with silver and blue leathers. The passenger is wearing a yellow helmet and black leathers. He is holding a grab rail just behind him at seat level. Beyond the wall beside the track is grass and a tree and, in the distance, the ocean.
And now for the code:
<figure>
<figcaption>A two-up hot lap of Phillip Island on a Vstrom 650</figcaption>
<img src="afterburner1.jpg" alt="Two men on a bike. Details follow." aria-details="moreAbout">
</figure>
<details id="moreAbout">
<summary>Details of two men on bike</summary>
<p>A dark-coloured motor-cycle is on a racetrack with a rider and pillion passenger. The bike is rounding a sweeping lefthand corner. The rider appears to be making an acknowledging gesture to the camera with his left hand. He is wearing a whitish helmet with silver and blue leathers. The passenger is wearing a yellow helmet and black leathers.</p>
</details>
In conclusion
When brief <alt> text does not do the image justice, the detail element offers the opportunity to provide a genuine textual alternative to the image. The nice thing about it is that the information is available when the reader wants it without cluttering up the page.
What has not been covered here is the sometimes vexed issue of what constitutes good <alt> text, but it is worth keeping in mind that it should convey the same meaning as the image.
Also keep in mind that, according to the adage, a picture is worth a thousand words and that some images simply do not translate well to text.