Creating great digital content for your brand matters little if parts of your audience can't experience it in the way it was intended. In the realm of accessibility, alt text takes an especially important role when it comes to communicating your visual content to people with visual or cognitive impairments.

Standing out to your audience is more than just finding the right visual pull; it's also about being able to describe those images to members of your audience who might not be able to see or interpret them.

Of course, anything related to accessibility can also quickly get complex. You have to both comply with guidelines and also write your alt text in a way that is true to your brand and showcases your distinct voice. This guide covers alt text in the context of accessibility in more detail, helping you build a digital experience designed to delight your audience.

What is Online Accessibility?

Let's begin with some context. The concept of accessibility in website design dates back to the 1999 Web Content Accessibility Guidelines, which sought to make the digital experience more accessible for people with disabilities. The guidelines are built on the 1990 Americans with Disabilities Act (ADA), which was designed to improve the lives and experiences of people with disabilities while in public spaces.

Online or web accessibility includes a wide range of topics organized in a few broader categories:

• Visual
• Motor and mobility
• Auditory
• Seizures
• Learning or cognitive

The United Nations estimates that around 15% of the world population, or 1 billion people, fall into one of these categories and live with disability, which might be negatively affected by a non-accessible website. Alt text falls into the visual category, providing an alternative for users who might have trouble seeing a graphic, image, or video or understanding its context.

What is Alt Text?

Put simply, alt text is the written text that appears on a webpage in place of an image, anytime that image doesn't load. But it doesn't just help users when images fail to load; in addition, it also provides a description of the visual for screen readers and helps search engines like Google understand what the image is about.

Where You Can Find Alt Text

Alt text is most commonly found on websites, where every visual on every page, from the homepage to individual product pages or blog posts, should include accompanying descriptive copy. Webflow, for instance, has a simple alt text feature in its website builder tool. But that's not all.

Various social media features also include functionality to add in alt text. For example, Instagram Stories allow brands to add a “captions” sticker for videos or add a caption sticker to any visual using the text sticker. Twitter, Facebook, and LinkedIn all include the option to add alt text to images and captions to video, as well.

How Alt Text Helps Users With Visual and Cognitive Impairments

Good alt text is essential because it helps users with visual and cognitive impairments understand your website just as well as any other user. It opens up the visual to all users, allowing your unique web and brand experience to be just as relevant regardless of whether users have images blocked, cannot perceive images well, or use screen readers to help build that experience.

Keep in mind that your target audience is always nuanced. While 15% of the population have disabilities, that number may be higher if you target an older audience. There are also levels to your audience's impairments; not everyone who is "blind" has lost all sight, and even a fully blind user might still remember certain visual details from before they lost their vision. Each nuanced use will expect your website to function just as well, and will need just as much information as they browse through it.

How Alt Text Interacts With Screen Readers

Many users with disabilities use screen readers, software programs that translate text, icons, imagery, and navigation into speech. At its simplest, alt text serves as the description a screen reader will read once it comes across an image on a website.

Over time, of course, screen readers have become more sophisticated, with tools like AccessiBe acting as AI-assisted tools that can analyze websites and match elements to their intended purpose on a page. These machine learning tools can even add alt text where it's missing--but, in that case, the context and content intended by the brand might be skewed or misinterpreted, making it more difficult to create a unique, engaging, immersive experience.

The Accessibility and SEO Benefits of Alt Text

From an accessibility standpoint, the core benefit of alt text is simple: it allows people with disabilities to understand the context of any visuals or graphics that exist on the page. This additional context can be crucial in providing a more equal experience. It avoids alienating users who might otherwise miss these visuals.

From that perspective, adding alt text to your website is the right thing to do. It expands your audience to all potential users, regardless of their disabilities. The broader context of the images makes this audience segment more likely to enjoy and convert on your website.

The Legal Hazards of Not Prioritizing Alt Text

Having an accessible website is not just the right thing to do, it’s your obligation. Consistent and relevant alt text throughout your website can help your brand avoid any lawsuits or infringement related to ADA compliance.

These suits are not uncommon. According to the Society for Human Resource Management, more than 2,500 federal lawsuits were filed in 2020 specifically related to websites that were not designed as accessible to people with disabilities. The number continues to climb every year as users defend their equal right to an immersive digital experience.

And it's not just small brands suffering from these lawsuits. Domino's Pizza, GNC, Netflix, and eBay have been among the many brands losing in court because of inaccessibility issues on their websites. This is a global, industry-spanning issue that should be prioritized regardless of business size.

Optimizing Alt Text for Search Engines

Finally, the benefits of alt text also extend to SEO. Nearly 38% of Google results now include images, making your website's visuals an important part of organic traffic from search engines.

Search engines like Google can better crawl your site if they know exactly what each image is, helping them gain the context they need to rank it accordingly. Google specifically uses alt text as "information-rich content" that adds to its understanding of the website and individual pages.

That, in turn, also means that alt text doesn't just need to be descriptive, but can also be optimized for SEO through specific keywords. Making this step part of the larger keyword optimization strategy can pay off big-time in the long run.

Basic Guidelines and Best Practices of Image Alt Text

Of course, just knowing that you need alt text is only the beginning. How you write that copy matters just as much in ensuring that it is successful from an accessibility, user experience, and SEO standpoint. These guidelines and best practices can help you get started.

