One of the best ways to improve web accessibility is to ensure that all images have an alt text or caption. This article looks at image alt text and what you should consider when writing it for your website. It also explains how to implement an accessibility overlay to enable screen reader users to access your images.
What Is An Alt Text?
Alt text, or alternative text, is a non-visible piece of information that tells a user what the image represents. It’s added to an image so screen reader users can get a sense of what each image on your website represents. Just like when you search Google, all the pictures have been given text by the webmaster, which describes them in some way or another – this is known as alt text. For instance, “alt=elephant” means that the elephant picture has been described with this particular alt text. All alt tags should be concise and relevant to give maximum accessibility benefit.
What Should An Alt Tag Include?
A good alt tag will include:
The topic of the image, or what it is about
What the image shows
An accurate description of the image – this should be kept short and concise for screen reader users. Try describing an image in eight words or less.
Alt tags should also be unique to each image so that if there are two images on your page with similar content, each one will have a different alt tag. You can use words like “the” “a,” “above,” “below,” and “side by side” once per page only, instead of overusing them in every alt tag.
A good test is to ask yourself whether you would get confused looking at your alt text (for example, would you mistake one elephant for another?) If the answer is yes, then your alt text probably needs revising.
An example of an alt tag is “Flowers in a vase. A woman holds flowers in front of her.” This text provides all the relevant information needed to understand what the image is about, describes it accurately, and can be used for multiple images with similar content even if the user enters different search terms.
How To Implement An Alternative Text Field
There are three ways you can implement alternative text on your website, depending on how much time you want to spend adding alt tags.
1. Implementing Alt Tags
If you want to improve web accessibility but don’t want to spend time implementing an alternative text field, then you can use the HTML5 figure and fig-caption elements to add alternative text directly into your document. The code for this looks like this:
2. The WordPress Plugin Way
An effortless way to implement alt tags is with a plugin. There are many plugins available for this purpose, such as WP Alt Caption. All you need to do is install and activate the plugin, edit your images in the media library, select an area to use as your alternative text field, and save changes. You can also use Google Docs and other image editing tools like Adobe Photoshop and GIMP to add alt text.
3. The DIY Way – Adding Alt Tags Manually
If you want to save time by not implementing a plugin but still want alt tags, then consider adding them manually in your media library or uploading the images again with alternative text (this is done in Flickr, for example). If you use WordPress, make sure you edit all your media files, including those embedded on other websites such as forums and guestbooks that might be hosted on your domain.
