5 Tips for Writing Accessible  Alt Text

By Laurence Williams |  December 3, 2020

USABILITY

Alternative text - also called alt text, alt attribute, alt description and alt tag - is the invisible description of images in a website’s code that describes the image’s appearance and function.

Alt Text and Accessibility

Alt text is used in a variety of ways. Perhaps most importantly, it’s used to describe images and buttons for screen readers used by the blind and visually impaired.

1. Be Concise

Always get to the point. You don’t have to say “this is a photo of…”; screen readers can understand through the image source tag that it’s an image.

2. Find Descriptive Balance

“A green apple” is okay; “a green, Granny Smith apple” is better; “a green, Granny Smith apple with a left-pointing stalk, a bit of a shine, set against a white backdrop” is overkill.

3. Use Keywords

Alt text helps SEO by making it easier for search engines to understand your images against the content and context of a page. Use your target keyword in the alt text of a relevant image.

4. Don’t  Keyword Stuff

The goal is to improve accessibility for visually impaired users. Stuffing your alt text full of keywords will make for a bad user experience and will, inevitably, be penalized by Google.

5. Don’t Use  Text Images

Screen readers can’t transcribe from a JPG, so make sure that you use CSS to style your headings rather than images. When possible, don’t use an image of text in place of actual text.

Making An Exception

Sometimes text is crucial to an image, like a handwritten letter. In this case, transcribe the letter elsewhere on the web page, and keep the alt-text brief and succinct.