Focus in the Image First

The first step in writing great alt text is understanding the true subject and function of the image. That allows you to come up with a succinct description of it, allowing users who cannot see it (or cannot see it well) to understand it just as much as others browsing the page.

Be as Descriptive as Needed

Get as detailed as possible, as long as those details are important for your users. For example, you can include details like colors, if they are relevant to how your users experience the page. For example, describing an image of a cow as brown may not matter, but if that cow is purple, that's probably a detail worth mentioning.

The context of the image also matters. If it already has a caption visible for all users describing some of its features or details, these details don't need repeated in the alt text as well. Think about it from your users' perspective: what information actually matters to them if the image is not visible?

Transcribe Any Words and Information in the Visual

If the image includes words, those words should appear exactly as written in the alt text. That's even more important for text-based or text-heavy graphics, which need all the info written out as well. For example, infographics tend to include a lot of written information, all of which would be lost for users with disabilities without alt text also writing it out. In fact, that's why we recommend plain text instead of graphics to convey written information in a digital format.

Keep it Short When Possible

As a general best practice, alt text should be at or below 125 characters long. But context is important here, as well. The above-mentioned infographics, for example, may require a higher character count to get all core information across.

Use SEO Keywords Only When Relevant

The potential SEO benefits of alt text are significant, but that shouldn't lead to overkill. Instead, add specific keywords for which the web page is optimized only when relevant to the image in question. Here as in other areas, modern successful SEO requires natural, relevant integration of keywords rather than keyword stuffing.

Avoid Alt Text on Decorative Images

Despite its near-ubiquitous benefits, alt text should not appear on any images or graphics that are purely decorative. If the visual doesn't include important content, is only used for layout purposes, and doesn't have a function like linking, alt text would not add to the experience and should not be added.

Use Directive Alt Text on Visual Links

Finally, alt text is an important but often overlooked component of graphics or images that serve navigational purposes. For example, a “submit” button on a form or a company logo to go back to the homepage should include alt text that tells users what happens when they click on it.

How To Add Alt text to Images, Presentations, and Websites

Different platforms require some different steps to get alt text into the right format and the right space. We'll cover the most common applications and needs below.

How To Add Alt Text to Images in Word

When sharing documents on your website or in a professional setting, adding alt text in the original document is always the best choice. In Microsoft Word, that process is simple:

Right-click or control-click the image or graphic, and click on Edit Alt Text. In the appearing text box, add one to two sentences of text that describe the image or let MS Word generate a description for you. For images that are purely decorative, click the "Mark as Decorative" checkbox.

How To Add Alt Text to Images in PowerPoint

Adding alt text to images and graphics in PowerPoint is similar to MS Word and any other Office applications:

Select the image or graphic, then select Format > Alt Text. Like in MS Word, you can add one to two sentences of alt text, or mark the image as decorative if it doesn't need alt text.

How To Add Alt Text to Images in WordPress

Recognizing the importance of alt text for accessibility, WordPress has made adding it simple for any website owner running on its CMS:

When uploading images to the platform, you can add alt text directly in its metadata in addition to the image title and caption. This also ensures that the alt text doesn't duplicate, but adds to the image caption for users and screen readers who can see both. For existing images and graphics in the CMS, simply clicking on the image opens a block where, under "Image Settings," you can add the alt text.

How To Add Alt Text to Images in Squarespace

Like WordPress, the website builder Squarespace has looked to make the process of adding alt text as straightforward as possible to ensure accessibility for all websites built on it:

For any image blocks, you can add up to 250 characters of alt text. Go to the image block editor, click the content tab, navigate to image alt text, and click save after you've entered it. For images in gallery blocks, select the gallery block and click Edit. Find the image to edit, hover over it, and click the gear button to change its settings, where you can add alt text below the image title.

How to Add Alt Text to Images in Webflow

Webflow can make inputting your SEO content, and optimizing for alt text, speedy and easy. We use it because of its ease of use and comprehensive features, including these and many other optimizations. Here's how to do it in the platform:

For individual images, navigate to the Assets panel and hover over the image that needs alt text. Click the gear icon to open the image's asset details, then type your alt text into the blank field and close the modal. If the image already has alt text on it, you can review it in this file as well.

For images in your CMS collection open the CMS panel and hover over your collection (like your blog posts) before clicking the gear icon. Click "Add new field" and choose plain text, then give it a label like "Alt text for blog image" and click on "save field" and "save collection" to keep it in place.

Steel Croissant uses Webflow not only due to its ease of use, but also because it helps websites actively promote both SEO and accessibility without any need for coding. If you want to take advantage of those same benefits, we can help you move from WordPress or another website builder to Webflow.

A Lesson in Accessibility

Accessibility has become one of the most important considerations for any brand looking to build their website for all users, and without any risk or issues from either a user experience or legal perspective. Building a strategy to ensure accessibility is a non-issue for your online presence, especially when it comes to accessible images and graphics throughout the site, is an essential part of reaching that goal.

It's not just about general accessibility, of course. Ideally, alt text is not only designed to reach that goal, but can also be built in a way that represents your unique brand, voice, and values. Getting there requires both an in-depth understanding of the concept and an emphasis on branding that we can help with. Contact us to get started!