One suggestion we often make to improve accessibility is to design graphics with little-to-no text. Images embedded with text are actually pixels that cannot be edited without a graphics application. Additionally, pixels cannot be “read” by screen readers or translated to different languages using assistive technology. While users with near 20/20 vision can read text converted to pixels, users with varying degrees of blindness, cognitive disabilities or speak different languages may not be able to read image-based text.

What about alt text?

“Alt text” or alternative text is a customizable HTML attribute found within your web page’s code. The purpose of alt text is to give text-based context to image content.

Here are a few reasons why adding alt text is a good thing:

1. Alt text serves as a backup when images don’t load properly or are turned off by the user in the case of poor internet connection.
2. Alt text can be read by screen readers and language translator apps allowing the content of the image to be accessible to those with visual differences, cognitive disabilities and those who cannot read the language of your website.
3. Finally, alt text provides meaningful semantic markup which can improve your website’s rank and visibility among search engines such as Google and Bing. Ultimately this may increase organic traffic to your website.

While it is considered one of the most helpful attributes of web accessibility, it is easily one of the most overlooked and subjective to implement. Web Accessibility In Mind (WebAIM) is Ligature’s go-to-resource to learn about how we can ensure our designs are approachable to all.

Here are WebAIM’s tips for writing alt text:

Support the function of the image

If an image is meant to be clicked make sure the alt text supports that function. For example, an arrow image used to indicate the next page might have alt text that reads “Continue to part 2” instead of “Arrow.”

Be concise

People don’t read — they scan. A study conducted in 2008 concludes above average literacy users read up to 28% of a web page’s content but realistically only read 20%. (While that study may seem dated, you might consider that attention spans have only gotten shorter, not longer with the proliferation of apps and smartphones.) That means most people aren’t reading even half of your content.

People scroll and search for keywords, subheadings, and images that support the content they want to read. Shorter, more direct language will help a user find information quicker. A general rule of thumb is no more than 125 characters.

Do not repeat content

In addition to alt text, you can use other HTML attributes, such as captions and titles, to provide image context. All of these HTML attributes can be used simultaneously but is recommended they do not repeat the same information.

Do not write “image/graphic of …”

Assistive technology will often state “image/graphic of …” when prompted by an HTML image tag. Adding this phrase to your alt text is repetitive.

Alt text example

Do you always need alt text? Not necessarily.

Utilizing alt text is completely subjective. For example, if your image has a descriptive caption or title attribute alongside an accompanying story, alt text may not provide information that isn’t already repeated elsewhere. Additionally, if an image is primarily decoration, it is okay to leave the alt text blank.

As you can see, writing alt text is beneficial for a wide variety of users and reasons. While it may not be necessary for all images, be sure to keep your audience in mind and ensure that anyone visiting your site is able to receive the information that you are intending. The more you incorporate these practices into your content management process, the easier and more instinctual it becomes!

Come back to Ligature’s Insights blog to learn more about accessibility in design and on the web. Look forward to tips and small adjustments you can make to improve accessibility across your organization’s marketing efforts.