How to Write Good Alt Text & Image Descriptions for Your Website
As a small business owner, you have put in a lot of personal time and energy, or maybe even financially invested in hiring a professional, to build the perfect website to represent your business and sell your products and services. It looks AMAZING! The colors and fonts are exactly what you envisioned. The copy is great, if you should say so yourself, and you had all those professional photos taken of you, your team hard at work, and of course your products on display and in action.
Your marketing is on point, so you are seeing your site visits regularly grow, but those clicks aren’t turning into clients quite like you expect., and your bounce rate is higher than you’d anticipate.
What is the missing key?
According to a 2023 Moz report on Alt Text, over 60% of website home pages accessibility errors are due to missing or inaccurate alt text.
What does that mean for your perfect website?
You are missing out on higher SEO ranking, and a huge portion of the population that might want to work with or purchase something from you. There are 285 million people in the world who are blind or have low vision. If you only had access to 1% of that population, that is still 2 million possible customers you are missing out on. PLUS, those numbers are only referencing those with visual impairments. Alt text and image descriptions also help people with cognitive and learning disabilities, so your customer base just dropped a bit more.
Now, look at your impeccable website, imagine you can’t see to experience its beauty. If you could only hear what is on the page would you know what the page was about? Was the product explained well enough that you would purchase it without seeing it? Did you know next steps to take to make a purchase or book an appointment? Could hearing an image description have improved your experience or conveyed a message stronger?
That is how people using screen readers – those with low vision, blindness, and those who choose to not have images load for one reason or another, experience your website, and thus your business.
So, if you are unsure how to answer any of those questions, or maybe you have never even heard of alt text or image descriptions don’t worry. I am going to teach you how to become an expert in writing this important content for your website to make a better user experience for everyone.
In this article
How long should your alt text or image description be?
What details should be included in your alt text and image descriptions?
What NOT to include in your alt text and image descriptions
Alt text and image description examples
Do you need BOTH alt text and image descriptions?
Do all images require alt text or an image description?
What is a screen reader?
Before we get in the weeds about alt text and image descriptions, let’s briefly explain how they are accessed by people who are blind or have low vision.
A screen reader, or text to speech software, is an assistive technology that allows people with vision impairments to access digital content. The software will read content aloud to those who cannot see it.
For today’s conversation we are talking about screen readers accessing content within an image. If an image does not have alternative text or an image description explaining it ACCURATELY, the screen reader could completely ignore the image or make it difficult for someone to understand the content.
If the screen reader doesn’t completely skip over the image it will often just say ‘image’ or ‘graphic’ leaving the user to wonder whether that image is important or not. In even worse cases an AI software may try to describe the image, in which case you might as well ask a three-year-old to describe it for you.
To avoid creating this terrible user experience for your customers, take a few minutes to learn about how to write good alternative text and image descriptions for any digital content your business creates.
What is alt text?
Alternative text (alt text) is a brief description of an image on the web. It is written in the HTML code and is not visible on screen, unless an image does not load. Alt text is essential for accessibility. When a screen reader encounters an image, it will read the alt text out loud or display it on a brail display, so users with vision impairments can understand the content of that image.
Bonus Tip: Alt text is also crucial for SEO. Using your keywords in your alt text can improve your websites ranking. But remember, when creating content for your website, which includes alt text, you are writing for humans. Don’t add the words if they don’t make sense……that is bad for accessibility and SEO.
What is an image description?
Similar to alt text, image descriptions provide a text description of an image. They provide a more detailed and comprehensive description of an image. While alt text is typically brief and focused on conveying the essential information of an image, image descriptions can include additional details such as colors, setting description, emotions, and the overall context of the image. Image descriptions can be placed in an image caption, in a text post, or in a text link for extended descriptions. Image descriptions can be visible or accessed by anyone, often by hovering over an image that has an image description applied or as a traditional caption directly under an image.
How long should your alt text or image description be?
It is important to keep your alt text concise and descriptive. Best practice is to keep it under 125 characters. Never start your alt text with “image of, chart of, graph of, etc.”. Those details will be automatically rendered by the screen reader.
If your image requires more description than it is important to provide a brief but informative alt text and add an image description as a caption, in the surrounding content, or as a text link. If possible keep it under 280 characters, but that is not a hard stopping point. If the image requires more description it is more important to provide it than not.
What details should be included in your alt text and image descriptions?
It deserves repeating, alt text should be clear and CONCISE and image descriptions provide more detail, but length should still be considered. You are not telling a story here; you are providing the most valuable information on how it supports the other content around it. No garbage. Extra unnecessary details only clutter up the experience for those using assistive technology.
Consider including the following details but know they are not ALL always required.
The who, when, and where of the photo
In most cases, just using the person’s name, and not giving a physical description, is sufficient. If the person’s name is unknown than consider describing their ethnicity, gender, age range, and a brief physical description.
Was the photo taken in a library full of students studying? Was it in a train station in New York at the end of a busy workday? Maybe at a sidewalk café on a rainy day? Consider how the setting can provide context to the other content on your webpage.
Key elements relevant to understanding the image context
This could include a link to data or a transcript for charts, graphs, etc. Links should only be put in an image description or caption, never in alt text.
Visual elements such as colors, textures, and patterns
‘A man in a brown raggedy coat outside the….,’ Would be a simple way to incorporate color and texture into alt text.
Actions or movements occurring in the image
Describing the motion in an image can help a screen reader user understand urgency, calmness, or other physical emotions being shown in an image. For instance, ‘A caricature of a woman running fast past a crowd outside a department store’ would tell you the woman is in a rush, possibly for a sale.
Describe any emotions or reactions being displayed
With many images you are trying to invoke a feeling or showing you can relate to your customer’s needs. ‘A boy looking sad with teary eyes as his ice cream cone falls on to the ground’ would make me feel sad for him.
Positions, sizes, and distance around elements
This could be describing what is in the foreground or background of the image to offer more detail of the setting.
What NOT to include in your alt text and image descriptions
Do not use excessive punctuation. You might really be excited about your content but putting 20 Exclamation points will simply drive a screen reader user crazy. Why? Because if you put 20 exclamation points the screen reader will say ‘exclamation point’ 20 times.
Skip the emojis. There really is no place for emojis in alt text or an image description, unless they are in the actual image that you are describing.
Avoid giving your personal opinion, such as ‘the cute baby’ or ‘the ugly sweater.’ Sorry, your opinion doesn’t matter here and in fact it could harm what you are trying to convey.
So, what do good alt text and image descriptions look like?
Alt text and image description examples
Let’s take a look at some examples of what good alt text and image descriptions look like with these fictitious companies.
Thompson Pet Groomers
Bad Alt Text - dog
Good Alt Text - A fluffy white dog sitting on grass with fallen leaves around it after a fresh doggy blow-out at Thompson Pet Groomers.
Good Image Description - A fluffy white Samoyed dog named Charlie after getting a doggy blow-out at Thompson Pet Groomers. The friendly look on his face says he is feeling fresh and ready to play in the fallen leaves around him. The blurred autumn background highlights Charlie’s well-groomed appearance, making it the focal point of the image.
Shar Koley - Business Coach
Bad Alt Text - Woman in a meeting
Good Alt Text - Shar Koley, an African American businesswoman, owns Koley Consulting, a business coaching firm in Boston, MA. She is conducting a meeting with new clients in her modern office space.
Good Image Description - Shar Koley, owner of Koley Consulting in Boston, MA, is dressed in a black blazer and white shirt for a business meeting with new clients. Her office space is modern and has natural lighting and greenery in the background. She is leading a meeting at a wooden table with several gentlemen in suits. There are several documents and coffee cups on the table. Shar’s glowing smile signifies the positive results she will help her clients reach.
Larson Realty
Bad Alt Text - dark house
Good Alt Text - New build for sale by Larson Realty. Modern two-story home with light grey siding and a dark roof.
Good Image Description - A modern two-story home recently listed by Larson Realty. This new build features light grey siding, a peaked dark roof over the garage and two stacked peaks over the main part of the house. A concrete driveway leads to the large garage on the left and several windows with white trim adorn the main home on the right. The house is set against a blue sky with a few clouds.
Serenity - Online Yoga Classes
Bad Alt Text - yoga
Good Alt Text - Your Serenity yoga instructor, Jasmine, demonstrating a Childs pose on her favorite pink yoga mat.
Good Image Description - Jasmine Rose, your Serenity yoga instructor, likes to end each class with a relaxing Childs pose, as shown here. Her studio has white walls and very light wood floors, which make her bright pink yoga mat pop. In her white tank top, black pants and her dark hair tied back, she is stretching her arms out in front of her, elongating her body between her bent knees on the floor. This photo is viewed from above focusing on her upper body and head.
Sage Wedding Photography
Bad Alt Text - couple at the lake
Good Alt Text - A couple embracing in a natural setting by a lake, the man is wearing a white suit, and the woman is in a non-traditional lavender wedding dress. Image captured by Sage Wedding Photography.
Good Image Description - This romantic scene of a couple standing on a rocky area near a body of water was captured by Sage Wedding Photography. The bride is wearing a long flowing lavender wedding gown, and the groom is in a white suit. The bride is holding a bouquet of flowers between them as they embrace. The background features a bright blue sky with clouds and lush greenery, along the water’s edge.
For both alt text and image descriptions avoid being redundant. You should not be repeating the nearby text verbatim within these elements. If you find yourself doing that then it is likely that you don’t need that image on the page. However, if you EVER have an image that has text on it (often times memes and infographics) every single word on that image MUST be described exactly within the alt text.
Do you need BOTH alt text and image descriptions?
In most cases just having a well written alt text will do.
However, if you are adding an image description you also need alt text.
In our examples above, you could put just the ‘good alt text” or both the ‘good alt text” and “good image description.” The alt text is perfectly suitable but because image descriptions have more detail you can make a more personable experience for screen reader users.
Do all images require alt text or an image description?
Nope.
Ask yourself three things when considering the need for alt text or image descriptions:
1: Is the image purely decorative?
The WCAG (Web Content Accessibility Guidelines) says that if content serves "only an aesthetic purpose, providing no information, and having no functionality," than it should be deemed decorative. The most common examples of this would be a background image or section dividers. These items are adding to the appearance but don’t provide any value. Adding alt text to these types of elements is not a good practice and can actually cause a poor experience for screen reader users.
Tip: Elements like dividers and background images should technically be added within your CSS file to ensure they do not interfere with assistive technology. If you are using a drag and drop website builder it is important to verify with them how those elements are coded as you generally have no control over that on those types of platforms.
2: Is the image described in surrounding content?
Assistive technology, such as text to speech software, only interacts with digital text. This does NOT include images that have text on them, like infographics and memes. Thus, when you are considering what to include for alt text you need to refer to all of the content around that image.
For example, let’s go back to our pet grooming business. You created an infographic promoting a seasonal sale of 20% off all dog grooming services, and you put that infographic on your home page. Is that 20% off sale referenced in a nearby paragraph? Or would people only know about it by looking at the image?
If your website visitor can only obtain that information by looking at the image, then you need to put the text in that image verbatim in your alt text.
3: Does the content make sense without the image?
Open a page on your website or pull up one of your digital products. Now, take a minute to go through it and simply cover up each image with your hand or a piece of paper as you read the surrounding text. Does the content on the page still make sense? Is there anything missing? Is it still clear what to do next?
If you can truly say the content clearly tells a visitor what the page is about, what to do, what they are buying, how you want them to feel, without any of the images, then those images are purely decorative and do not require alt text or an image description.
If you have determined that an image does not need alt text or an image description than you need to ensure it is properly coded so screen readers will ignore it. Depending on your website platform the process will be different. In some platforms you simply leave the alt text field blank, in others you need to mark it with empty quotation marks (“”), and in others you need to mark it with ‘null.’ You will need to check with your website provider to find out what process they use specifically for alt text. Image descriptions or captions are always optional so just don’t use them if it isn’t necessary.
AI and alt text
The question everyone wants answered…….
Can I use AI to write my alt text?
EEK, well………it can help but isn’t quite there yet.
As we all know AI is improving every day and I do believe one day there will be a tool that can write amazing alt text and image descriptions. For now, don’t be lazy, be careful.
GPT Plus does a fairly good job on a regular basis but it is not perfect. Do not ever 100% trust the feedback given to describe images. Look at the image yourself or get someone else to help you to verify a suggested description is accurate and as always do not copy the text outright, rewrite it using your own brand language.
Where should you add alt text and image descriptions?
Now that we understand about how to write alt text and image descriptions, let’s talk about what elements you should add them to. Think of any visual element within your content. Images on your website, right? Yay we all get one point!🎉 Where else are you posting images? Social media, blog posts, how about your product images, and e-mail campaigns. And let’s not forget about charts, graphs, and other visual elements you might add to a PowerPoint, e-book, course workbook, printables, etc. Any digital content with visual elements needs to be considered.
Time to take action!
It’s time to put these lessons about alt text and image descriptions into action. I challenge you to audit a page or two of your website each week to ensure you have optimized every image for accessibility. Remember to consider if an image is purely decorative or if it provides meaningful content, be concise with alt text and go more in depth with image descriptions or captions and infuse your keywords for bonus SEO points.
Optimizing your images with accessibility in mind is today’s task for building an inclusive brand.
