SEO is crucial if you want your digital content to be easily found online. Whereas, accessibility allows everyone, regardless of their limitations, to enjoy what you’ve created. There’s no doubt about that! When it comes to additional elements present on your website, like images, you can get both jobs done with alt texts. So, if you ask yourself questions like “do videos need alt text?” or if alt text generators can assist you with this task – you are in the right place! And if the concept of alt text is foreign to you – don’t worry, we’ve also got you covered!
What is alt text?
An alt text, also known as “alt attribute”, “alt description”, or “alt tag”, describes the appearance or function of an image on a web page. Alternative text is usually implemented in HTML code or in a dedicated field provided by the content management system (like WordPress CMS). Here is an example of alt text for HTML code:
<img src="Lewandowski.jpg" alt="Famous polish soccer player Robert Lewandowski at Camp Nou">
Ok, but what about videos? Generally, alt text is used to describe images. However, to offer the best video accessibility, videos should have standard subtitles (that translate the audio dialogue) and captioning (which, besides dialogue, describes all sounds audible in the video like, for instance, car horns), as well as additional ones that verbally narrate the visual aspects of the video for those visually impaired.
Why is alt text important?
The first reason why you should not forget about alt texts is SEO – search engines need them to rank visual content properly in search results. Although giants like Google are becoming increasingly better at “reading” graphics thanks to the fast development of AI technology, they don’t always generate correct interpretations! Alt text helps bots better understand the context of the image and even recognize keywords when they are used.
Secondly, alt texts are not only important for SEO but also for accessibility reasons. People with vision problems often use screen readers that read the text on a given website out loud for them. When images contain alt texts, the recipient can understand what the graphics show. However, there are other reasons! Alt text can also be displayed when the picture won’t load. In such cases, a user will see an icon of a “broken image” with your alt text next to it.
Alt text best practices
- Describe only pictures that represent something relevant – avoid doing it when the image serves solely decorative purposes;
- The length of the alt text should not exceed 125 characters, as most screen readers stop reading after that sum;
- Don’t forget to describe charts, infographics, and anything that may be valuable for the user’s understanding;
- Avoid using phrases like “picture of” or “image of” at the beginning of your alt text because screen readers will read it twice. For example, in the case of “image of black dress”, screen reader users will hear “image of image of black dress”;
- Remember about punctuation and uppercase letter usage at the beginning of the sentences. What’s more, often image file titles include a hyphen like “John-Williams.jpg”, but it’s not a good idea to use them instead of spaces between words in the alt text because the word “hyphen” is also going to be read by a screen reader;
- It’s wise to match the style of your text with the created alt tag, this way, the overall reception of the page will be more coherent;
- Try to incorporate some keywords in your alt texts, it may help the graphic rank higher in image search engine results;
- When in a hurry, you might try to use alt text generators. For instance, you can utilize Ahrefs Free AI Image Alt Text Generator. After uploading a file and choosing a style of your desired alt text, you will get up to 5 variants;
- You can also consider adding alt tags to social media posts on platforms like Instagram, Facebook, or LinkedIn, to make them more accessible to your followers.
How to add alt text to images?
Many content management systems have options for adding and editing alternative text when uploading images. If you want to add alt text in HTML, here are two examples of how to do it correctly:
- in most cases, you should enter your text after the alt attribute, as in the example below:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600"> - a way to describe only decorative photos – instead of the description, you should enter an empty alt:
<img src="decorative-image-title.jpg" alt="">– this way, the user will not read (or hear, when using a screen reader) a strange title like “img1456125”.
When it comes to social media platforms, some of them make it easy to incorporate alt texts into your posts. Facebook has an automatic alt text feature, but you can add or edit it yourself. In the case of LinkedIn, you have to:
- add it after uploading the image, just by clicking “Alt.text”,
- when doing it from your desktop, click “Save” to finish, but when using your mobile device – tap “Done”.
It all comes down to UX
So, now you have all the necessary knowledge about alt texts! Although the idea of adding them to all depicting images on your site might seem tedious at first, it’s totally worth it. After all, the effort will not only make your website more pleasant to use. Correct alt tags also contribute to a better User Experience of your digital content, which will eventually lead to making it easier to be found within the immensities of the internet.
Read also
Google Ads payment – a guide for publishers
Does money make the world go round? Regardless of your stance on this classic inquiry, it's clear that money plays a crucial role in ad monetization. With that in mind, explore important payment details regarding Google’s products: AdSense, AdMob, and Ad Exchange!
Read more
Responsiveness: how can a publisher optimize a website for mobile devices?
Do you wonder how to optimize your website to be seamlessly viewed on different devices? If yes, this article is definitely for you!
Read more