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

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.

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.

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.

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 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. 

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

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.

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

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

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.

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.

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. 

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.