When we refer to ‘optimization’ we’re usually talking about the steps anyone can take to refine their web presence, increase the visibility of their website in the eyes of Google, and improve both traffic and the potential of converting new customers. The manner in which you format the images used on your website plays an important role in this, while also helping to create a more accessible online experience.
To the casual user, images are immediately appreciable; most of us are able to understand content, context and significance without even slowing our scroll. But what if you’re one of the millions of visually impaired users whose only means of gaining such insights are through the use of a screen reader? This is where Alt Text comes into play.
WHAT IS ALT TEXT?
First and foremost, Alternative Text (or ‘Alt Text’, or ‘Alt Tag’) is an important factor of web accessibility. Incorporated within HTML code, Alt Text serves to aid visually impaired users by providing descriptives which help those users to better understand image-based web content. While invisible to the naked eye of the casual user, those descriptives are interpreted by screen reader technologies which operates at a code level, and vocalized for the benefit of the visually-impaired user.
Picture This…
Your eyes are closed and someone is explaining to you the details of a picture that you’ve never seen before. Details are important. Context is important. When framed within that particular example it becomes easy to understand the role played by screen readers, the importance of high quality Alt Text, and the best practices that can make it so effective.
But Alt Text Isn’t Always Invisible
If an image fails to load properly, it’s Alt Text that appears in its place serving as a sort of descriptive place holder. It helps the user to understand what the intended image would have displayed, the purpose of its inclusion and the context in which it had been used. But Alt Text also serves another purpose…
The SEO Value of Alt Text
Just as Alt Text provides valuable descriptives to aid the visually impaired, it performs a similar function for search engines crawlers. It helps search engines like Google to identify your content and to recognize that it answers the needs of its users. The more descriptive your Alt Text, the more valuable your content will be in the eyes of Google; and with higher valuation, comes the likelihood of improved search rankings.
BEST PRACTICES FOR WRITING ALT TEXT
Be descriptive. By understanding the important role that Alt Text performs, we can approach the process of creating in a more purposeful manner. If tasked with describing a picture of a car, a knowledgable resource wouldn’t simply describe it as “a car”; they should specify the make, model, model year, trim, body style, color and whatever other details are pertinent in understanding the overall context of the image.
Favor brevity. From a formatting standpoint, there’s no hard-and-fast rule in terms of character limits – but a maximum of 125 characters reflects the limitations of most screen readers.
Use keywords conscientiously. Inclusion of pertinent keyword(s) within Alt Text can be helpful in conveying the value of content within a particular search. However, your first priority is to provide descriptive context for the image. Keep this in mind when it comes to both image selection and the creation of its Alt Text. Avoid keyword stuffing in an attempt to make the image relevant to wide scale search. Focus on communicating the unique value of the image based on what it conveys.
Avoid unnecessary descriptives. Google, screen readers and visually impaired users understand that you’re describing an image. For that reason, you don’t need to include unnecessary descriptives like “image of”. Not only is it unnecessary, but it utilizes character spaces that can be used more effectively to describe the image.
Adding alt text is easy, it’s built into most CMS systems like wordpress already. If you need to add it manually to HTML, it’s as simple as adding the following:
<img src=“cutest-puppy.jpg“ alt=“Cute puppy in blankets”>
ALT TEXT EXAMPLES
‘Poor’ Alt-Text might look like this: <img src=“chocolate-cake63886.jpg“ alt=“chocolate-cake63886.jpg”>
‘Good’ Alt-Text might look like this: <img src=“chocolate-cake63886.jpg“ alt=“chocolate cake”>
‘Better’ Alt-Text might look like this: <img src=“chocolate-cake63886.jpg“ alt=“chocolate cake with white florets and chocolate glaze”>