How to Set Image Alt Attribute


What is the Alt Attribute of an Image?

Images can certainly provide excellent resources for your users. However, a search for a particular image is difficult because the user is searching for an image based on a textual search query, but the image is not in a textual context. Even in the future, if we could search by importing an image, it would be rarely useful as you would already have the image in the first place. As always, search engines and web standards have come together to help images be found in textual search queries. Each image using an "img" tag has the ability to include a textual description about the image in its "alt" attribute. As of the newer versions of HTML, "alt" attributes are actually required on all "img" tags.

Why Use an Alt Attribute on an Image?

As previously stated, it is required by newer versions of HTML. Of course, there are a few other reasons why adding a description of an image is useful. The first is that search engines can provide images in the search results, which means that the descriptions of your images can actually bring users to your website. Once users arrive on your page, "alt" attributes of images can provide another benefit. If an image cannot load for one reason or another, the text contained in the "alt" attribute is shown. Yes, it is very true that you should check your website often for broken links to images or images that have been removed or moved to another location. Nevertheless, if something was to go wrong before you caught the problem, the "alt" attribute would tell users what was supposed to be displayed in the image. Another group of users uses this attribute more often. Visually impaired users cannot see your images, which means their screen readers won't even show information about the image unless it has an "alt" attribute with a summary about the image. Ultimately, there is no good reason not to include an "alt" attribute for each image on your web pages.

Implementing the Alt Attribute

<img src="http://www.site-seo-analysis.com/images/social-media/stumbleupon.jpg" alt="Share Site SEO Analysis on StumbleUpon" title="Share Site SEO Analysis with your friends on StumbleUpon">

If you examine this page, you will see that we have a set of social media icons that are links to share this page on their website. Consider what would happen if those images were moved. The page would simply have empty links, which you would probably never see. Instead, we have used an alt attribute on each image. In the event that these images could not be shown, they would display the image's description in the link. As you can see all that is needed is to place alt="Some Description" in the image tag. We also use a "title" attribute that users can see when they hover over the image to help them understand what clicking the link will do. The "title" attribute can help average users who do not understand the image without a visible description on the page.