ALT Text - Alternative, Not Optional

When, as testers, we talk about testing a web application for accessibility, first test which comes in mind to verify the alternative text for the images available on the webpage and why not? - After all, it is one of the simplest and most important tests to perform.


The alternative text is meant to provide the information about the image to the users who are visually disabled and using the screen readers or text browsers or who have disabled the images in their browsers. An alternative text should only provide the information what the image is all about and unnecessary information should be avoided.

An alternative text

• should be written based on context of the image and content. Providing a description is not necessarily useful every time. For example, following alternative text is detailed enough - “A horizontal rectangular flag with three colours in order of Saffron, White and Green with a 24 spoke wheel in Navy Blue at centre” but it will take time for user to process all provided information. Instead, “Indian Flag” or “Tricolour” or “Flag of India” could make more sense to user.

•  should be set as Null for decorative images and images which do not convey any information. Providing unnecessary information slows down the browsers which render the images into speech or Braille output. Moreover, it will frustrate the user.
  The decorative images should be used in CSS instead of HTML. For some reason if decorative image is being used in HTML, don’t forget to set ALT attribute as NULL.

Now, we will see how alternative text renders in different browsers: For example purpose, we have stripped of a section of the Infibeam home page. Here, our point of concentration is “Magic Box” image as highlighted in the below picture:

Original Image:

In below section of this blogpost, we will see how the images are displayed in different browsers:

IE9

Scenario 1: Disabled Images with alternative text

Scenario 2: Disabled Images without alternative text

Mozilla Firefox

Scenario 1: Disabled Images with alternative text

Scenario 2: Disabled Images without alternative text

Google Chrome

Scenario 1: Disabled Images with alternative text

As depicted above, Google Chrome is unable to render the alternative text if image is disabled which makes users unable to read the content who have disabled the images for any reason. Here, web content is made accessible but user agent is not accessible. Hence, Accessible User Agents is also an important factor for making web accessible.

Personally, I liked the way how IE9 depicted the information to its user compared to other user agents.

There are few misconceptions about ALT attribute which I would like to mention here:

• ALT is not an HTML tag, it is an attribute of IMG tag. The term tag is commonly misused with ALT and should be avoided.
• Alternative text is not optional for Images available on a webpage. According to HTML 4.01 specification, the ALT attribute must be specified for the IMG and AREA elements. It is optional for the INPUT and APPLET elements.
• ALT and TITLE attributes are not interchangeable. In days gone by, browsers used to render the text in ALT attribute as Tool Tip Text instead of TITLE attribute which is intended for that purpose. The issue is fixed in new versions of the browser.

Complex images:

Sometimes, an image might be too complex for user and may require descriptive information for example a complex chemical structure of an element or a map or a char. We can provide the information by the mean of ALT text but a long description by screen reader doesn’t sound well in between of main topic. User might also lose track from original document. In such scenario, user must facilitate with different attribute.

One such attribute is LONGDESC which is purposely used when a long description is needed to explain the image. LONGDESC attribute of image tag must contain the URL of the page where description of image is available and should not have description text itself. Although, LONGDESC is useful but it is not supported anymore by major browsers and subsequently, has been dropped from HTML5 specification.

The other way around is to use the D-Link which is also out of fashion. The D-Link is a normal text link hyperlinked with long description page. The D stands for Description. See below how it can be used.

When user clicks on link [D] in the below screenshot, it will be redirected to “LONGDESC.html” page.

As both methods mentioned above are not in use anymore, the best and effective way is to provide the description along with the image itself and it will benefit everybody.