Is alt text necessary for photo sharing sites?
There is an argument raging right now about the HTML5 spec’s proposal that alt text on the img element be optional. The rationale is (I think) that some authoring tools do not allow authors to add alt text, so alt should be not be required for conformance with the spec.
I disagree. As Gez Lemon says, “when an authoring tool doesn’t have anything useful to put in for the alt text, the tool shouldn’t put anything in. A good authoring tool will check for missing alt text and offer to assist the user in repairing the content”. If you choose to use a crap authoring tool, then you will author non-conforming code (should you even care). The conformance bar shouldn’t be lowered to cater for rubbish authoring tools—or ignorant authors.
But as the argument has raged tediously this way and that, people have started to consider photo sharing sites and their use of alt. A site, like Flickr, where you can load up your photos and organise them is an authoring tool: it allows you to author a web page that’s a photo album. Photo sites should therefore confirm to the requirements of the Authoring Tool Accessibility Guidelines.
So, it’s argued by many who believe that alt text should be a mandatory attribute of the img tag, each of these sites should prompt the user for an alternative description of the photo they’re uploading.
But should they?
What’s alt text for?
Now this is really accessibility for beginners. It’s my first slide when I do “What is accessibility?” talks at conferences. But, like everything else in the merry world of accessibility, it’s not quite as simple as it seems.
The HTML 4 spec says
Several non-textual elements (IMG, AREA, APPLET, and INPUT) let authors specify alternate text to serve as content when the element cannot be rendered normally. Specifying alternate text assists users without graphic display terminals, users whose browsers don’t support forms, visually impaired users, those who use speech synthesizers, those who have configured their graphical user agents not to display images, etc. Source: HTML 4 spec
So let’s all agree that alt text is to “assist”. It’s there to help, not get in the way. Because of this, alt text describes the function of the image, not what it looks like.
It’s the same thought process as writing semantic mark-up. I use the Bruce Mantra: “It’s not what it looks like that matters, it’s what it is“.
Alt text for homepage links
A good example of this is the very common practice of having a corporate logo in the header of the page, which links back to your home page. The alt text here should not describe the image, but give its function, which—in this instance—is a link to the homepage.
So you don’t describe your logo with alt=”Bright red rampant unicorn pleasuring a walrus, with a nice ‘wet floor’-style reflection below to show we’re Web 2.0″, you simply write alt=”home”. If you don’t, you fail to assist the screenreader user, as they still can’t find the home link, and will soon get tired of hearing about unicorns and walruses at the top of every page.
(If you put no alt text at all, a screenreader user will hear either the filename of the image, or the URL of the link. This is no great problem if the filename is “logo.gif” or your homepage is “index.html”, but it can be a right bugger with big CMS-generated sites. Imagine listening to this example I picked at random from eBay today (line breaks inserted):
<a href="http://cgi.ebay.com/ws/eBayISAPI.dll?
ViewItem&item=280234051028%0D%0A%09%09&ssPageName=
MERC_VI_RCRX_Pr4_PcY_BID_Stores_IT
%0D%0A%09%09%09%09%0D%0A%09%09%09%09
&refitem=280235709798&itemcount=4&refwidgetloc=active_view_item
&usedrule1=CrossSell_LogicX&refwidgettype=cross_promot_widget
&_trksid=p284.m184&_trkparms=algo%3DCRX%26its%3DS%252BI
%252BSS%26itu%3DISS%252BUCI%252BSI%26otn%3D4">
<img src="http://thumbs.ebaystatic.com/pict/280234051028.jpg" ></a>
So far, so uncontroversial.
Alt text for graphs
Here’s a slightly less clear-cut example, but still pretty uncontroversial. You have a graph that shows that Rampant Unicorn Inc has a 97% market share, while Flaccid Faun Inc only has 3%, so it’s easy to write the alt text.
But what should you do if the surrounding article makes it clear in the text? If the graph is a supplementary visual that gives the same information again, I give it null alt text (alt=””) because repeating the market share figures in alt text is unlikely to assist a screenreader user; in fact, it’s likely to irritate them. Why repeat yourself?
Alt text on photos in articles
Here’s a greyer area still. You have a news item on your corporate site about your C.E.O. being knighted by the Queen and include a photo of him beaming proudly. Does the photo add any information to the piece? I believe that it doesn’t so it needs null alt text rather than alt=”Rampant Unicorn CEO, Bruce Lawson, beams proudly”.
We’re in the territory where it’s very difficult to make rules. In the CEO knighthood example, the image is just decoration: eye-candy to break up the slabs of text. It’s easy to imagine a different situation; a news story about some celebrity plastic surgery with a before and after photo would be carrying information in the images and would probably require alt text.
In this situation, the function of the image is related to the visual content. The “before” picture might say “Bruce Lawson, a portly gentlemen with grey hair and a defeated expression, looking every day of his 29 years” while the “after” picture might say “Bruce Lawson, wearing a dayglo pink diamanté dress, a tiara on his blonde beehive hair, his lips enhanced by collagen and painted glossy red, shows his fabulous new 40 DD bustline”.
The function of images on photo sharing sites
We’ve established that alt text is related to the function of the image and that occasionally it’s necessary to describe an image to explain how it supports the surrounding text or fits into its wider context.
But what is the function of a picture on a photo sharing site? There is no narrative context for the pictures – they are posted as visual artefects, complete in and of themselves.
What is the function of a set of pictures of the same event or same person? It’s certainly possible to write alt text for each picture, describing each image and how it differs from the other, similar pictures.
Take a look at my photos of some punk kids on flickr.
That’s a picture of a small boy with mohican hair and dark glasses – and, at a pinch, that could be the rudimentary alt text. But the function of the picture is its visual content, so wouldn’t we need to discuss the freckles, the slightly gawky grin, the chocolate smudge around his mouth?
Here’s a picture taken slightly later, from a slightly different angle, of the same child:
How would the alt text differ here? How would you write alt text for each subtly different shot if you had taken dozens of pictures?
Crucially: even if people had enough time, imagination and motivation to craft individual alt texts for each photo they upload (and no-one has), does it actually help a person with a visual impairment enjoy that photograph (assisting the user is what the spec describes as the purpose of alt text, remember)?
It’s worth looking at a post to the public HTML mailing list by Michael A Squillace, a blind participant:
Responding, here, as a totally blind web content consumer and not as a member of the IBM Human Ability & Accessibility Center, you can put all of the alt tags on flickr that you desire – I’m still not going to visit it because photos are inheritly visual entities. For the dozen or so photos that have received thousands of views (and that, presumably, resemble the news broadcast rather than the private telephone call), 100 or 150 characters of alt text is not going to make the photo any more useful to me. Are we next going to suggest that all of the songs available on the web need closed caption so that deaf folks can enjoy them, too? As someone who is blind, I realized a long time ago that photography, driving, and painting are endeavors in which I am simply not going to engage and I think it detracts from the conversation about the real utility of alt to concentrate on what I see as, indeed, an edge case. Of course, I am only one person and I’m sure that many of my colleagues and fellow PWDs will vehemently disagree with me. (Source: W3C HTML list)
I’m about to get my arse roasted by flames when I publish this, but that’s why I use null alt text for the vast majority of my pictures in galleries.
Or am I evil and wrong?
Buy "Calling For The Moon", my debut album of songs I wrote while living in Thailand, India, Turkey. (Only £2, on Bandcamp.)
29 Responses to “ Is alt text necessary for photo sharing sites? ”
I agree, well upto a point.
Do you not know any blind, sorry visually impaired, web designers? They may want to add images to their site, and without correct alt text they wouldn’t have a clue as to what to use.
A fun thing to do is surf the net with images off, and then one gets a really clear idea what they need to do with alt text. I work it like you do, because some images just aren’t that useful to have alt text. A good example IS flickr…would a blind user be poking around people’s photo albums there? I highly doubt it. Even if people used perfect alt text, it wouldn’t mean much to a blind user. Now, in other contexts, alt text makes perfect sense and should be encouraged…. but there are simply times when it can actually hurt the webpage or website to use it.
I agree with all of that, particularly the news articles part. My phone’s browser has stopped displaying images for some reason, and I’m often amused by the useless alt text on the images used on the BBC News website. “Scales” for any article about law is a particular favourite.
The debate will rumble on with this particular issue, it’s one that we’ve mulled over constantly at work and comes up time and time again in training sessions and workshops.
Ask any group of people with an interest in accessibility (experts or otherwise) what the answer is and you’ll get a mixed response. More importantly ask a group of visually impaired people and the response is the same. To a large degree preference comes into it and of course the question of usefulness of alt text on certain images however that doesn’t help us when we are trying to set up guidelines and write specifications.
I do think Michael A Squillace voices how many visually people feel about alt text on certain images. Are you really going to be a heavy user of certain types of sites given your site loss? However there are situations where visually impaired users will want, and need, to use sites that are about cars/driving or photography. Only the other day a visually impaired colleague was pulling her hair out because she couldn’t book a hire car online for her boss.
As both you and Rich Pedley point out what about visually impaired designers and developers who need to grab a headshot of ”Rampant Unicorn CEO, Bruce Lawson, beams proudly” for a home page story or annual report (or “Bruce Lawson, wearing a dayglo pink diamanté dress, a tiara on his blonde beehive hair, his lips enhanced by collagen and painted glossy red, shows his fabulous new 40 DD bustline”? for that matter).
When it comes to photo sharing websites part of me wishes that images were forced to have null ALT if no alternative text is given, therefore at least making the site more focused on the stuff that does have ALT text but then we have the small issue of how to deal with images that are linked…
What concerns me is that because of these few examples of sites that represent the grey area (and they are few when put in the context of the web overall) we are debating in HTML 5 the idea of making ALT optional for ALL images which to me is totally missing the point. Images must have ALT text to make the web navigable and useful. It’s step one in making a site accessible; a Priority/Level A under WCAG. I agree with the points raised here but think that a workable solution is still not there.
Your approach mirrors mine almost exactly, so it’s probably fair to say that I think it’s about spot on. I get really quite annoyed with people who’ve learned the “every image must have an alt attribute” mantra without ever thinking about what it *does* and what it’s *for*.
Typical example I run into: you have a heading which is a brand and product name, and immediately following that is an image of the product. I’ve lost track of the number of times the alternative text is “Photo of the XYZ Widget”, which really serves no useful purpose to anybody.
Ultimately, I think it’s the earliest form of degrading gracefully: just as your fancy JavaScript shouldn’t even *exist* as far as the non-JS user is concerned, your images shouldn’t exist as far as the non-image user is concerned. Littering the output with “by the way, a photo you can’t see is supposed to go here” just strikes me as shoddy.
>> When it comes to photo sharing websites part of me wishes that images were forced to have null ALT if no alternative text is given, therefore at least making the site more focused on the stuff that does have ALT text
I totally agree. Giving an empty ALT gives more information than no ALT, right?
My take would be to ask two questions:
(a) Is there a useful semantic difference (if everyone followed the spec) between an empty alt attribute and a missing alt attribute?
(b) Given the numbers of people who won’t bother to add an alt text through ignorance, is there actually any value in a technical distinction between empty and missing?
If there’s little value in the distinction, and many people who won’t be adding any alt texts anyway, it would seem that the best course of action is to continue to mandate an alt attribute and to use an empty one where there is no better option.
This forces authors to decide what to do, and makes automated checking of pages much easier.
One possible issue I foresee though is that poor authoring tools will start adding empty alt attributes to all images without user confirmation in order to pass automated tests. Then, an empty alt might begin to loose its informativeness as it starts to be used in the same way that missing has in the past.
BTW: I’m just wondering if there is there anything in the spec to force some explicit textual content inside every link element?
Good points, Bruce, I follow pretty much the same policy on my sites.
There’s a really good article on what to use, and what not to use, in alt text at http://webaim.org/techniques/alttext/ (lots of other goodies at that site too)
well to quote yourself:
I work in a corporate environment, and we have high-resolution image libararies for such use; they *should* be given useful alt text and tagged, as their content is their function (you wouldn’t want pic of CEO smiling and sipping champagne next to a story about his announcing job cuts).
is that same as flickr then 😛
Excellent points, Bruce. And Chris, thanks for the plug of my WebAIM article. I will add some more details about cases like this.
The primary issue with starting down a road that disallows alt text for SOME images is that it is impossible to draw the line at the transition point of where they aren’t really useful and where they are vital. As you point out in your logo example, when an image is the only thing within a link and there is no or empty alt, a screen reader has nothing to convey for an element that has functionality. It MUST convey something – and opts for the filename or URL. Where do you draw the line between your punk kid photo on flickr and a thumbnail to a useful product on Amazon?
Jared:
If you’re wanting hard-and-fast rules in the web development game, you’re probably in the wrong line of work, as in my experience they rarely exist.
Each thing has to be taken in context, because they are a huge number of variables. For example: is the img element wrapped in a link the best element to use in that context in the first place? If you decide it is, then by all means set the alt attribute to “Return to the homepage” or similar—because the image itself is functional.
In the Amazon example, is it an image followed by a product name, or just a thumbnail alone? That alone will factor heavily in a decision—if it’s an image plus product name, the alternative text is superfluous and confusing, otherwise it’s, again, functional in itself.
The point is that you have to take each case on its merits, and think through how it’s going to look/sound in context, and no amount of rules will get rid of that process (which is where a lot of people seemed to go wrong when “interpreting” the WCAG).
I just ran across this comment on New Zealand’s accessibility standards wiki (webstandards.govt.nz) that makes exactly the points I wanted to make here. Rather than plagiarize, I’ll quote:
Standard talk:1.1 Alternative text for every non-text element – Web Standards
“I don’t completely agree with this interpretation — ALT text is not just for ‘blind’ users. It also benefits users who have slow connections and choose to turn off images as a default. The ALT text – if it is meaningful – allows the user to choose which images they want to spend the bandwidth on. You also need to think ‘very’ carefully before arbitrarily deciding what content is relevant to visually impaired people. Information about the photo may set the tone for the entire story. –Nathan W 10:58, 17 March 2008 (NZST)”
http://webstandards.govt.nz/index.php?title=Standard_talk:1.1_Alternative_text_for_every_non-text_element
Yes, the punk kid photo is simply visually appealing, unless it happens to be a displayed as a thumbnail to a larger version. When that image also provides a function, this is where things get difficult. I suppose alt of “Image 1”, “Image 2”, or similar would work in this case, but the danger in that approach is that as soon as you go that route, you’ll see “Product 1”, “Product 2” on a shopping site.
While I’m not disagreeing with you, my point is that stating or insinuating that “purely visually appealing images can have empty alt” is starting down a dangerous road. As Mo notes, it’s all about context and educating developers on how alt text works, not simply what it is – which is the intent of my article and this blog entry.
Hot off the press Special meeting or meetings for fact-finding on issues related to @alt in HTML5 (http://lists.w3.org/Archives/Public/wai-xtech/2008Jun/0055.html)
Hmm, considering you are concerned solely with the accessibility ramifications of alt text. Then yes for a photo sharing site then they may be redundant to a certain degree…
But following on from the point Sarah raised, this is one case where other factors should be considered. Usability and SEO.
Usability is enhanced by the alt text(browsing with images off), SEO is certainly easier if an image has alt text.
But at the end of the day how accurate are alt texts? They are probably OK when entered by people that are aware of why they are used, ie like people posting here. But does the average person on the web do the same? Will they go through a gallery of images and an appropriate alt text to all of their photos – I think not.
Case in point I know of a firm that asked their web developer to create a gallery and upload 200 photos, although the facility to add alt text was there, it was never used by that firm. (despite being nagged about it…).
I suspect that one reason it’s so difficult to find consensus, is that the user groups we’re focusing on are simply too broad. Generally speaking, people who are blind from birth or who lose their sight in childhood, tend not to be interested in visual content at all. People who lose their sight in adulthood on the other hand tend to have a much stronger attachment to visual content because of their visual memory.
It’s perfectly true that alt texts can be present, but utterly useless. It’s also true that done well, and for the right audience, a good alt text can describe a scene in clear detail.
Looking at the purpose or the function of an image is a good place to start, as long as we stay open to the idea that the purpose of an image can change from one person to the next. In any case, in a time when too many web developers have difficulty grasping the need to use alt texts at all, it seems to me that making it an optional attribute would be to take two steps backward for the one step the rest of us have taken forward.
The pink diamante is a good look though Bruce 😉
I do NOT agree regarding Alt text for homepage links. The alt attribute text of “home” would also benefit tool tipping visual users (by using the link attribute) and alt attribute should describe the content for when images are off or for blined users. Well thats what I always thought.
My first statement is that I think HTML 5 shouldn’t be worrying about use cases regarding the business model of Flickr. Tails wagging horses. Its up to Flickr to work out ways to build better products and not necessarily for HTML 5 to adapt to them. Otherwise we might as well re-birth FP and lower the bar again on the basis any idiot might want to make a web page so HTML Junk is perfectly valid… 🙂 Just a perspective among many lol. I agree that alt should be mandatory and if the image has no meaning / function then empty alt works fine as is. By making it optional then CMS etc will default to omit it, I’d expect.
My second comment is a question. What if an image could have relevant content meaning BUT still be a link. How would that work? Say, if the image was a photo on a museum website of a specific work of art. Then someone made that image click to an external site that had some related content. Admittedly contrived, but on the one hand you would have an image “Ming Vase yada yada” and an external website named “The Society of Chinese Artefact Historians”. Perhaps the description of the Ming vase itself is still relevant content in that case? I guess I’m wondering if an image can sometimes have two functions, not one? And, if so, would you still recommend the destination?
I Think That You Have Wrote A Load Of B**LS**T… Its Stupid Posts Like This That Google Finds When It Should Really Be USEFUL Information…
I found your article very interesting.
I thought readers would be interested in an application called Alt&Title that applies missing alt and title attributes to applicable HTML tags. I have used it on hundreds of web pages and it has saved me many hours of work.
Give it a go. I hope you find it as useful as I have!
Here is the web page promoting it…
http://www.flysoftware.com/products/altandtitle/overview.asp
I think you’re spot on, Bruce, but then I can see the pictures quite well (with eyeglasses) and am intermittently evil and wrong on a variety of topics.