Alt Text for Beginners

The one thing I can confidently say about my understanding of web accessibility is that I am a beginner. Though I’ve been managing content in the field of digital accessibility for a few years now and have attended some webinars and digital conferences on the subject, I still feel like the person “in the room” who knows the least. Before I worked for WebABLE™ News, if you had asked me what web accessibility was, I would have only had a vague notion, and it would have been incomplete, if not downright incorrect. Whenever friends ask me about my work, their eyes sort of glaze over when I try to describe this field or they will outright ask, “what is web accessibility?” It seems to be a case of “you don’t know what you don’t know”. However, once the major concepts and best practices of web accessibility are grasped, it is impossible to look back.

The definition from W3C Web Accessibility Initiative is: “Web accessibility means that websites, tools, and technologies are designed and developed so that people with disabilities can use them.” Simple enough? Well, it is not that web accessibility is inherently difficult per se, but it is a conceptual shift of how to think of digital spaces. It also requires a great deal of empathy. When you realize most of the web was not designed to be accessible to everyone, suddenly you want to shout about web accessibility from the roof tops! Consider this one jaw-dropping statistic from WebAIM – 95.6% of the top 1,000,000 homepages had accessibility errors in 2024. So what can we all do about this glaring lack of web accessibility? One of the top five factors hindering web accessibility is images missing alt text.

Alt text is just one component of web accessibility but I find that as a beginner it is one of the easiest accessibility practices to grasp. More importantly, alt text makes a critical difference to those with blindness, visual impairments, and other disabilities to be able to access visual information. Implementing alt text can seem overwhelming at first though. Here’s basic information along with some best practices to help you get started as a beginner who is learning web accessibility principles.

What is Alt Text?

Alt text is short for Alternative text. WebAIM offers this concise definition: “Alternative text is a textual substitute for non-text content in web pages”. Think of this text as a replacement for an image- it is not the same thing as a caption. Alt text is a written description for integral visual content on a web page.

Why is Alt Text Needed?

Alt text is essential to web accessibility. As I mentioned before, alt text is critical for blind or visually impaired persons to access visual information that they otherwise would not be able to perceive. However, the necessity of alt text does not stop there. People who have other disabilities such as learning disabilities, autism, dysgraphia, ADHD, etcetera may also benefit from alt text as they may have trouble deciphering visual information.

Alt text also benefits users with a slow internet connection because the alt text will display if images cannot load. An added bonus is that proper use of alt text helps with search engine optimization (SEO) of your website. So what is the proper use of alt text then?

Alt Text Best Practices

First, be as concise as possible.

When I started out, I mistakenly made alt text way too complicated. I described every little thing in incredible detail: size of fonts, placements of words and logos, specific locations of patterns in an image- it was excessive. While providing details is not a bad thing inherently, balance is needed to prevent over-complication. GBH explained this well in the article Guidelines for Describing STEM images: “Simply put, it takes people with visual impairments more time to read books and articles than people without visual impairments and the process should not be further slowed down by unnecessarily long image descriptions.” So, describe what your image is and how it connects to the information you are trying to present, without being redundant, complicated, or excessively descriptive.

Here is an example using an image I want to post on social media of Marshmallow the cat. First, I’ll show you an example of alt text that is too complicated; next, alt text that is too simple; and finally, alt text that is just right for someone to understand what I posted. Notice, the alt text is NOT the caption/description displayed under the image. Rather, alt text is what a screenreader would announce in place of the image.

First alt text that is too complicated: A picture of a medium sized white cat sitting on a brown diagonally slanted window sill with a white fabric curtain on the left side of the image. The window has a number of square panes and looks out onto a snowy scene. There are snow covered spruce trees in the background and a snow covered yard in the foreground. The sky is white with clouds. There is snow hanging from the roof with icicles melting down. The cat is looking down and to the right.

Next: Alt text that is too simple: Marshmallow in a window

Not only is this example of alt text too simple, it is also redundant: it is basically the same as the image caption already provided. Moreover, it is unclear to the user as it does not state that Marshmallow is actually a cat and not a sweet treat!

Finally, alt text that is just right: A white cat sitting on a windowsill with a snowy scene outside. The ground and spruce trees in the yard are snow covered. Icicles hang from the top of the window.

Let me reiterate a very important point. Did you notice the image’s caption “Marshmallow sitting in the window”? Without alt text, this description would be very confusing to someone who could not see the image. With the addition of alt text though, a visually impaired user will know that Marshmallow is actually a white cat sitting in the window- not an actual marshmallow!

One other factor is brevity. In my example of over-complicated alt text I included the phrase “A picture of” – this is not needed and redundant to the user. The user, screen reader, and/or search engine already knows it is an image. Therefore, do not include these phrases in your alt text: “this is an image of”, “this photo is”, “a picture of”, “image of” and so on, you get the idea. Each little statement like that adds up: leaving them out will streamline the process for both you and the end user.

Because this article is written for absolute beginners, I did not get too detailed or technical here. For the most complete information, here is an images tutorial from the W3C Web Accessibility Initiative and a detailed alt text article from WebAIM.

Do all images need Alt Text?

The short answer is no, because some images are purely decorative in nature. How do you determine if an image is functional to the overall understanding of the information presented on the webpage? One helpful suggestion brought out by the W3C Web Accessibility Initiative is to imagine you are reading the webpage over the phone to someone- this can help you to determine which images are functional verses merely decorative. For an image that is purely decorative, the W3C standard instructions is to put empty quotation marks: ” ” in the Alt Text field. “When leaving empty alt texts, be sure to set the alt text code to empty quotes. If you put empty quotes in the alt text, the screen reader will ignore the image and treat it as if it’s not on the page. If something else is included, even a white space character, screen readers will still announce the image by saying something like “space.”” -Built In Magazine, Software Developers Shouldn’t Overlook Alt Text.

What about AI?

Can’t we just rely on AI to write alt text for us? The short answer is no. Relying on AI to create alt text results in incomplete or totally inaccurate descriptions. WebAIM eloquently points out: “Although technology is getting better at recognizing what an image depicts, algorithms alone cannot understand what an image means within the context of the overall page”. If you do use an AI assistant for alt text, please proof and edit the alt text before publishing to make sure the text is accurate and relates to the context of the information you are presenting.

Inappropriate Uses of Alt Text

Sadly this must be addressed. I’ve seen more than a few posts on social media where people use alt text to write jokes or plant “easter eggs” for sighted users- completely disregarding the real purpose for alt text. Additionally, some users use alt text to get a longer character count for their posts. While some people are simply uneducated about the purpose of alt text, some will abuse it intentionally. Please don’t abuse alt text!

In Conclusion

If you’re reading this article: thank you. It’s awesome that you want to expand your knowledge of web accessibility and contribute to a more accessible web for ALL users. No one should lack access to digital information in this day and age. Let’s all work together to make the web a more accessible place for everyone by using alt text for our images!

About the Author:

Callie has worked in content moderation and creation for WebABLE™ News since 2021. She lives in South Central Alaska and enjoys photography, rock hounding, making jewelry, and loves to learn new things! She moderates @WebABLE_News on X and @WebABLE.bsky.social on BlueSky.