Alt-text
Synonyms: Alternative Text, Alt Attributes, Alt Descriptions
Alt-text is a text incarnation of the images on web pages. We need our images to be described in words. For engines, for people who want their page not to show images, to save data, for instance, and for people who have little or have no vision. So they are exceedingly important, and that is why these image descriptions must be clear, informative, and make sense.
Why We Need It
When we run our web page, we must play by the rules. And one of them is alt descriptions or alt-text. We describe our images by words. These text alternatives are needed for search engines and users.
- Search engines
Clear image descriptions will help engines to crawl the pages of your website and find needed information. The easier and the faster the process for engines, the closer to the top of rankings for you. - For users to save data
When the image is placed on the page, it has the visual embodiment and its text alternative. So, if somehow the image can’t be loaded, we will see the text that describes it. The visual content has to have its non-visual alternative to build the page right. We can turn images off if we want, but its text alternative will inform us about images' existence. - For users with disabilities
One of the main reasons for alt-texts is to give access to web content to people who can’t see or can’t see clearly. So assistive devices that they use can also read visual content and transfer it to the user.
Tips & Tricks
Don’t use the word ‘image’ in the description
Because you are already in that image field. So it is obvious. Like when you name your dog Betsy for instance, you don’t name her Betsy dog. Just Betsy.
So your description, or your alt-text, of a dog image, for instance, will be ‘Black dog’, but not ‘The image of black dog’.
Be clear, specific, and straightforward
Describe the image directly, if you see a tree decorated with blue lights, just write “Tree decorated with blue lights”. Don’t write “Tree” or “Tree decorated’ or “Blue lights and a tree”, etc.
Include keywords
But don’t lose your head trying to stuff your alt-text with all the possible keyword combinations. Include a few main keywords wisely.
Keep it short
Good alt-text is no more than 17-19 words.
Put a dot at the end of alt-text
When we talk about accessible web design, we want to mention this. Assistive devices will make a pause at the end of the alt-text, so the user can more easily understand the content.
Text labels don’t need alt-text
Because they already include text in their visuals. So don’t repeat. For instance, Twitter text visuals don’t need it.
Don’t place an alt-text for images in links
What is important for a user, in this case, is the link text. Don’t add alt-text for its image, it will just overload the user with information.
Don’t place an alt-text for additional images
You have important pictures and images that improve and complement your text content, but you also have some additional images like dividers or brand icons. Just don’t describe them with text.
