Web Accessibility

Alternative Text
With all the new and exciting advancements in technology we’ve seen in the past few years, it may seem odd that computers still cannot describe what an image is without certain HTML coding or an “alternative” way. That is where alternative text comes into play. Alternative text is a method

by which images are described to a user who is dependent on a screen reader, or has chosen for whatever reason not to view images (maybe the user would like to avoid pop-up graphics that are trying to sell something).

Images can be used effectively to make a web page more attractive, as well as help explain a concept or topic. In order to maintain an accessible web for all users, we should keep in mind ways to describe an image for those who have difficulty viewing the image.

According to Webaim (Web accessibility in mind), the basic premise behind alternative text is to provide the user with both the “content and function” of images within a website. In most cases the image has a function only if it is contained within a link. For example, if you are taken to another website by clicking on an image – that is the “function” of the image. Content, on the other hand, describes what the image is and how it may, or may not, relate to the surrounding text. Decorative images generally have no relation to the surrounding text; however a picture supporting a description of Workforce Solutions accessible workstation does.

Alternative text can be presented in two ways:

• HTML code using an “alt” (alternative) attribute within an image element
• Within the text surrounding the image

Every image must have an alt attribute. The screen reader will read what is contained in the alt attribute. If a user has chosen not to view images, the text within the alt attribute will be shown. For example, the following HTML code shows what is referred to as an image element surrounded by < and >. The alt attribute resides within the element (underlined in this example):

<img src=”George_washington.jpg” alt=”George”>

• A screen reader would say “Image, George Washington”
• Or, if the user has chosen not to view images, text displayed as “George Washington” would be shown in place of the image

In some cases an empty or null alt attribute can be used (alt=””). In that case, the screen reader would say nothing. If the image is described within the surrounding text, or is acting as a placeholder for decoration, there would be no need for a description of the image. However, since all images are required to have an alt attribute for accessibility purposes, an empty alt attribute would suffice.

According to Webaim, alt attributes should:

• Be accurate and equivalent.
• Be succinct. No more than a few words are necessary.
• Not be redundant.
• Not use phrases such as “graphic of…” or “picture of…”. In that case, the screen reader would say “Image, Image of…”.

One final note: an alt attribute should not be confused with a title attribute. Many users believe that the little message that appears when you hover your mouse over an image is an alt attribute; however, that is the title attribute in action. The title attribute is used for the following purposes:

• Descriptive purposes – to describe the intended purpose of information or data you are entering, for example, in a cell requiring your full name; or to give the full name of a link when it cannot be fully displayed.
• Advisory purposes – when you hover over a link, the title attribute can inform you where that like will take you; or remind you to enter the area code for a phone number, for example.

Remember, alternative text is used to describe images on a web page that users are either not able to, or choose not to view. Alternative text can be presented through HTML code via the alt attribute, or can be used in text surrounding the image.

These are just a few examples of how we can include simple techniques of web accessibility. Be sure to stay tuned for future blogs on web accessibility, and I’ll see you at work!

David Spears is a member of the Workforce Solutions Navigator team for the Texas Gulf Coast Region. Combining training and education to real world examples, David brings personal and professional experience with disabilities to the table in order to help job seekers with disabilities realize their potential. David has a Bachelor’s of Science degree in Business Administration with over 20 years of experience in the business world.