If someone went on your website or profile with their eyes closed, would they still be able to find their way around? As more and more people develop vision impairments, they turn to assistive technology in order to access content- read more about this in my World Sight Day 2017 post here. By adding alt text and image descriptions, barriers are lifted and more people can access your content. Read on to learn more about how to create alt text and image descriptions.
What is alt text?
Alt text tells people what is in an image, such as text or basic essential details. If an image fails to load, alt text will display in its place. Search engines also index alt text information and consider it a factor when determining search engine ratings.
What is an image description?
An image description gives more details than alt text and allows someone to learn more about what is in an image that goes beyond alt text. Alt text gives the user the most important information while image descriptions provide further detail. For example, alt text tells someone that there's a puddle on the floor, and image description tells someone that the puddle on the floor is in the middle of the floor and it's orange juice.
How it helps people with vision impairments
People with vision impairments such as low vision and blindness may use screen readers in order to access the internet, or just have trouble distinguishing images. Screen readers will read the alt text out loud, as well as image descriptions, depending on what settings the user has enabled. Alt text and image descriptions can provide essential information such as text, links, and image details.
Length of text
A picture may be worth a thousand words, but there’s no reason to write them all out and leave the user waiting for the descriptions to end. It is strongly recommended that alt text be 125 characters or less to ensure compatibility for popular screen readers. Image descriptions can be longer, but I recommend keeping them the length of a tweet, or about 280 characters. Speaking of Twitter, read my post on low vision Twitter accounts to follow here, and follow me on Twitter @veron4ica here.
Write out text in image
If an image has text in it, make sure to write out the image text verbatim as alt text. Use proper spelling, capitalization, spacing, and grammar too- if someone is pinning the image to Pinterest, the alt text is what will display as the image description. Alt text is also useful for images with decorative text that may be difficult to see, like a signature or logo.
Features of image to describe
When composing image descriptions, it may seem difficult to decide what to include. Here are features that can be included in image descriptions- write about these when applicable:
- Placement of objects in image
- Image style (painting, graph)
- Names of people
- Clothes (if they are an important detail)
- Placement of text
- Emotions, such as smiling
What not to describe
Likewise, there are some things that should be left out of image descriptions. These include:
- Descriptions of colors- no need to describe what red looks like
- Obvious details such as someone having two eyes, a nose, and a mouth
- Details that are not the focus of the picture
- Overly poetic or detailed descriptions
- Multiple punctuation marks
I talk about some of these details in my post on texting etiquette and low vision here.
A note on automatic alt text
Automatic alt text is being integrated into different websites. While this is an awesome feature, it isn’t always the most accurate. For example, automatic alt text once interpreted a picture of my brother standing outside as being a picture of a car. It never hurts to double check alt text and make sure that both the computer and humans are in agreement as to what is in the picture.
Using null alt text
There are times where using alt text or image descriptions is pointless. Decorative images that have nothing to do with the website content, such as shapes or patterns, do not need alt text or image descriptions, and neither do blank images. I still recommend typing “null” as alt text for decorative images as opposed to leaving it blank.
Where to use it
Alt text can and should be used in a variety of settings. Bloggers and webmasters can add alt text to images on their websites. Twitter users can add alt text by enabling these settings here. And of course, alt text should be added when creating content Microsoft Office- read more about adding alt text in Microsoft Word here, adding alt text in PowerPoint presentations here, and creating screen reader-friendly presentations in Microsoft Sway here.
With these tips, users can create alt text and image descriptions that help people with vision impairments and make their content more inclusive and accessible. To learn more about creating high-resolution images, read my post on high-resolution images here.