To be rendered by a browser, images come with several attributes like src, width, height, etc. What if an image cannot be displayed? What if a user is visually impaired and uses a screen reader to access the web? The alt attribute provides text, an alternative to an image, to be rendered by browsers or to be read by a screen reader in such cases. “Alt attribute” and “alt text” language can be used interchangeably, whereas, sometimes, people use “alt tag” expression wrongfully. Here is an example of an image element with alt attribute:
<img src=“koala.jpg” alt=“A koala bear on a tree”>
What are some rules to follow when writing alt text?
Since alt text helps others understand the content on your site, the temptation is to describe the image in as much detail as possible. However, alt text should be brief and clear while conveying the role of the image on a page. You don’t want to overwhelm your audience and make them lose interest in your site. This alt text for a koala picture is too wordy: “A koala bear is sitting on a tree branch while holding to the tree trunk. There is another branch above its head. There are more trees on the background.”
Never start alt text with “Image of ” or “Picture of”. Screen readers add “Image of” phrase automatically. In our example above, the screen reader will read “Image of a koala bear on a tree”.
If you have a decorative image that doesn’t have any informative load, use empty text: alt = “” . Do not omit alt attribute entirely because when a screen reader encounters an image without alt text, it will read image file name instead. Omitted alt attribute wouldn’t cause harm if you called your image “abstract picture.jpg” or “pattern.jpg”, but what if you called it “gjorgowerlk5785.jpg”?
Another good practice is to keep alt text 125 character long because some readers have this limit.
Alt text for logo image
If the image is a logo, alt text can simply repeat logo text:
<img src=“logo.jpg” alt=“New Balance logo”>
2. If logo image is on your own site and it serves as a link to home page, add “home” to the text:
<img src=“logo.jpg” alt=“New Balance home”>
3. Suppose New Balance is a sponsor for your event or your business partner. If you placed their logo and it serves as a link to New Balance site, use “site” instead of “home”:
<img src=“logo.jpg” alt=“New Balance site”>
Alt text and SEO
When you search for an image online, search engines use alt text to determine image relevance to the search and produce results. You can put keyword or keyword phrase in alt text, but avoid keyword stuffing. Google favors short alt text and you can get penalized for keyword stuffing. Your site will be considered a spam. Example of keyword stuffing:
<img src=“shoes.jpg” alt=“shoes best shoes women’s shoes beautiful shoes comfortable shoes buy shoes”>