Woman sitting and raising her hand beside another woman.

Accessibility Answers: How Do I Handle Alt Attributes

Published on by David A. Kennedy

When I give presentations on accessibility, I often get one or two questions I’ve fielded before. I’ve collected a handful for an ongoing series of posts with my answers. I hope it helps you understand accessibility better.

How do I handle alt attributes?

Alt attributes can trip up even the most seasoned web worker. But do them right, and they make a huge difference to screen reader users.

I like this table from an article by Whitney Quesenbery.

If the image contains…The alt text should…
TextRepeat the text
Visual informationExplain it
Sensory informationDescribe it
Nothing newKeep it very short
(if you can’t make it “null”)

If you want more explanation, check out the W3C’s alt decision tree.

All images should have an alt attribute, even if it’s empty or null, like: alt="".

Follow the series Accessibility Answers. Ask me a question via my contact page or Twiter.

Image by rawpixel.


Tagged AccessibilityAccessibility AnswersFront End Development