You're Using Alt-Text Wrong, You Just Can't See It

What Is Alt Text? And Why Does It Matter?

When designing websites, accessibility is often overlooked—especially for those with visual impairments. In the same way we ensure physical spaces are accessible for all, it’s time to make sure the same care is taken for the digital world.

By using clear and descriptive alt text, organizations can ensure that their content is accessible to a wider audience, making it as inclusive as possible.

What is Alt Text?

Alt text, or alternative text, is a brief text used to describe images and other visual elements within a webpage. The purpose of alt text is to enable users with visual impairments to access visual content.

Alt text works through the use of screen reader tools. These tools help users with visual impairments access content on a computer screen by reading text aloud. In addition to this, a screen reader can enable visually impaired users to more easily navigate and interact with web pages.

Why Alt Text Is Important

Globally, around 253 million people have severe visual impairments, ranging from partial sight to complete blindness. To put this into perspective, that’s roughly the population of the UK, Ireland, France, Belgium, the Netherlands and Germany combined, or over two-thirds of the population of the United States.

Failing to provide suitable alt text effectively excludes this entire population group from accessing your website. However, by adding descriptive alt text to images, content becomes more accessible to a wider audience.

How Screen Readers Work

Two of the most commonly used screen readers are JAWS and Apple VoiceOver. Apple VoiceOver is pre-installed on all Mac products and can instantly be activated by pressing Command + F5. 

These tools, and many others like them, work by describing to the user what is being shown on the computer screen. 

Screen reader tools can: 

• Read on-screen text

• Describe images using alt text

• Navigate through headings, links and lists

• Announce buttons and input fields

• Announce notifications and alerts

• Enable keyboard navigation for users who can’t use a mouse

The Problem with Modern Websites

The use of screen readers was much simpler when websites were predominantly text-based. However, in the modern day, web design has evolved from simple, text-based interfaces to highly visual designs. While these designs are visually appealing, they can hinder accessibility if not properly optimized. 

How to Write Alt Text for Images

When writing alt text, there are several important factors to consider for it to be effective.

Be Descriptive but Concise

Effective alt text will describe the image as clearly and briefly as possible — usually around 1-2 sentences. Focus on what is important in the image, avoiding any unnecessary details.

Avoid Using “Image of…”

A screen reader will announce that the content is an image, so you do not need to write “Image of” or “Picture of”.

Provide Context

Ensure that your alt text provides context to the reader, particularly for functional images such as buttons. 

Include Relevant Text From the Image

Images that contain important written content, such as infographics, should include key information in the alt text.

Without the added context of effective alt text, it’s easy for an image to feel more like it’s gatekeeping content from some users. Instead, we should always use imagery to make content more accessible, helpful, and valuable for users.

However, if your alt text needs to be long, it’s worth asking if the image is really adding more value than the content just being in a text-based format. Again, refer back to the point about alt text being of the most value when it’s concise.

Don’t Duplicate Text

Avoid repeating information that is already mentioned nearby, either in the body copy or image caption. Repeated information is unnecessary and will negatively impact the overall user experience.

Final Tips on Writing Content That’s Accessible By Screen Readers

Here are a few tips on how to optimize your content for screen readers and more importantly, visually impaired users.

• Think about users before search engines: Write alt text that benefits the user first and the search engine second. 

• Consider how alt text will be read aloud: Make it short, snappy and natural-sounding.

• Describe rich media: Use descriptive alt text for images and videos, plus transcripts, where possible. 

• Have a logical hierarchy for your content: Make sure your heading structure is logical and easy for the screen reader to navigate. If it is not obvious, the screen reader will struggle. 

Creating Inclusive Web Content Using Alt Text

At its core, the purpose of alt text is to make web content as accessible as possible. Without using suitable alt text, individuals and organizations are creating content that is inaccessible to millions of people worldwide. 

By investing time and effort into adding rich, descriptive alt text to images, content becomes accessible to a significantly wider audience, including the 253 million people with visual impairments. And why wouldn’t you want to be able to reach—and better yet engage—that audience?

This article was originally published on RocketMill's website.