On Mon, Aug 17, 2009 at 11:59 AM, Jon Pratty <[log in to unmask]>wrote:


> My query today is about Alt tags.
>

I didn't want to go all geek on everybody, but nobody else has responded to
this yet, and it's something that there's still a bit of confusion about, so
I'll give it ago. If you're not interested, or already know this stuff, look
away now...

Okay, so the alt tag (more precisely called an attribute) is meant to
represent an textual "alternative" to the visual content (the photo or
image). That is, if someone can't see the image, either because they are
blind, visually impaired, or because they're on a flaky or slow internet
connection, or because the image isn't available due to a broken link, or
because they're offline and only have access to the text (eg if using an RSS
reader which only caches the text for offline use, such as Google Reader) or
finally because they've simply chosen not to display images (rare, but might
happen for example on a mobile phone if someone wanted to save bandwidth
costs, or to just make pages load quicker)...

... then the text in the alt attribute is displayed INSTEAD of the visual
image.

This is an important point, as it means that you show only ever see the
visual content OR the alt text, never both at the same time. So the
behaviour of Internet Explorer prior to version 8 was 'wrong' in the sense
that it displayed the alt text as a tooltip. To appreciate why this is
wrong, consider the instance where you have an image containing your logo,
which consists of the name of your museum (eg "The Hat Museum") in a
particular font or wordmark. Wherever possible, you'd want people to see
this in the graphic form, as it's part of your brand identity, but if that's
not possible, then people should just see the name in plain text. So the alt
text is simply "The Hat Museum". So the behaviour of old versions of
Internet Explorer in showing the alt text as a tooltip meant that people
hovering over the logo got the same text as was written in the logo - not
very useful.

So far, this is all pretty represents the consensus of best practice, and
the fact that Internet Explorer 8 has changed its behaviour shows that it's
the way to go.

What's less understood is what the alt text should be for images like
photos, or illustrations, or graphics which serve a purely aesthetic
purpose.

If, for example, you write a blog post featuring an interview with somebody,
which contains a photo of the person you've interviewed, what should the alt
tag be on that photo. Some people might include something minimal like
"Photo of <person's name>", which isn't very helpful at all. Other people
might try to be a bit more descriptive and say something like "Photo of
<person's name> posing in <location> with a laptop and a cool pair of
shades". On the one hand, this is giving you the information which someone
who can see the photo is getting. However, the location, the laptop and the
cool shades probably aren't relevant to the story you're telling in the blog
post (in linguistics-geek-speak, it's not the "overtly intended
communication"). So in this example, to work out what the optimal alt text
should be, you have to work out what the photo is actually communicating.
It's probable that it's not actually communicating much at all - simply
giving you an idea of what the person looks like. In this case the alt text
should be blank - ie alt="". This means that people who can't see the image
just get the text, with nothing else present - not an identical experience
to those who can see the image, but an equivalent one.

On the other hand, there may be instances where a photo of a person
communicates something which is central to the understanding of a web page.
For instance, you may write a "mystery object" type blog post, which shows a
curator holding an usual object, along with some text asking people to guess
what the object is. What should the alt text be here? Well, if you left it
blank, anyone who can't see the object is pretty left out from the whole
experience. On the other hand, if you described the photo fully in the alt
text, eg as "A photo of museum curator <person's name> holding an old
medical instrument called an 'Earoscpope'" - then you're also giving people
who can't see the photo a poorer experience, as you're giving the game away
and are telling them exactly what it is. So in this example, a better alt
text would be something like "A curator holds a small metal object, about
the size of her palm, which at one end has a nut and screw, at the other end
has a small, curved protruding brown tube, and at the bottom has a small
wooden knob". This gives people who can't see the photo an experience which
is a little more equivalent to those who can (depending on how good you
think my description is), and they can still participate by guessing what
the object might be.

So that's how alt text is meant to work. In practice, however, very few
people have this level of understanding about what good alt text should be,
and even amongst those who do, very few people take this amount of time to
properly consider the meaning of an image and to craft an equivalent
text-based experience. This is compounded by the fact that very few CMSs
implement alt text in a way that supports this kind of considered usage (eg
by limiting the amount of characters you can use, or by associating the alt
text with the image, when the same image can communicate different things in
different contexts). Plus you also have to consider sites like Flickr, where
millions of photos are contributes by ordinary people, and it's hard enough
to get them to title and tag the photos, let alone write alternative textual
versions.

For this reason, the current HTML 5 specification (
http://www.whatwg.org/specs/web-apps/current-work/#alt) makes a distinction
between a blank alt attribute, which means roughly "this image is decorative
and doesn't communicate any content", and a missing alt attribute, which
means roughly "this image does communicate something, but we are unable to
tell you what". This latter case is obviously not ideal from an
accessibility perspective, but at least it's honest, and in circumstances
like Flickr, is really the only option.

So my general advice is to try to write meaningful alt text whenever
possible, and to train other people to do so, but where this isn't possible
(due to time, resources, CMSs issues, whatever), acknowledge your failings
by not specifying an alt attribute at all...

Phew!

Cheers all,

Frankie

P.S The mystery object I described above is actually featured on this
Powerhouse Museum blog post:
http://www.powerhousemuseum.com/collection/blog/?p=436, where the alt text
is simply "Earoscope", (although this name is also given in the blog post,
along with a reasonable description, so perhaps the alt text should be
blank?).


-- 
Frankie Roberto
Experience Designer, Rattle
0114 2706977
http://www.rattlecentral.com

****************************************************************
For mcg information visit the mcg website at
http://www.museumscomputergroup.org.uk.
To manage your subscription to this email list visit
http://www.museumscomputergroup.org.uk/email.shtml
****************************************************************