A Technical Guide to Getting Started with Web Accessibility: Part 1 (Alternative Text)

Today, one in every seven people worldwide live with a disability.

In 2017, let’s assume that, by now, you’ve decided to do the right thing and make sure your website is usable, accessible and available for everyone to use. Still, deciding to do something and actually doing so are two different things. Before you get started on actually making your digital properties accessible, you should learn what steps will be required to do the work.

Once you know what accessibility means, understand its importance, have studied the WCAG 2.0 AA success criteria and have access to the code of your website, you are ready to get started. Be aware that you will also need to understand basic HTML.

Read the step-by-step tutorial below to work on the low-hanging fruit for accessible websites: alternative text for images (required by WCAG 1.1.1 success criteria).

Understanding: what is alternative text?

As you can imagine, if you have a visual impairment, the use of an image on your site (for a purpose other than decorative) can make the purpose difficult to understand. The responsibility of those with a website or digital property is to provide a method to make this clear. That method is alternative text: a textual description of the purpose of the image.

Alternative text is designed to clarify the purpose of the image, rather than offer a description of the image. For example, if your website has a picture of puppies playing in a field with the words “Use promo code PUPPIES when checking out for a 10% discount,” you wouldn’t use an alternative text that talks about puppies. Instead, you would focus on being clear about the promotion.

Phase 1: how to use alternative text.

You want to be sure that a visually disabled visitor on your site does not come across the image of puppies mentioned above, and misunderstand its relevance or not be able to find your promotion. How do you do this? Use the alt parameter of the img tag as shown below:

<img src="puppies.gif" alt="use promo code puppies when checking out for a ten percent discount">

When a screen reader user comes to your site the screen reader will read out the alternative text, making browsing easier and clearer for your users. Without the alternative text, the screen reader would simply say, “puppies.gif”. 

Phase 2: how to deal with image links

For image links, you would use a similar method of clarification as you do for alternative text. If you have an image inside a link – for example – you are not alone. It is a very common occurrence, which can be easily solved using an alt parameter. While there are alternative methods, the alt parameter is again used. Take a look at the example HTML below:

<a href="promo.html">

  <img src="puppies.gif" alt="use promo code puppies when checking out for a ten percent discount">

</a>

What’s Next?

We have now addressed steps on how to make the images on your property more accessible. Be aware that the examples shown do not fully illustrate the success criteria for WCAG compliance, but rather, just part of it. For the next steps on getting started, read Part 2 of the Technical Guide to Web Accessibility here, where you will learn to use ARIA landmarks to identify regions of a page (WCAG success criteria 1.3.1).