Using alt text effectively

In our digital world, it is easy for people with a visual impairment to miss critical information or have a frustrating and negative experience.

Imagine, for example, that a prominent keynote speaker sends out their presentation after a conference. The presentation contains infographics to illustrate a key point. Without descriptions of the infographics, anyone with a visual impairment cannot understand the infographic and misses out on key information.

Alternative text (alt text) is descriptive text which conveys the meaning and context of a visual item in a digital setting, such as on an app or web page. When screen readers such as JAWS, Microsoft Narrator, and NVDA reach digital content with alt text, they will read the alt text aloud.

Well-written, descriptive alt text dramatically reduces confusion and improves the user experience.

Images and pictures

Make sure to convey the content and the purpose of an image in a concise manner. The alt text shouldn’t be longer than a sentence or two — most of the time a few thoughtfully selected words will do.

Consider what is important about an image. For example, important context might be the setting, the emotions on people’s faces, the colours, or the relative sizes.

Do not repeat the surrounding textual content as alt text or use phrases referring to images, such as, “a graphic of” or “an image of.”

Diagrams, flow charts, and tables

When dealing with objects that give detailed information, such as an infographic, use alt text to provide the information conveyed in the object. Describing a chart as ‘A bar chart showing sales over time,’ for example, would not be useful to a visually impaired person.

Try to convey the overall picture of what’s going on; for example, ‘A bar chart showing sales over time. In July, sales for brand A surpassed sales for brand B and kept increasing throughout the year.’ Alt text should also clearly describe the beginning point, progress, and conclusion of flow charts.

it is always good practice to write a clear, descriptive, and concise alt text for a table.

Videos

Videos that don’t explain their content require alt text to describe the visual experience, even if the user hears music, background sounds, and speech.  Alt text should describe the content and purpose of the video.

Ideally, a video should contain a second audio track (Audio Description) with a description of the video elements that are purely visual and not accessible to people with a visual impairment.

Decorative visual objects

Decorative objects add visual interest but aren’t informative (for example, stylistic borders). People using screen readers will hear these are decorative so they know they aren’t missing any important information.

When writing alt text, you should consider: will any of the content’s meaning be lost if the image can’t be viewed and is the image purely decorative?

Decorative images with alt text can make the content ‘noisy’ – this is a term used by assistive technology users to describe alt text on images that don’t need to be described and add no worthwhile information. This includes elements such as borders, line breaks and brand graphics. Keeping alt text concise is a skill, and honing in on that skill to make the most of your alt text will ensure that many accessibility needs are met.

How to write alt text

Writing alt text is all about context. Being aware of how the image is presented and the context in which it sits will give any assistive technology user a better experience. If you’re

writing about an image of a painting, you might want to consider if the style of painting is important, does knowing the painter’s name add value? It’s up to you to decide what information is essential.

Its widely agreed in most best practice guides that good alt text should be no longer than 125 characters even though there is often between 100 to 250 characters available.

Here are a few things to keep in mind when writing alt text:

• Alt text should be specific and not overly descriptive
• Good descriptions are concise, but describe what’s in your images accurately enough to understand their context – imagine you are describing a picture in a post limited to just 280 characters
• Avoid repetition
• Never start your alt text with ‘image of’ or picture of as this will be obvious to the user
• Include any essential text or data that’s part of the visual
• Images that already have a caption describing the image, may not need additional alt text
• Screen readers will pause and stop when you tell them to but, depending on user settings, might not annunciate exclamation or question marks.

Remember

Alt text is used by search engines, so using alt text can help grow your brand’s visibility massively online.

Not adding Alt Text could mean you missing out on up-to 20% of traffic to your website.

Alt text on social media

• X supports alt text up to 1,000 characters, though alt text cannot be added or edited after an image or gif is posted
• Instagram and Facebook supports alt text up to 100 characters, and alt text can be added or edited after a picture is posted
• Tumblr supports alt text up to 200 characters, and alt text cannot be added or edited after a picture or gif is posted
• Pinterest supports alt text up to 500 characters, and alt text can be added to static/image or video pins after they are posted

Hashtags

Hashtags are an essential part of social media. If you write a hashtag all in lowercase such as: #showcasinglondon – a screen reader will struggle to identify the individual words. For this hashtag to be read aloud accurately, we need to use CamelCase, so this hashtag now becomes #ShowCasingLondon. CamelCase is a way of writing without spaces or punctuation, but indicating a new word by starting it with a capital letter

Even ‘bad’ alt text is better than none

There are no set rules for writing alt text, and adding ‘bad’ alt text is still better than adding none at all. If alt text is missing from images and other visuals such as graphs, charts and infographics, on websites and in any files you share digitally, a significant portion  of your potential audience could be unable to  access the information you’re trying to convey.

The Royal National Institute of Blind People (RNIB), suggests that two million people in the UK live with significant sight loss, and many of these will use assistive technologies that rely on alt text.

Not adding Alt Text could mean you missing out on up to 20% of them accessing your information.