Blogging and All that Malarkey Stuff & Nonsense

Malarkey is Andy Clarke, a creative designer with a passion for accessibility and web standards. This is his personal website.

Accessibility footnotes

Descriptive 'alternative' content to images is vital for accessibility. I have developed my ideas on 'accessibility footnotes'.

Following on from the recent discussion about accessible alternatives for complex graphics and images, Bob Easton 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.

While I haven't had time to fully test what Bob says to be true, (he is usually correct) it has 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.

Here's the example page again. I would be very interested to learn how this works in different screen-readers. Let me know what you think.

Replies

  1. #1 On September 20, 2004 12:05 AM Andrew Krespanis said:

    Interesting, very interesting...

    I have been considering the same approach for 'same page bibliographies', but with an extra visual twist.

    The addition of the :target pseudo-class could be cool, so long as he information is of importance to sighted viewers as well.

    dl#content-footnotes:target {
    position : relative;
    margin:1.5em;
    }

  2. #2 On September 20, 2004 12:11 AM patrick h. lauke said:

    it may be nice to make the footnote visible in the browser once it's been explicitly called. maybe something using the :target selector (ok, doesn't work in IE, of course)

    #footnote-1 { position: absolute; left: -1000em; width: 900em; }

    #footnote-1:target { position: relative; left:0;top:2em; background:#f00; }

    you then have to individually hide the footnotes off-screen, but...you get the idea

    incidentally, i have been using the "same page" link idea for a while. (see for instance https://www.splintered.co.uk/accessibility/ which is usually triggered by running any of the splintered pages through bobby)

  3. #3 On September 20, 2004 12:11 AM patrick h. lauke said:

    hah...great minds obviously think alike. i'll spend less time writing elaborate replies and getting beaten to the post ;)

  4. #4 On September 23, 2004 01:15 AM stuart homfray said:

    Nice one Andy, but one potential problem re. the SEO aspect is that SE spammers already use that technique to hide extra text content on pages (a kind of an upgrade to the old favourite of making extra text the same colour as your page background)

    Search engines picked up on that one, but they've not, as yet I don't think, picked up on the CSS positioning method.

    Just something to bear in mind...

  5. #5 On September 24, 2004 10:01 AM Adam Pink said:

    Help me out here guys and gals, can anyone explain why you wouldn't put a longer description in the alt tag, is there a physical limit or is it just bad form?

    Genuine question, keen to learn.

  6. #6 On September 27, 2004 11:07 AM Robert Wellock said:

    It's because the alt attribute is meant for short descriptions if the image is not available (alternative).

    Whereas the title attribute in most cases covers a short description of image, suitable to around 64 characters; longdesc is for in-depth descriptions.

  7. #7 On September 29, 2004 12:57 PM Andy Budd said:

    Can't you simply use Javascript to look for any elements with a longdesc attribute and then apply that as a link around the element or as an href attribute?