Accessibility Footnotes

In a recent discussion about accessible alternatives for complex graphics and images, one commenter made an interesting point which compounds browsers' lousy support for the longdesc attribute,

Yet another reason to avoid LONGDESC ... There is variance in the way assistive technology handles LONGDESC pages. Some screen readers, Jaws in particular, launch the LONGDESC page as new window. The Jaws user has to know this and be ready to close those extra windows.

Now, if you're thoughtful and add a "close window" link to the LONGDESC page, you run afowl the other screen readers that navigate to the LONGDESC page rather than open it as a new window. If they hit that convenient close window link you added, "poof," goodbye session!

The foot note alternative turns out to be far better behaved.

This prompted me to think more about my 'accessibility footnotes'.

Accessibility footnotes

For those who did not read the original column, the concept is simple. When graphics or images contain content that cannot be adequately described in the few words available inside an alt attribute, a longer description should be provided. As the W3C explain,

When a short text equivalent does not suffice to adequately convey the function or role of an image, provide additional information in a file designated by the "longdesc" attribute:

But while the W3C examples provide a longdesc link to a separate page, my suggested approach links to a 'footnotes' section on the same page, which can be hidden by a little CSS if I don't want my footnotes to be visible to sighted users.

Take a peak at the example page.

Footnotes in action

First, add the longdesc attribute to the image and link to the specific footnote which I'll create in a moment or two.

<img src="images/footnotes-empire.jpg"
alt="Empire Hotel web site design"
longdesc="#footnote-1"
id="empire" />

I have also added a unique ID to the image which will come in handy later. Repeat as necessary for any other complex images on the page. Now to set up the footnotes, and here, definition lists seem to be the perfect choice. I'll add an explanation of the image (in this case a portfolio screen-shot) and a link back to the main body of the article.

<dl id="content-footnotes">
<dt id="footnote-1"></dt>
<dd>
<p>The Empire Hotel web site is designed in subtle tones
of mauves and purples and uses traditional patterns to reflect
the traditional atmosphere of the hotel.</p>
<p>Back to <a href="#empire">Empire Hotel</a>.</p>

</dd>
</dl>

Hiding the footnotes from sighted users involves moving them off screen rather than by using 'display:none;'.

dl#content-footnotes {
position : absolute;
left : -1000em;
width : 900em;
}

Abandoning longdesc

It might even be sensible (given lousy and inconsistant treatment of longdesc) to abandon longdesc altogether and replace it with a simple anchor which is hidden with CSS. This is similar to the D-link approach, but hides the link from visual browsers and is more intuitive than a [D] when browsing with styles off.

<img src="images/footnotes-empire.jpg"
alt="Empire Hotel web site design"
id="empire" />
<a href="#footnote-1" class="longdesc">Empire Hotel description</a>

a.longdesc {
position : absolute;
left : -1000em;
width : 900em;
}

On a first glance, these solutions have advantages not only for usability, but also for SEO.

The viewer remains on the current page
Inline links to and from the footnotes aid usability
Fewer calls to the web server are required
Explanation content remains in the document which may increase keyword density and help with SEO

Here's the example page again.

Contributed by Andy Clarke, Stuff & Nonsense. Article originally published December 2004.

Accessibility Footnotes