Image Alt Text Best Practices For Web Accessibility

One point I have stressed in several previous blogs is the importance of alternative text image descriptions for website pictures and graphics. So much information is conveyed to users through imagery, making image accessibility necessary to assistive technology dependents.

Today I will dive into the specifics of alternative text image descriptions, including what they are, how to implement them, and best practices for writing descriptive tags. As a blind technology user, I offer valuable firsthand insights into the attributes of an image description that are most meaningful to visually impaired individuals.

Continuing the trend from all my posts, I will focus exclusively on screen reader accessibility. Screen readers are highly specialized software that verbalizes visual on-screen elements of any website, mobile application, or computer program. Every day, I and many other visually impaired individuals rely on screen readers to access digital content.

For screen readers to work effectively, you must optimize your website's code, including alternative text image descriptions (alt text, for short). These short word-based accounts tell blind users what an image depicts and, if it’s a hyperlink, where it leads to.

 
How Screen Readers Interact with Images

Alternative text image descriptions are a necessary component of a website’s code that allows screen readers to detect, recognize, and navigate images on the page. If these text labels are missing completely, the screen reader will completely ignore the image or announce vague terms such as “image”, “graphic,” or the file name of the image.

An even more poignant problem when websites lack image descriptions is that blind users will inevitably miss out on the essential details conveyed in any photographs or graphics. Alternative text descriptions are attached to the back-end code of the relevant picture through the “alt” attribute. If implemented correctly, the descriptions are invisible to sighted users (unless the image doesn’t load properly on the page).

Alternative text descriptions are different from traditional on-page picture captions that appear below an image. Captions are visible to all users and generally provide supplemental information, such as the names of the people in the photograph. While this information is essential, captions do not replace alternative text tags because they do not convey the equivalent visual data available to sighted users. It is relatively useless to know the names of the individuals in an image if I cannot also know where the people are positioned, who they are, and what they are doing. Including proper alt text allows screen reader users to know all the details in a picture. However, not all descriptions are created equal.

 
Image Alt Text Best Practices

There are two critical factors to consider when writing an alternative text image description. Firstly, the text should explain all the necessary visual detail sighted users obtain when examining the photograph. Secondly, you should state the information in as few words as possible to maintain navigational efficiency and fluidity. Following these web accessibility alt text guidelines improves usability, user experience, and page optimization.

Include All of the Essential Elements

When constructing the descriptive tag, mention the subject, action, and setting. The subject refers to the main focal point of the picture—usually a person, animal, or object, such as furniture or buildings.

Let's take, for example, a picture of a group of four people having dinner at a round table in a residential dining room. The people are the subject and should be mentioned first in most cases when writing an image tag. Next, all image descriptions need to touch upon the action taken by the subject or subjects. In this case, the people are eating dinner. Lastly, identify the setting. The setting covers details such as where the subjects are located in the frame and relevant distinguishing characteristics of the pictured environment.

In this example, the setting is a round table in a home dining room. An appropriate alternative text image description for the above scenario can be: “Four people eat dinner at a round table in a home dining room." Though there is no definite industry standard for the order of subject, action, and setting in a descriptive tag, the aforementioned sequence is generally effective.

There’s also no reason to include superfluous or redundant terms or phrases in alt text, such as “image,” “icon,” or “picture.” Screen readers will announce the presence of an image or graphic, so limit these descriptors to words like “painting” or “photograph” if distinguishing the medium is necessary.

Always Use as Few Words As Possible

Equally important as crafting the content of an alternative text image tag is employing as few words as possible in the description. As a visually impaired user, I want to obtain the data presented in the picture without being bogged down by lengthy mini-paragraphs that slow me down and lead to an overall clunky site navigation experience.

To demonstrate my point, I will write a poorly-optimized version of the description from the previous paragraph: "A group of four people are eating at a round table. They are eating dinner in a dining room in a house." This is a much wordier way to say: "Four people eat dinner at a round table in a home dining room." Unfortunately, this is all too common in the field, as I frequently encounter image tags that need shortening.

Look at every element of the tag, even something less obvious, like grammar. Grammatical structure and phrasing can make a big difference in length. In the previous example, the lengthy version begins with: "A group of four people are eating." My optimized version says: "Four people eat." One is seven words, and the other is three, but the extrapolated meaning is the same.

Regarding grammar, using the present tense reduces the word count by eliminating the need for auxiliary verbs. The phrase "a group of" is not necessary to convey the intended point. When writing descriptions, web accessible image alt text best practice is to be concise without sacrificing detail and clarity.

Tailor the Text Description to the Picture's Purpose

Images on websites do not exist in a vacuum. They almost always have a specific purpose or goal. When writing a description for a picture, focus on details that further the original intent of that photo.

We’ll use the dinner table example from earlier again. Suppose the picture is a product image for furniture on a retail site. In that case, the description should focus more on details related to the displayed table. Conversely, if the image is on a restaurant's site, you might describe the food on the plates or the room's ambiance

Blind technology users like myself find image descriptions more useful when they explain details relevant to that image's primary function. For example, when browsing a furniture site for a dresser, I want the product photo description to focus on the dresser itself rather than extraneous particulars, such as the color of the wall behind it.

In a similar light, certain images on a website need not be described at all. For example, decorative or background graphics are not necessary for a successful visit to the site and therefore do not require alternative text descriptions. In this scenario, a null (empty) alt text tag (alt="") tells screen readers to ignore the graphic’s descriptive readout and reduce audible clutter.

The key takeaway here is that alternative text tags should be crafted based on both the purpose of the picture and what is present on the page around the image.

How to Address Linked Images

It is common in digital content for images to also serve as clickable links. When a screen reader encounters a hyperlinked image, it is far more important that the descriptive tag focuses on where the link will take the user rather than the image itself.

Not all link images need to be described, so this is more of a judgment call. If the image’s contents are important to the overall purpose and message, providing a description is recommended. If not, a destination designation may be enough. Most importantly, prioritize the information regarding where the linked image will ultimately bring the user. The image’s alt text should be in context with the web page’s meaning and function.

What Not to Include in an Alternative Text Image Description

Below are some web elements that you should not include in descriptive image tags:

• Long, complicated file names
• Full hyperlinks or URLs
• Confusing or excessive punctuation

The above descriptors will hinder screen reader performance and defeat the purpose of the description. Plain text is best.

Why is Alt Text Important?

I cannot stress enough the positive impact of a well-optimized description on the experience of a blind screen reader user. This accessibility standard not only allows visitors with impairments to consume content completely, but image alt text also provides many SEO benefits. In other words, proper alt text helps to surface the images in search results, pushing more organic traffic to the website.

Writing detailed and meaningful but compact and concise alternative text descriptions provides an accessible image experience for everyone.