DEV Community

loading...

Alt text for images

jarvisscript profile image Chris Jarvis ・2 min read

To improve we accessibility we need to add Alt text to images. This is a brief description of what is shown on an image. The description is read by a screen reader to help the visually impaired.

The description needs to tell what the image is the more descriptive the better. Not just "a robot", "a gray robot" is better, even better would be "A gray robot with a square head. It is standing in front of a brick wall."

"A gray robot with a square head. he is standing in front of a brick wall."

A start

<img src="images/classic_robot" alt="A robot." />
Enter fullscreen mode Exit fullscreen mode

Better

<img src="images/classic_robot" alt="A gray robot." />
Enter fullscreen mode Exit fullscreen mode

Much Better

<img src="images/classic_robot" alt="A gray robot with a square head. he is standing in front of a brick wall." />
Enter fullscreen mode Exit fullscreen mode

If the image has text that text should be in the alt text as well. If the image subject is doing something, describe that as well.

LEGO Dorothy standing with toto. caption:Dorothy was tired of being at home. She says "anyplace but home. anyplace but home. Anyplace but home."

<img src="images/dorothy_anyplace.jpg" 
alt="LEGO Dorothy standing with her dog, Toto. caption reads: 

Dorothy was tired of being at home. She says 'Anyplace but 

home. Anyplace but home. Anyplace but home.'" />
Enter fullscreen mode Exit fullscreen mode

If the image is decorative just add a blank alt="" tag. If it's a logo you can just call "brand name logo." So the visitor knows what site they are on. "logo" is not enough.

SEO Bonus

Alt text improves your search engine results. the phrase "A large brown dog sitting on the grass" will rank hiring than "a dog". It also helps SEO to name the image descriptively; not dog_001 or image_001. Give your images good names, like You should for variables.

-$JarvisScript git push
Enter fullscreen mode Exit fullscreen mode

Discussion (0)

pic
Editor guide