What is Alt Text and Why is it Important?

When you upload an image in WordPress, you are brought to a new dialog box where there are many empty fields. One of them is titled “Alt Text”. In fact, a majority of modern websites which involve images come with that field. Many of us probably don’t want to be concerned by it. It isn’t labelled “Compulsory” so why bother, right? Well, no. It turns out Alt Text – something that seems passable – holds vital importance. In this post, we’ll tell you what Alt Text is and what it is meant for.

What is Alt Text?

Alternative Text, aka Alt Text or Alt Tag or Alt Attribute, describes the non-text content uploaded on your websites. For example: Images or photographs. It represents an image where it can’t be seen or displayed. An article named, “Appropriate Use of Alternate Text”, in WebAIM states:

Alternative text provides a textual alternative to non-text content in web pages.

The article even goes further, saying:

Adding alternative text for images is the first principle of web accessibility.

If we want to be technical about it, alt text is usually made by adding an “alt” attribute to an image’s HTM tag. Here’s an example:

Silhouette of a Boat on a Lake

Silhouette of a Boat on a Lake

The alt text we can use for this image:

alt=”Silhouette of a Boat on a Lake” 

As you can see, the alt text describes what this image is.

In WordPress, when you upload an image, you just insert the text into the “Alt Text” field and your image will be all set with alt text. You don’t have to concern yourself with HTML codes. It is that easy!

Why is Alt Text Important?

It usually comes in handy when you encounter one of the following situations:

If the image fails to load – If, for any reason, an image does not render on a web page. We’ve been there: waiting tirelessly for that one image to load, while the small circle keeps going round and round… and eventually the page just gives up and, instead of the image, it shows something like this.

broken-image-pic

Talk about frustration! However, by setting up alt text as shown above, you can help visitors understand what you were trying to show them, and they can paint a mental picture. Thus, your photo will say something like:

broken-image-pic

Silhouette of a Boat on a Lake

For the visually impaired – Alternative text is primarily important to visually impaired users. In order to browse web pages, the users with visual impairments make use of screen readers, which are the devices meant to interpret what is being shown on a screen, by using either speech or Braille.

For instance, if the picture is of an elephant and the alternative text reads ‘African elephant’, when the users mouse hovers over the picture, the words ‘African elephant’ will be read back to them. Alt text is fundamental to explain and describe to people using screen readers what is on your page.

On sites with bad or missing alt text, people who rely on screen readers cannot learn or shop. That’s not fair. Not having good alt text causes real problems to real people.

For search engines – Search engines, such as Google and Bing, crawl web pages. It is easy to understand texts on a page for them. However, that’s not the case with images. This is where alt text comes to play. Alt text is used to describe to search engines what the image is showing, allowing search engines to give users better results when performing an image search.

Alternate text is a great place to place relevant keyword to improve your website’s search engine optimization (SEO). However, it is important to use appropriate text that actually describes your image. You should not include keywords if they are not relevant to the image being displayed, and if it doesn’t describe the image. If you do this, it could do more harm than good and negatively affect your website’s SEO.

Alt Away

Now that you’ve had a chance to learn about alt text and their importance for your online efforts, go forth and apply alt attributes to all your site’s image. We’ll post an article to how you should approach while choosing alt text soon. Subscribe to DevotePress for more useful articles like this.

Let us make the Internet a better place for all.

References:

MRW Web Design

WebAIM

MyCylex Sitebuilder

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *