I will be sending a quick Web Tip to you on the first Wednesday of each month. The tip will be short, important to know and easy to implement.
Picture This - Alt and Title Attributes
Alt stands for alternative text and is used to provide alternative information for an image if a visitor cannot view it for some reason. Reasons can include: browsers that cannot display images or have image display disabled, or visitors who use screen readers.
Alt text guidelines:
- Alt text should be relatively short, useful and relevant information to anyone not seeing the image.
- For purely decorative images, leave it blank. (
- If an image contains text, the alt text should be the same as that text (especially important when images are used for navigation links).
The alt attribute is sometimes misused for search engine optimization. Some people try stuffing the alt text with keywords. This questionable practice reads as SPAM and can get your site banned at worst, ignored at best.
Earlier versions of Internet Explorer (prior to version 9) will display the alt text when hovering over images. This is known as a "tooltip." However the alt attribute was not meant to be used as a tooltip and most other browsers don't show them at all. So here is a tooltip tip - to create a tooltip for an image, use the title attribute.
For an example of what the HTML code would look like - here is what the code might look like for my signature image below:
<img src="Images/Annette.gif" alt="Annette" title="Annette">
There are many good reasons to use the alt and title attributes for a better user experience, the best being Web Accessibility. There will be more about Web Accessibility in my next newsletter scheduled in two weeks.