A Brief Introduction to Alt Text Based on Usability Tests at VIP World Services
Alternative text (alt text) or in other words "alt attribute", “alt description", is the first guideline of WCAG principles, used within an HTML code to describe the appearance and function of non-text content.
Why is it necessary?
Visually Impaired People (VIP) users, who use assistive technology are able to read an alt attribute that conveys description which helps visually impaired people to imagine what is on the image.
How to create a good alternative text?
- The alt text should not be too short and too long.
- Image should contain specific details but not a lot.
While writing the alt text description, people have the tendency to create too long alternative texts in order to explain the details present in the image. Unfortunately, because of this, the VIP user hears the description in shorter divided parts, misleading them into thinking that there is more than one picture.Why does this happen? Because, the most popular screen readers divide alt text above 125 characters. Therefore, it is recommended to keep this limit.
Too long and detailed alt text descriptions take more time off the VIP users. (let's think about visually impaired people who have to listen to all of elements on the pages, it is really a long process)
If the images don't provide essential information, or duplicate the text content, please change them to decorative or empty alternatives. Assistive technology will skip it and your user will save some time.
Another common poor practice is using "picture";"image" inside the alt text. This action is not favoured because it takes few characters from the 125 characters limit and doesn't provide any value to alternative description.
What has changed on VIP World's website after usability tests?
1. Photos of the authors on the blog and photos of inspiring VIPs were changed to decorative ones because the screen reader duplicated information. Previously, alternative text for pictures contained a name of a person which is displaying like a text content as well.
What has changed for our users due to this action?
VIP can navigate the page faster and avoid unnecessary content.
2. We had to shorten few alternative texts because it turned out that all of the details weren't important for our users and they thought that our page contained more pictures than it really did, as the screen reader divided one picture into three.
What has changed for our users due to this action?
They are no longer misled owing to the number of pictures and save time.
Example of a shortened alternative text:
First version of the alternative description:
The image showcases the vision of the company, VIP World, where we treat every Visually Impaired Person as a VIP. An eye is in the centre with the pupil representing a world where you can access technology to make life easy, safe and fun
Improved version of the alternative description:
The eye's pupil representing a world where you can access technology to make life easier
Be a part of
