Text alternatives – a practical guide to images, CAPTCHAs and best practice

This month the column will begin to focus on some more specific issues faced by developers when trying to make websites accessible. August’s column looks at the practicalities of using text as an alternative to images, and proposes a way around using CAPTCHAs for authentication.

In the W3C’s Web Content Accessibility Guidelines (WCAG) 1.0, text alternatives were arguably seen as the most important guideline of all. In WCAG 2.0, guidelines within the same level are no longer meant to have a particular level of importance as they are all equally important. Having said that, there’s a good reason why in WCAG 2.0, text alternatives are the first item on the list.

What the guideline says

WCAG 2.0 guideline 1.1 states that the point refers to:

Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

What the code looks like

A basic HTML code of alternative text for an image looks like this:

<img src="example.jpg" alt="Alternative text.">

So, for example, if you had a picture of a cat standing on a skateboard, you could do this:

<img src="catboard.jpg" alt="Cat standing on a skateboard”>

Best practice

There’s a lot of debate as to what is the most appropriate way to describe elements using alternative text. Consider the following:

• If the image is a picture, what is the first thing that comes to mind when you look at it? If you can describe it in a few words, that’s probably the best alternative text to use.
• Is the image too complicated to describe in a few words? If so, it may be better to provide a label or name rather than a full description. For example, a graph can be labeled as “a graph showing pet ownership in the US” rather than alternative text reading “column A shows that 23% of Americans own dogs, column B shows that 19% of Americans own cats”. More detail can then be given in the webpage text.
• What is the context of the image? Consider the audience of the image that you are describing. Is it more appropriate to have alternative text of a famous painting as a “lady half-smiling” or as the “Mona Lisa”?
• Is the image decorative or something where it doesn’t matter if the user knows about it or not?  In this case, empty alt text is appropriate.  Such as alt=””.

Compliance and exceptions

Under WCAG 2.0 ‘A’, there are some exceptions for alternative text in the following situations:

• Controls, input
• Time-based media
• Test
• Sensory
• CAPTCHA
• Decoration

However, if you are aiming for ‘AA’ or ‘AAA’, you’ll need to provide alternative text.

For controls, time-based media and sensory situations, putting in alt text is pretty straightforward.

For a test situation, where a question in the text requires interpreting an image, it’s understandable that providing an alternative text would in fact make the question invalid. It would be very difficult to make a test or exam conform with ‘AA’ or ‘AAA’ and it may be worth considering if ‘A’ level is accessible enough for such a situation.

For decoration, ‘A’ level states that you can use an empty ALT text, but for the others it isn’t clear whether this is acceptable. Consider if the decorative elements of your websites need to be conveyed using images, or if the style sheet can do the job for you. In most cases, good style sheet design can remove the need for decorative images altogether, and remove the issue entirely.

CAPTCHAs and working around them

CAPTCHAs provide one of the most frustrating issues for people with disabilities and developers alike. By their very nature, it is important that computers are not able to decipher the cryptic text or garbled audio that are used to make sure that there is a real human inputting the information. Yet for those who are blind or vision impaired, having a computer be able to interpret CAPTCHAs through a screen reader is vital.

Confusion often lies in the belief that CAPTCHAs may be made accessible by using both video and audio CAPTCHAs together. However, the quality of the audio playback can vary greatly depending on the type of speakers and background noise which, in most cases, still makes it too difficult to understand.

While ‘A’ level compliance still allows CAPTCHAs with alternative text identifying them as such, the W3C strongly recommends that alternatives to CAPTCHA be used as all forms of CAPTCHA introduce unacceptable barriers to entry for users with disabilities. Further information is available in the W3C's Inaccessibility of CAPTCHA. 

There are, however, some very effective workarounds. If you are striving to make a website ‘AA’ or ‘AAA’ then one of the best options is to use an email-activated process to replace the purpose of the CAPTCHA. For example, if the CAPTCHA is designed to make sure that a form is being completed by a human, have an email activation link sent to the person instead. This achieves a similar process without the need for a CAPTCHA and avoids the need to try and visually decipher strange characters and font styles which can be challenging for everyone.

Additional resources

For more detail on particular situations for alternative text, have a look at the W3C’s updated draft on this, relating to alternative text in HTML5. 

Dr Scott Hollier represents Media Access Australia on the W3C Advisory Committee and publishes the W3C Column monthly.