Accessibility on Screen: 5 Helpful Tips for Writing Effective and Inclusive Alt Text

Welcome to our series of posts about accessibility in communications. Accessibility is the practice of making information, activities, and/or environments sensible, meaningful, and usable for as many people as possible. This is super-important because persons within your audience all have different needs. According to the World Health Organization (WHO), 15 percent of people around the world—that’s over 1 billion—live with a disability. Imagine how many people would never get your message if you didn’t make accessibility a priority!

Accessibility compliance is essential for organizations required to abide by Section 508 and related policies. More importantly, actively pursuing compliance is part of social responsibility and best communications practices. At Avid Core, we are committed to providing equal access and opportunity to people of all abilities and helping our clients and colleagues do the same.

Outside of my work at Avid Core, I write articles about movies and TV shows. Part of my process involves finding images to go along with what I write. Typically, the supporting imagery I use ends up being mostly film stills or, occasionally, poster art. After I find my images and format them accordingly, I go about composing the corresponding alt text.  

Alt text, or alternative text, is a set of words that describes the appearance, context, or function of an image or graphic used on a webpage or within a digital document like a PDF. Screen reading devices, used by individuals with visual impairment, need well-constructed alt text to fully transcribe given information. Screen readers read alt text (along with every other component) out loud, helping the user understand what the image is and how it relates to everything else on the page. Alt text can accompany anything from photos and illustration to graphs and charts.

For example, online articles about the making of a film often come with behind-the-scenes photos. If a particular photo shows the film’s director giving instruction to the production crew, then the alt text for that image could include the following: “The film’s director, speaking through a megaphone.” For example:

Alt text example: A film director speaking through a megaphone
(Image credit: Yahoo Entertainment, Yahoo.com)

But there’s a lot more that goes into writing effective alt text. Here are some tips that will cover alt text composition, the kinds of visuals that require alt text, and how to ensure that your alt text operates in the most inclusive way possible.

Tip #1: Be Specific and Concise

When writing your alt text, it’s important to be as specific and concise as possible. It may take some practice, but alt text is most effective when it doesn’t describe the entire image, just the main components or actions within.

The first thing to consider is the image itself and the general content it’s supporting.

Ask yourself what the intended audience is supposed to be getting from the image in the first place. Reflecting this in the alt text is crucial.  When using a generic or stock image as a visual aid, it’s important that the alt text ties into what the surrounding content is about.

For example, if an online article detailing a certain director’s approach to working with actors ends up using a stock image, then the alt text for that image needs to have direct links to the article. For example:

Alt text example: Director [insert name here] speaks with the film’s two stars
(Image credit: stock photo, Pexels.com)

Additionally, it’s important to avoid overly descriptive or conversational language, as these fillers can often pose a distraction to people using screen readers. Screen readers often cut alt text off at around 125 characters, so brevity is of the essence!

After creating the written content and finding the right associated imagery, alt text is the final puzzle piece that leads to a cohesive and accessible presentation.

Tip #2: Know When to Provide Proper Names

Because I generally write about well-known franchises, like Star Wars or movies and shows based on characters from DC Comics, writing alt text is easy. All I typically have to do is point out who the people and characters in the image are and name the movie or TV show that they’re appearing in. For example:

Alt text example: Henry Cavill as Superman in Zack Snyder’s Justice League
(Image credit: HBO Max)

In this instance, the alt text points out the major or most relevant elements in the picture — who the subject is and what media they’re from. Since it’s an iconic character being portrayed by a famous, contemporary actor, naming the actor is key (as well as naming the film).

Generally, well-known people, places, or things should be referred to by their proper names as this helps keep the alt text short and sweet.

When it is not a well-known person, you will want to describe the person in the image. Personal identifiers relating to identity and representation, whether it deals with sexual orientation, gender, race, or anything else, should always be treated with the utmost care, diligence, and respect. It’s also important to avoid making assumptions; if you don’t know how the individual being depicted identifies, use “person” instead of “man” or “woman.”

Tip #3: Ensure Your Alt Text Adds Value

With alt text, it’s best to avoid phrasing like “an image of” or “picture of.” The HTML code used in website coding already identifies images and pictures as such and this kind of phrasing also takes up unnecessary space at the start of your alt text. That kind of phrasing is typically reserved for captions, which are different from alt text.

When composing alt text for an image that already comes with its own caption, simply copying and pasting the caption text is not good practice. Captions and alt text serve separate but related functions and should be treated as such. For example:

Caption: Director David Lynch on the set of Twin Peaks Season 3
Alt text: David Lynch, a film director, speaking through a megaphone
(Image credit: Yahoo Entertainment, Yahoo.com)

When it comes to shorthand or abbreviations, it’s generally better to avoid them altogether. If initials must be used in your alt text, the full name or title of the subject must be typed out first, then follow it up with the initials. When typing out initials, use dashes, spaces, or periods in between each separate letter so the screen reader can read it properly.

Tip #4: Look Out for Typos

This may seem obvious, but as with any written work, spell-checking is a must. Misspelled words can greatly affect user experience, cause interruptions or confusion, and basically and unnecessarily impede what should be a smooth experience.

In terms of basic readability and user interface, well-constructed (and error-free) alt text can help a user maintain their concentration and rhythm as they go through a webpage – especially one that may come with a broken image. This is important even for those not using screen readers. When an image fails to load, the alt text will indicate what the missing image was supposed to be. If effective alt text fills in for that “absence,” it can help users not feel left out as they continue interfacing with the rest of the content.

Tip #5: Understanding Different Image Types

In addition to imagery like photos and illustrations, there are also decorative images that are often used on webpages or digital documents. These graphics are used to visually break up the content on a page; they don’t need alt text if there’s no meaning or informative function assigned to them. Inserting the word “null” into alt text fields pertaining to decorative images, if possible, helps screen readers skip over them during the transcribing process. 

In addition, button images, which are included for navigational purposes, serve as a function key which the reader can use to submit something or simply click on for more information. Alt text for button images is particularly important as it explains their intended purpose/functionality. It also comes in handy when images fail to load.

Additional Resources for Alt Text

Alt text continues to be a crucial component of website building and general internet usage. It helps individuals with visual impairments or who have a learning disability to better engage with online content on a day-to-day basis.

Online communication is an ever-present element in people’s education, work spheres, and leisure activities and it’s therefore important to help make sure that all users are considered when producing and formatting online content. Popular online platforms, like WordPress, Facebook, Twitter, LinkedIn, Instagram, and many others, have alt text options that let their users optimize their alt text for a better, more inclusive, and hopefully more equitable experience.

  • To learn more about screen reading technology and how alt text benefits users with visual impairment, the University of California – San Francisco created an excellent educational video