How Can Alt Text Benefit Your Website?
Most people are visual learners and will remember 85% of what they see and only 20% of what they read. The human mind can process images in a fraction of a second, making them a powerful means of communication. Images also eliminate the communication barrier since everyone quickly understands them. Using images on your website allows you to enhance your content, illustrate your story, present a product, and many more. However, uploading images without considering the importance of Alt text can negatively impact your SEO. Search engines cannot understand your image files unless you set an alt tag. Read on to discover how an alt tag can benefit your website.
What is Alt Text?
An alt text, also known as an alt attribute, alt description or alt tag, is a snippet of detailed information describing an image. It is a short HTML attribute of about 100 characters that you assign to an image to describe what the image is about. Alt tags are not always visible to the user. However, they help search engine crawlers to understand the appearance and function of your image. Most web-owners may overlook alt tags, while they are an essential part of the user experience. Besides search engines, visually impaired visitors also rely on alt tags to understand your content. Alt tags also show up in image files that fail to load, providing visitors with a complete picture of your content.
What are the Benefits of Alt Text?
Using alt tags comes with several advantages. Here are some ways alt tags can benefit your website.
Improves Accessibility
We have several visually impaired people who use screen readers to access your content. Screen readers work by converting on-screen content, like images, into audio. Images with no alt tags cause accessibility issues for screen readers since they cannot communicate your image content to the user. As such, they will skip these images or read out long and unhelpful image filenames. Image accessibility is a courtesy to your visually impaired visitors and a way to build customer loyalty and drive more conversion.
Improve Search Engine Ranking
Improving your search engine ranking is probably the most significant benefit of using alt tags. Google has to crawl your page, understand the content, and then add it to its search index. If Google cannot read your images, then they will not contribute to your ranking. Using alt tags allows Google to understand your images and factor them into your rankings.
Google Images is also the second largest search engine, and it is responsible for about 20% of all online searches. This means it is ahead of YouTube and other search engines like Bing. As such, you have an opportunity to drive traffic through Google Images. Using alt tags will ensure that your images rank high on Google Images and drive traffic to your website.
Serves as Anchor Text for Image Links
An anchor text is the clickable words that link one page to another. Google uses anchor texts to understand more about your web page. However, not all links are texts; some are images. If you want to use an image as a link, fill out its alt text to help Google understand more about the page you are linking to.
How can You Create Alt Tags ?
Creating alt tags is not a complicated process. All you have to do is insert a short snippet into the coding of your site. If you are using a content management system (CMS), the process is more straightforward, and you may not need to go to the code. Clicking on an image will produce an image optimisation or rich text module where you can create and change the image’s alt text. Let’s look at the different ways of adding alt texts.
Adding Alt Text into the Code
Most people may feel overwhelmed when dealing with codes. However, adding an alt tag into the code is a simple task. Start by pulling your site’s HTML source code. Find the image you want to add an alt tag to. The image should look something like this;
<img src=”exampleimage.png”>
Insert a snippet of code before the closing angle bracket. The snippet of code should take this format;
alt=”example description”
When you are done, the complete line code should be a combination of the above elements and appear like this;
<img src=“pie.png” alt=“steak and ale pie”>
The only thing you need to remember is the code snippet, and everything else will be easy.
Adding Alt Tags in the HubSpot CMS
In HubSpot, click the image and then the edit icon, which looks like a pencil. This will open an image-optimisation pop-up box. Your alt text automatically appears in the webpage’s HTML source code, where you can edit the image’s alt text.
Adding Alt Tags in the WordPress CMS
In WordPress, click on an image to automatically open the Block tab in the sidebar. Click the section labelled ‘Image Section’, add your alt text in the empty field, and click ‘Update’ on the toolbar at the top of your screen.
Tips to Writing Appealing Alt Tags
Be Descriptive
Your alt tags must be descriptive and valuable. They should contain enough information for your visitors to understand what the images represent. Before adding the alt text, ask yourself whether you would understand the relevance of that alt tag if you could not see the image.
Keep Alt Tags Short
Although you must be descriptive, always keep your alt tags short and brief. Never include a complete sentence or paragraph. Limit your characters to about 125 characters, but provide users and search engines with enough details to understand the context of your image.
Include a Keyword
Always include a keyword in your alt tags. Placing a relevant keyword within your alt tag will help you improve your SEO.
Do not Write Alt Tags for SEO Only
Write your alt tags with your users in mind. Do not focus on SEO and search engines. Your alt tag should also be relevant to the image and page content. Avoid stuffing your alt tags with keywords since search engines will see it as spam, and you will hurt your search engine ranking. Also, using the same alt tags and keywords for several images will appear as spam. Let each image have a unique alt tag.
When Can You Use Alt Text?
Images and Pictures
Ensure you convey the content and purpose of your image concisely and unambiguously. Consider what is essential about your image, like the setting, emotions on people’s faces, colours, and relative size. Do not start your alt text with phrases such as ‘a graphic of’ or ‘an image of.’
Diagrams and Flow Charts
If you are dealing with objects that give detailed information, use alt texts to provide the information conveyed in the object. Describing a chart as ‘ A bar chart showing sales over time’ will not be useful for visually impaired visitors. Try something like ‘ A bar chart showing sales in July for brand A.’ Such alt tags describe the beginning point, progress, and conclusion of the flow chart.
Videos
If you have a video that does not explain its content, consider including an alt text to describe the visual experience even if the user can hear the speech or background sounds. The alt text will describe the content and purpose of your video. Ideally, your video should contain a second audio track that describes the video elements that are visual and not accessible to visually-impaired people.
When not to Use Alt Texts
Decorative Visual Objects
Decorative objects add visual interest but are not informative. Visitors using screen readers will hear this as decorative and know that they are not missing any essential information. Select the ‘Mark as Decorative’ check box after the Alt Text pane opens if you want to mark a visual as decorative. The text entry field will be greyed out.
Slicers and Tables
Slicers and tablets are examples of objects that Microsoft Office Accessibility do not flag when they are missing alt texts. As such, you do not have to write alt texts for such things.
How Can You and Fix Alt Tag Issues?
Like Ahref’s Site Audit, you have several tools at your disposal that can crawl your pages and identify missing alt attributes. The first thing to do is to use Google Analytics and Google Search Console to find your most visited pages. Install the Alt Text Chrome extension, load your most visited page, and activate the extension. You will see the alt text displayed whenever you roll over an image and a warning if the alt tag is missing. You will also see whether your alt text is well optimised. This process will only take you a few seconds. Ensure you repeat this process for all your most visited pages on your website.
Conclusion
Now you can see that adding alt text to your images is a simple process. However, it is not the only way to optimise your images. Consult with our Marketing Sweet team to discover other ways to optimise your images and your entire website.
