Generally when you see an image on a webpage, the <img> HTML tag is being used on that web page to instruct the browser which image file to display and how. The code looks like a little something like this (from this very page):
<img src="http://fireroaddigital.com/sites/default/files/frd-blog-alt-title-tags.jpg" alt="Squirrel using a video camera">
Simple enough, but what’s that alt tag?
The alt attribute is used to help search engines and assistive technology such as screen readers for the visually impaired to understand the image. Googlebots are getting smarter and smarter, but may not yet know that image is of a 1940’s film camera being operated by a 1940’s squirrel. Or that it might be an Australian spotted flying squirrel. Or maybe it’s a muskrat. I’m a human and I can’t even really tell what it is.
Sites like Google Images use this alt data to help categorize their collections of images, and the use of alt tags across your site is known to be one of the many Google search engine ranking factors. So, not only is the use of the alt tag required to achieve HTML conformance, it’s good for SEO.
So how do we enable it on our Drupal sites? Easily, of course. First we make sure our Drupal site is providing a place for a content editor to enter the alt text for all images and that the resulting text is included in the resulting HTML code.
For an example, let’s look at the default Drupal content type Article. Navigate on your admin menu to Structure >> Content types, then under Article, click on manage fields. If you haven't changed the default Article content type, it should look like this:
Figure 1: Article content type
The Article content type comes with an Image field by default. You can also add an Image field to any new content types that you create. Click on edit under Image. Scroll down about halfway until you see this.
Figure 2 - Enable Alt Field on Article content type
On the Article content type, the Enable Alt field checkbox should already be checked- comes that way by default. But it won't when you add an Image field to a new content type you created. You will need to check that box. And notice the Enable Title field checkbox? Go ahead and check it too - we will talk about it shortly.
So then how do you enter Alt text for images? Let's create a new Article and find out. Navigate to Content >> Add Content >> Article. Enter title & body content. Scroll down to the Image section.
Figure 3 - Adding an Image to an Article
Choose a file and upload it. I've chosen a picture of four lovely donkeys standing in field. It's also generally a good idea to name the field descriptively (and use keywords related to your content if applicable).
Figure 4 - Added Image
Save the node and you are done! The alt text will show up in your page HTML code.
A few more loose ends though:
- what about all those little design-element images throughout your website- do they need alt text?
- what about inline images I add to a page using the WYSIWYG editor- how do I add alt text to them?
- what about that title attribute you said you'd talk about later?
Ahh good- you've been paying attention. Let's start with the first one. You probably have small graphics, lines, shadows etc. all over your website, sprucing up the design. The W3C standards say that for images that have no semantic meaning to the viewer, you can set the alt tag to null. ".. if the alt text is set to null (i.e. alt="") it indicates to assistive technology that the image can be safely ignored."
For inline images (like all screenshots I've included in this post) - your Drupal WYSIWYG editor should have a way to enter the alt text. We use CKEditor on this site, which looks like this while inserting an image. Other editors work similarly.
Figure 5 - Setting the alt tag for inline images using CKEditor
And finally, the title tag. It tells the browser what to display as a tooltip when the viewer hovers his cursor over the image. It is generally more useful when the image serves as a link, either to a larger version of itself or to another webpage. The best practice then is to put a description of what will happen when the user clicks on the image. It is generally not thought by the community to have any search engine ranking value. But it is a good practice to follow for good user interaction, which may indirectly lead to better conversions.
If you check the Enable title field checkbox on the Image field in the content type, it will add an additional field under alt for you to enter title text for images. In CKEditor, the title text can be entered under Advisory Title on the Advanced tab.