By Gian Wild

The Hidden Nuggets of WCAG2: The Wonderful World of ALT Attributes, Part I

By Gian Wild

Recently I judged the accessibility component of the Australian Web Awards. Time and time again I saw the same errors when it came to ALT attributes. Success Criterion 1.1.1 – the ALT attribute requirement – is a complicated success criterion.

Missing versus empty ALT attributes

Images must always have an ALT attribute. Don’t believe me? Then read When Not to Use an ALT Attribute and see if I can convince you.

ALT attributes are not TITLE attributes

TITLE attributes provide information on mouse hover. This is their purpose. The purpose of an ALT attribute is not to provide information on mouse hover – even though the ALT attribute does sometimes appear this way in certain browsers (such as Internet Explorer). The purpose of the ALT attribute is to provide an alternative, textual description of the image, for use by people who cannot access or see the image. So if you have some information that you want to appear to the user when hovering over an image, use the TITLE attribute, and keep the ALT attribute for describing the image.

Problems with ALT attributes

Also remember that ALT attributes (and TITLE attributes) are not available to keyboard users – therefore you should never put anything in an ALT attribute that isn’t conveyed by the image. That means no author or attribution text, dates or copyright information (unless it is displayed in the image itself).

Another issue occurs when people are browsing with images turned off. In Firefox, the ALT attribute is constricted to the size of the actual image – so if you have a 10 by 10 pixel GIF then it will be almost impossible to read the ALT attribute. In Internet Explorer the entire ALT attribute displays, but does not wrap, so can cause horizontal scrolling. In fact there has been an accessibility bug raised about this on Allybugs, and if you are interested you can co-sign the petition.

Writing ALT attributes

ALT attributes can be difficult to write. It is important to describe the function of the image, not the actual image itself (with one major exception: image galleries, which I will cover in another article). The context of an image will always inform what you should write in the ALT attribute. For example, an image of the world might have several different images, depending on its context within a site:

  • On a Greenpeace website it might say “Save our world”
  • On a travel website it might say “International travel”
  • On a University website it might say “We have campuses around the world”
  • On an auction website it might say “World globe approximately 30 cm in diameter, made of plastic and fully inflatable”

How long can ALT attributes be?

There are no hard and fast rules about the length of ALT attributes. The Working Group considered adding a 100 character maximum to the ALT attribute technique, but decided against it in WCAG2. While it might not be in the WCAG2 Techniques, it is a good rule to follow.

Next article I will be talking about specific ALT attribute requirements for images such as art, graphs, maps, links and images of text.

  • Great post, Gian. I don’t think most sites even know what alt tags are meant to be used for, if they remember to use them at all.

  • What I especially enjoyed about the article is didn’t say ‘alt tags’.

    • Well I wouldn’t recommend listening to anyone on the topic of accessibility if they call them “alt tags”!

    • Chris Emerson

      While they aren’t tags in the HTML sense, the term ‘alt tag’ is in colloquial usage now, so can we please get over the whole anti ‘alt tag’ thing now? Everyone knows what is meant by it…

      • Stevie D

        The main reason I moan about people saying “alt tags” (apart from the fact that I’m an unashamed pedant and I hate inaccuracy in language) is because then they move on to talk about “title tags”, and then it isn’t clear if they mean title attributes or the actual tags in the document head.

  • Wendy

    I have always been aware that the Alt attribute was more for either blind people or for people who have images turned off.
    Most of my websites are for artists so it has been a major disadvantage with SEO or takes a load of my time to write a description, so I am very keen to see your next article.

  • ZoiD

    Given the author’s impressive credentials I find it hard to understand why the article emphatically states that the (sole?) purpose of the title attribute is to visually display text on mouse over. Surely the purpose of “title=” is much wider than that; in fact it could be argued that its main purpose has nothing to do with visual representation at all.

    The article refers to ‘alt’ and ‘title’ only in relation to images when their use is so much wider. Perhaps the title of the article should have been ‘the wonderful world of image markup’ instead?

    The article mentions issues that arise when users browse with images turned off but again only in reference to sighted users.

    It’s incredible that an article about the alt attribute doesn’t mention blind users or screen readers even in passing. There was an opportunity here to inform developers about the core of accessibility, which might be be to allow an equivalent experience for all users regardless of the end user agent, that has been missed. And of course the big carrot would be to say that searchbots can be considered to be ‘blind’ users.

  • Hi Gian,

    Good post, really is needed, there is a very large misunderstanding on Alt Attributes. Given all the other areas that people are getting wrong, like semantic structure and the like, I hope this is one of a series of articles.

  • I was a judge this year as well, and although I was judging a different category (code quality) it wasn’t hard to notice the constant ALT attribute failure.

    Part of the problem is a lot of the time it’s the web developer/designer who ends up adding the ALT attribute as an afterthought (after the text content has been added), whereas it would have been helpful to give content writers access to the imagery you intend to use for the site so he/she can provide context suitable ALT text (and of course explain to that person the correct way to write for ALT). Because as Gian rightfully mentioned, it can be difficult to know exactly what to write for it and most designers/developers are not content writers.

    Incredible we still need to bringing up “web dev 101” topics like this.

  • Chris

    Gian, excellent example of how alternate text is affected by context of the web site. I know if the same image used in different parts of the same web page can also have different alt so maybe in part 2 you can provide some examples of that.

Get the latest in Front-end, once a week, for free.