So just what is a decorative image? It seems to me that one person’s eye candy is another person’s emotional link to a website.
For some, decorative images are those horizontal rules, bullets and other forms of minor clipart we find sprinkled around the web. For others, the term is wider ranging. It includes more content rich images such as photos and artwork.
So, you might ask, what’s the problem with this varied point of view? The answer is simple. Alt texts.
If you Google for the term “decorative image + alt texts”, you’ll come across countless sites that suggest that a decorative image be given a null alt text. It’s possible that we can all agree that for minor forms of clipart, a null alt text will do nicely. But it gets a little more difficult when it comes to more complex images.
I’m not talking about diagrams, blueprints or other information rich images. There’s no argument that they should always carry an alt text, possibly even a long description. I mean the vibrant, emotion rich images that provide a website with a sense of atmosphere.
It’s sometimes argued that providing such images with descriptive alt texts provides too much “noise” for a screen reader user. If we screen reader users stopped to listen to every alt text, every time we came across an image, then this assumption would probably be right. But I’ll let you into a secret. We won’t.
Like sighted users, we’ll skip around the content of the page until we find something that interests us. If the first few syllables of an alt text sound promising, we’ll pause to read. If they don’t, we’ll move on to the next element on the page. Also like sighted users, we’re often likely to pause on something unimportant, but which captures our imagination.
A good alt text can conjure up wonderfully stimulating mental images. A friendly smile is the same in print, photo or wax crayon. Whether you listen to an image or see it, the emotional response is the key factor, so why should we recommend that these emotion rich images should be given a null alt text and hidden from screen reader users?
Perhaps it’s time we introduced another group of images: Emotion rich images and encouraged the practice of providing descriptive alt texts for them. If people don’t want to listen to the alt text, they won’t. If people don’t want to pause and look at the image, they won’t. In either case, it’s good to have the choice.
Entries (RSS)
Comments
And isn’t the whole point of creating accessible websites to enable everybody equal access to content regardless of their ability/disability?
Giving a ‘null alt text’ to a decorative image is the same as creating one web site for non-disabled users and one for disabled users, as some web site developers have chosen to do. Hardly “universal” access!
Screen reader users should help make the decision about to alt tag or not to alt tag in the first place.
Finally, Leonie, what would these “emotion rich” images sound like exactly?
What would they sound like? That’s an interesting question. For me, they would describe the content of the picture to the extent I could understand the reason it had been put there.
Nomensa’s Christmas card last year, sentout digitally, contained a picture of a little girl, wrapped from head to foot in brightcoloured woolies. Standing in the middle of a snow covered glade, surrounded by fir trees, she had her arms flung out sideways and her face lifted to the falling snow. The strapline was “experience is everything”.
I could picture that scene perfectly. Even if I’d never seen fir trees or had no idea what different colours really looked like, I could still conjur up the feel of snow falling, of the bracing air, of feeling good, feeling happy, feeling alive and I could associate that with the strapline.
People get worried about alt texts, but they’re just the same as describing a picture to a friend on the phone. You use language that describes the moment captured in the image, that’s all.
Really enjoyed this article. I’ve used ‘*’ as alt tag content for styled images before, and still did until I read this. Always good to have my thought path changed =)
I’d never considered it being important as I’m usually too stuck on the functionality over the experience of the user.
in many situations, “fluff” images (particularly thinking of those stock photography monstrosities like “businessmen shaking hands” etc) are only there to give a visual representation of the tone of voice that should already be present in a page’s copy. in those situations, i would strongly argue that, even without descriptive alt text, the “mental images” would be conjured up by the tone of voice of the body copy itself.
as ever, it’s impossible to generalise rules for alt…it all depends on context, and on whether or not – even without image and alt – the same meaning and the more ephemeral “feel” are maintained.
Images, pictures and graphic design are essential components of the web. Information and it’s structure need to be designed not only to look pretty but to communicate messages and help a user determine “is this a street-wise youth” site or a “trust-worthy shopping” site.
Design defines user experience and helps determine whether it’s a good or bad one. And the use of images has its place. Sure, many web sites use images in jaw-dropping ways (as most web sites still don’t use web standards) but in using CSS (Cascading Style Sheets) we can separate or remove most images from the page, like background patterns and purely aesthetic images used for identity and emotion. In doing this we increase accessibility as assistive technologies, like the screen reader, are unaffected.
It’s all about understanding the purpose of an image. Which images are for expanding content meaning and which are for presentation and branding and marking them up accordingly and semantically.
Patrick’s right, in as much as it’s difficult to create general rules for this, but I’m not sure I place so much faith in the linguistic capability of body copy.
If every web page were littered with evocative phrases such as “stock photography monstrosities”, then things might be different. The catch is that a phrase like that is only evocative because I know exactly what he means when he writes it.
Perhaps this is the rub. Not every visually impaired person was born that way. I could see perfectly until my mid 20s, so I know exactly what Patrick means by “stock photography monstrosities”, someone who had never seen at all would have less understanding, but even so the description “business men shaking hands” still conveys something to everyone.
Granted, I wouldn’t dwell on such images, but someone else might. That’s the key factor, one person’s monstrosity is another person’s Van Gogh. The thing I’m getting at is that the choice should be theirs, not the developer’s.
Of course, stock photography is something I personally don’t miss in the least…
The issue “to alt or not to alt” has been discussed elsewhere to no conclusion as far as I can tell. My favorite discussion was on the WebAIM list when two blind users got into the fray; one who wanted the null to always be used and one who wanted lots of descriptions.
In the end it was determined that the thing that made these two blind users different was the first person was blind since birth and the second became blind later in life. The first person did not relate to visual imagery, the second longed for it.
I don’t think one can resolve this debate.
I choose to limit alts to only those images that provide the most “essential” information to the user. But it is always a crap shoot.
At the moment, I’m redeveloping our site, and as much as possible, I use background images within the CSS. For instance, each section will have a different masthead image, that helps give a sense of being in a new area eg, in the section devoted to health sector reporting, there may be an image of a heart rate monitor.
I’m taking a lot of care that my HTML is logical, so a visually impaired user should have few problems knowing which section of the site they are on…hopefully….but what i’d like to know is whether you think it is unfair to take these images out of the realm of experience of a group of people. Being sourced within the CSS, only someone who can see will know that it is there.
I completely understand your desire for everyone out there to be responsible and make sure that they add alt text to their images, especially more meaningful images. What do you suggest for people who merely understand how to create a web page in the most basic format just so they can have a portfolio up of their work? Many people who create for the web don’t understand what alt text is, let alone how to write it in order to create anything meaningful to screen readers. We can’t all be stark professionals who know how to navigate the dredges of web building. For me, it’s incredibly difficult to come up with the descriptions needed for alt text. I try but it doesn’t always happen. What do you suggest for someone like me? Especially since I can’t afford to pay someone else to do that type of stuff for my site.
John, personally I would like to know about images such as the heart monitor. Others of course will feel otherwise. The use of background images is absolutely fine, but I’d suggest keeping these questions in the back of your mind when you’re deciding on your approach: why is the image there? If it has no relevance, does it need to be there? If it’s not relevant, should eye candy be translated into mental candy?
Gifts, it’s a good question. The art of constructing a good alt text isn’t really an art at all. A good place to start is to imagine you’re describing the image to someone over the telephone.
A key fact that’s often overlooked is that a screen reader will identify an object as an image and tell the user this. What this means in terms of alt text, is that it’s not necessary to include the words “Image of…” or “Picture of…”, because the screen reader will already have given that information to the user.
Try to think what the image is for. If it contains specific information, the alt text should indicate exactly the same information. If the image is evocative, then describe the emotions it conveys. If you’re feeling adventurous and have a few minutes to kill, test out your potential alt text on someone whose never seen the image in question, then get them to tell you what they think the image is like. Don’t expect a fully accurate response, it doesn’t work that way, but if you get a pretty good understanding, then you’re on the right track.
When I tried to Google ‘decorative image’ here are some definitions that I got:
1. it is the kind that may be added to a page for visual or design interest
2. Purely decorative images, such as spacer gifs or box corners, which have no meaning to the page content should have a null alt attribute.
3. ecorative images are used for purely esthetic purposes, in order to enhance the visual appeal of a Web page.
Great post! Now that the campaign towards making sites accessible even to the deaf and the mute is rampant, the use of these ‘decorative images’ is truly useful. But my question is – When and which part of the web site is it okay to use decorative images?
Post a comment