The Benefits of Alt-text
“What the heck is alt-text?”
What is it and why is it important? I’m sure you have heard of it. Alt-text is used to make your content user-friendly for consumers who use screen readers. A screen reader is an assistive technology, primarily used by people with vision impairments. It converts text, buttons, images and other screen elements into speech or braille. You can have screen readers on desktop and mobile devices.
WCAG is the Web Content Accessibility Guidelines for businesses to follow. This lengthy document provides marketers and companies with rules in order to be accessibility-friendly - whether audio or visually or another type of sensory disability.
In the back-end of your system where you house your content products/services, there would be an entry box that says Alt-text. This stands for Alternative text.
Here are some basic guidelines WCAG gives organisations to create a user-friendly experience to include those with disabilities.
#HotFacts:
Most social media platforms support alt-text through input boxes when you post. Instagram, Twitter, Facebook and LinkedIn all have this functionality.
Alt-text is sometimes described as ‘alt description’ or ‘alt attributes’.
To test your alt-text you can go onto https://pauljadam.com/bookmarklets/ for accessibility testing by downloading the bookmarklet to your browser.
Most screen readers will cut off at the 125 character mark so don’t waste your characters by writing ‘this image is’ or ‘image shows’.
*WCAG at a glance via WCAG.
Quick ways to improve your content to be WCAG compliant:
Keep paragraphs short so the screen reader can read effortlessly in the event that they re-read your content.
Use a lot of headings and subheading with short paragraphs. This will make it easier for those with reading impairments like dyslexia.
Make sure you are coding your heading correctly. This means using the correct h-elements to the HTML specifications. <H1>, <H2> etc
Provide alt-text for images that are descriptive. A screen reader will read the alt-text on the image.
Alt-text in images
All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
– WCAG guideline 1.1.1
Alt-text #HotTip ONE:
When writing alt-text for images you need to differentiate between images that add value to your content (like an image of a product being used to show how it works), to decorative images which are on the site to look pretty but add no value. This is the discernment of each copywriter or content author based on what the purpose of the page or image is.
#HotTip: If there is text on the image add the text in your alt-text.
Alt-text:
[Yellow sign outside with words ‘imagine art here’.]
Alt-text #HotTip TWO:
Context is an important factor in decision-making. It provides additional information that helps a person understand what is being said or shown. Provide the viewer context to what the image is.
#HotTip: Add descriptive, relevant words to help the viewer understand the emotion behind the image (if there is one).
Alt-text:
[Little girl admiring an in-focus quarter cut cupcake contemplating eating the last piece her family made for her using X product.]
Alt-text #HotTip THREE:
Alt-text is should be informative, descriptive and concise. The point of alt-text in images is to provide the same experience for those that use screen readers to those that don’t. This means you will need to write the necessary information that appears at first glance. If the image contains a lot of words then you will need to add that in (see #HotTip ONE above).
#HotTip: Don’t waste characters by adding ‘this is an image of’ or ‘image contains’ or ‘image/photo of’. You can specify the type of image it is like illustration, comic, photography, painting etc but don’t write ‘photo of …’
Alt-text:
[A group of women supporting one woman up a ladder to her success. Illustration.]
One last thing!
Alt-text are set in place to provide those that are vision impaired a tool to browse your site with ease. You may be losing out on a huge sector of your market by alienating those that use screen readers. Content should be for all, not just for some.