All About Alt Text, Font and Image Descriptions

A key element of accessibility in design is legibility and color contrast. Light weight fonts which refers to the width of the stroke within a character, are notoriously not compliant with color contrast requirements.

Often, these fonts are not legible by design due to their thin nature. Light weight fonts will include the word “light” in the name. For example, Open Sans Light or Montserrat Light. 

Bolded or Large Lettering

If you think that making the light weight font bold or larger will fix the issue, think again. This creates a new issue of overlapping the letters or making them disappear when users adjust their view settings.

Remember, individuals can magnify, increase or decrease font size. So when you make those adjustments on the back end, make sure that when users adjust these text spacing the text is still readable, visible, and does not overlap or get cut off. 

Text in Images

When you add text to an image, like on social media, it creates an access barrier. The text can become blurry or pixelated when it is enlarged rendering it unreadable. You must include the image text in your alt text so that screen readers can read it.

Also, include the text within the body of your post. Technology doesn’t always work right, so adding the text into your posts makes it accessible. Not just that, but remember that image descriptions are not just for those with visual differences. Text outside of the image supports cognitive disabilities as well. 

How to Write an Alt Text & Image Descriptions 

Yes, there is a difference between alt text and image descriptions. These two things share a similar purpose and complement each other. 

It is like this: Alt text provides a brief explanation of the image, but image descriptions expand the information to provide a better user experience. 

Alt Text 

People either put too little or too much alt text. To clear up the confusion, here is what you need top do: 

• Keep alt text brief and focused.
• Alt text needs to convey the same message as the image.
• Write alt text that explains the important content or purpose of the image, not just its appearance.
• Don’t include unnecessary details or repeat information already found in the text.
• Alt text should be written in the same language as the main content.

Image Descriptions 

People either leave them out completely or copy/paste the alt text which is repetitive. For you image descriptions you want to: 

• Add background details that support and expand on the nearby content.
• Use vivid, descriptive wording to make the story or message more engaging.
• Make sure your description offers new insights and doesn’t simply repeat what’s already been said in the main text.

If you find this helpful consider subscribing to my blog! If you are interesting in getting free digital goods each month, consider signing up for my monthly newsletter! 

For the month of August, I am giving away an Alt Text/Image Description Guide to make it easier! Sign up for my 1x newsletter by August 15th to get yours!