Great post Frankie, and very clever and informative. Thanks for sharing. Best, Cristiano On 17 Aug 2009, at 18:11, Frankie Roberto wrote: > 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 > **************************************************************** -- Cristiano Bianchi Keepthinking Bull Inn Court 15 Maiden Lane London WC2E 7NG t. +44 20 7240 8014 f. +44 20 7240 8015 m. +44 7939 041169 (uk) m. +39 329 533 4469 (it) NEW: Bologna +39 051 0547918 [log in to unmask] **************************************************************** 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 ****************************************************************