How to Master the Art of Writing Alt Text

Alt text basics

What is alt text?

Alternative text (alt text) is used within HTML code to describe the appearance and function of an image on a page. According to WebAIM’s 2021 Million Report, an annual accessibility analysis of the top 1,000,000 home pages, missing alt text is the second most common cause of website accessibility failures.

Why is alt text needed?

As part of good web design, alt text describes images for visitors that can’t see them. This includes people with visual impairments using screen readers as well as users on image-blocking browsers. Alt text ensures your content is presented the way you intended it to be and improves the user experience for everyone regardless of whether or not they have a disability.

Alt text can also boost your image Search Engine Optimization (SEO), especially if you control the narrative. Without proper alt text, you’re asking search engines to make the call on what you’re showing, and search crawlers can easily miss the mark. Alt text can help you show up in the search results you want to be in.

How do I ensure my images have alt text?

If you’re publishing content on your website or on social media, it’s important to ensure your images have alt text. Popular content management system (CMS) platforms like WordPress, Magento and Shopify provide a field when you upload images where you can add alt text. Social media platforms like Instagram, Facebook, LinkedIn and Twitter also allow you to add alt text to improve the accessibility of your content.

You can ensure that your images have alt text by “checking these fields or by inspecting the image in your browser and checking to see if there’s an alt=“example alt text” attribute within the < image > tag. If the image file doesn’t load or can’t be seen, users will see or hear the screen reader read aloud the alt text in its place. If you’re using a desktop computer, try right clicking and inspecting the images in the post to try it out.

The difference between alt text and extended descriptions

Alt text is relatively brief (typically under 125 characters), and conveys obvious and general visual information about the image it’s describing. Alt text needs to be included on every image unless that image serves a decorative purpose only. Alt text should be included on images of logos, products, people, places, objects and scenery, to name a few.

Extended descriptions are used in addition to alt text when the image being described contains more detailed visual information requiring more than two sentences. These descriptions have no character limit, and are typically displayed below the image as a caption. Extended descriptions are necessary for images of data (pie charts, graphs, etc.), infographics, artwork, and images containing large amounts of embedded text.

6 tips for writing good alt text

Before we get to the tips, here are a few examples of how alt text could be approached for the image above.

Alt text example #1: A woman playing a keyboard
While there’s nothing wrong with this example, it’s rather lackluster and boring compared to the visual experience of the image.\

Alt text example #2: A woman smiling while playing an electronic keyboard and sitting on the couch.
This example expands on the first one by adding a few beneficial details that provide users with more context and a higher quality user experience.

Alt text example #3: A woman with curly brown hair, a jean jacket and long fingernails painted metallic green is sitting cross legged on a gray linen couch while playing a black and white electronic keyboard and smiling.
While it might not always be necessary to go into this much detail, it allows your imagination to recreate the image more easily than in the previous two examples. For a clothing or lifestyle brand, you can see how this example would provide the best user experience out of the three and showcases the best use of keywords for SEO.

Tip #1: Write for the context

Depending on the context you’re writing alt text for, more or less detail may be appropriate. For example, the alt text for a scenic painting image used on a website for a doctor’s office would be different and much shorter than it would be for the same image on an art gallery website.

Tip #2: Don’t overthink it!

Describe the image like you would to someone who can’t see it. Alt text should provide context but doesn’t need to be overly descriptive or include unnecessary detail.

Tip #3: Skip the decorations

You don’t need to provide alt text for non-essential images that serve a purely decorative purpose, such as background images or illustrative accents. This will clutter the user experience for people using screen readers. If you’re unsure if your image needs alt text or not, check out the Alt Decision Tree by w3​.org. If you’re developing a website, keep in mind that you still need to include an empty alt=“” attribute in the < image > tag – otherwise, screen readers will read the file name instead of skipping over the image.

Tip #4: Be informative and clear

Use simple, precise language that begins with general information then gets more specific.
You can include keywords if they’re relevant, but avoid using the alt text field as a place to include all of your keywords – this will negatively impact user experience and isn’t good for SEO. Make sure you write out symbols and acronyms and use proper spelling, grammar and punctuation.

Tip #5: Omit the obvious

Don’t use phrases like “Image of” or “Photo of”. Screen readers recognize and announce the type of media being read to the user, eliminating the need for the alt text to do so. When you’re writing alt text for your logo, you can also omit the word “logo” in favor of just writing the business name. If it provides relevant context for non-sighted users, specify the type of image or medium used (i.e. illustration, sketch, or headshot).

Tip #6: Stay neutral

Act like a reporter and stick to the facts – don’t interpret thoughts and feelings. Alt text isn’t the place for personal commentary or interpretation.

Takeaways

Alt text isn’t a chore – it’s relied on by 2.2 billion + people worldwide with visual disabilities. Writing alt text should have a formal process along with writing the rest of your content. Your alt text can have language that pushes the same goals and context as your website like selling products or referencing inclusivity. Most platforms don’t require content creators to include alt text by default, and as a result it has long been misunderstood or left out of the publishing process. Incorporating the writing of alt text into your routine is one simple way to make the web a more accessible place.

Next steps

Are your website and marketing strategy as accessible as they could be? At iBec, we don’t just believe the web should be accessed and understood by all, we know it as fact. Exclusion can happen when we limit ourselves to our personal perspectives, so by designing with people with disabilities in mind, we foster a stronger connection between the brand and consumer, and create more meaningful experiences for everyone. Get in touch with us for a comprehensive WCAG 2.1 audit and roadmap to accessibility for your business. Ready to do more of your own research? Check out more blog articles on accessibility.

Interested in receiving monthly iBec Creative updates right in your inbox?

Sign up below and we’ll send you updates once a month. Our newsletters are known to contain: exclusive pictures of the iBec crew having fun, TikTok trends to get your creativity flowing, information on B Corp Certification, and so much more! There’s no limit to what you’ll find in an iBec newsletter.