How to Create Alternate Text for Images

Do you have doubts that your websites or electronic documents are not accessible to users who cannot see or download images?

If this sounds like a situation you face, then you need to use something called “alternate image text.”

does this make you feel weighed down by an ever-growing demand on you to meet one more accessibility requirement and yet another compliance mandate as a front-end developer, web content manager, or e-learning support?

But don’t panic. If you’ve sent tweets to friends, have posted status update pictures on FaceBook with descriptions, or even commented on someone’s uploaded images, you have created some sort of an alternate text.

What is an Alternate Text and Who does it Benefit?

Alt text (alternate text) is a word or phrase that is inserted as an attribute in HTML to tell web or document users the nature or contents of an image.link opens in external window

Adding alternate text for images is the first principle of accessibility, says WebAIM, a leading organization on accessibility. “The web is replete with images that have missing, incorrect, or poor alternate text.”link opens in external window

The main beneficiaries of alt text include users with and without disabilities:

• Blind or low vision users who use screen readers or magnification
• Auditory disabled users who read text transcript of an audio
• Deaf-blind using tactiles
• Users who turn off images to speed download or save bandwidth
• Websites or companies using SEO (search engine optimization) to boost their visibility on internet.

You Said My Social Media Experience will be Handy Here!

If you are confused whether your websites or electronic documents need alt text, refine your handy-dandy social media experience of creating image alt text by asking yourself three simple questions:

• Do I use image as a decoration to create a visual context? If yes, image needs no alternate text
• Do I use image to provide information? If yes, then one needs to describe the image. This not necessarily be what the image shows
• Does the image link? If yes, then one needs to describe the destination of the link in the alt tag.

With these questions in mind and some practice, your experience of writing descriptions of images and events on social media would be really handy in creating alt text.

“Count me in,” But How to Create Alt Text?

If you are the kind of content creator or college instructor who freezes in tracks on hearing something about coding, no worries. I will walk you through steps to create alternate text in electronic documents. But if you like playing with code, you can jump straight to the next heading where I provide a description of the coding process in HTML.

If you are a digital content manager or college instructor who creates documents like PowerPoint slides, follow these steps to create alternate text:

• Position the cursor in the document where you want to place the picture
• Open the insert tab in PPT and click on picture
• Navigate to the directory/folder where you kept the picture on your computer, select the picture and click insert
• Right click anywhere on the image that opens the size dialog box
• Go to the tab “alt text”
• Enter alternate text in the edit box
• Click on close button.

Done.

Note: tested with Microsoft PowerPoint 2007.

If you want to create alt text in MSWord or some other similar word processor, the logic remains the same, only specific steps might differ.

“I like playing with the code,” How to Code Alt Text?

One does not need to write code to create alt text, it is however helpful to have some basic information about how to do it.

But for those for whom coding is fun or want to take a quick dip, here is a brief description of how to code alt text:

Start with an image tag, which is part of HTML code. This tag tells internet browsers which image to display. It begins like this: <img

This image tag consists of several parts known as attributes. Inside the image tag is the source attribute that starts with src, followed by an equal sign, and then comes the actual location and file name inside the quotation marks. This source attribute finally looks something like this: src=”http://www.myblog/picture.jpg”.

The other attribute of the image tag is the actual alt text. It starts with alt, which is a shortened version of the alternate text. Alt is followed by an equal sign, which in turn, is followed by quotation marks and then the actual description of the image inside the quotation marks. Once everything is set, then close the image tag with Thus, this alt text attribute looks like this: alt=”description of the image”

Now the entire code looks like this:

<img src="www.myblog/picture.jpg” alt="description”

Now that you know a lot more about alt text than before, how will your company or university will use alt text to improve digital accessibility. Share your ideas in the comment box below.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s