Make sure all your images have ‘alt’ attributes which describe them clearly and accurately
I’ve talked about the importance of <alt> attributes, sometimes called ‘tags’, before, from an SEO perspective. But their primary function is actually a user-facing one.
Alt attributes are a proven way to make sure users with accessibility issues – for example less than perfect eyesight – can enjoy a web page just as much as people with 20-20 vision.
Why is site accessibility a must?
Alt text – short for alternative text, is a text-based alternative to non-text content. In exactly the same way as public buildings in Britain are compelled by law to provide disabled access, site owners are required to make web pages accessible to everyone, of every ability. It’s the law. And it is being enforced. Take the RNIB’s legal case against BMI Baby.
Computers and screen readers can’t analyse images or ‘see’ what photos, cartoons or graphics look like. They need words to decode images. Unless you describe your images properly using <alt> attributes, they will mean nothing to visually impaired people.
In a nutshell, as the Royal National Institute for the Blind website says,
“The Equality Act came into force in October 2010, replacing the Disability Discrimination Act in England, Scotland and Wales. If someone with a disability, such as sight loss, can’t access the information on your website then it could be seen as discrimination.”
10 tips for alt attribute perfection
- Every image MUST have an alt attribute, even if it’s empty or ‘null’ (alt=””)
- You can provide alternative text either in the alt attribute itself or, if it makes better logical sense, in the text surrounding the image
- Your alt text should make both the content and the function of the image clear
- keep it short and sweet – there’s no need to go overboard
- your alt attribute should be different from adjacent or surrounding body text
- you don’t need to use ‘image of’ or ‘picture of’, since screen readers ‘tell’ visually impaired people they’re looking at an image. But you might use ‘cartoon’ to distinguish your image from photos and graphics, as I have with the image above
- alt text depends on the context of your image, so make sure it makes sense in context
- if the image is functional, ie. it links somewhere else, perhaps as a button or menu item in your site navigation, you need to describe its function as well as the actual content. If it’s a ‘services’ button, for example, the alt attribute “services” will do the trick, covering the image’s function and content in one simple word. There’s no need to include the word “link” because text readers do that for you
- if your image is a spacer or decorative – ie. it doesn’t present ‘important’ content, is only used for layout or non-informative purposes and doesn’t include a link – it still needs an alt attribute. But some people feel it should be expressed as empty, alt=””. Myself, I’m not so sure… see below
- As you can imagine, alt text is NOT meant to be a sales or marketing opportunity. It’s very bad practice to crowbar a marketing-led message into an alt tag
When does an image contain ‘important’ content?
Point nine above is a tricky one. How do you decide whether your image contains ‘important’ content?
Say you’re illustrating a blog post about your legendary friendly, personal service with a photo of two happy people shaking hands. The image doesn’t convey important information. But it does support your message on an emotional level.
Some experts feel it’s best to leave the alt attribute empty in cases like this. Other people, myself included, feel a descriptive alt attribute enriches the user experience. If I was visually impaired I would want to know what the image is about, whether or not it imparts ‘important’ information. I’d prefer to decide what’s ‘important’ and what isn’t, rather than have someone make the decision for me.
If you’re not sure what to do, the people at WebAim have done an excellent job of explaining the distinction.
(Cartoon by Kate)
