loading...

Image Accessibility 101: What is it and why is it important?

alhasenzahl profile image Amanda Hasenzahl ・1 min read

Image Accessibility 101 (8 Part Series)

1) Image Accessibility 101: What is it and why is it important? 2) Image Accessibility 101: Informative Images 3 ... 6 3) Image Accessibility 101: Decorative Images 4) Image Accessibility 101: Functional Images 5) Image Accessibility 101: Images of Text 6) Image Accessibility 101: Groups of Images 7) Image Accessibility 101: Complex Images 8) Image Accessibility 101: Image Maps

Web accessibility is a very important, but often times over looked topic in the world of web development. When done properly, it allows as many people as possible to use the web and it makes the user experience more efficient and pleasant for everyone, not just those with a disability.

Image accessibility is a small piece of this, but it can contribute greatly to the overall accessibility of your site and how users understand and interact with the content. Making your site's images as accessible as possible goes way beyond just making sure that the image has alt text. The text that gets put, or not put, inside of the alt attribute varies greatly based on the purpose of the image and the content that surrounds it.

The following series is a look into the seven purposes an image can serve on a site and how to approach writing the most effective alt texts in each case in order to help make your site as accessible as possible.

Image Accessibility 101 (8 Part Series)

1) Image Accessibility 101: What is it and why is it important? 2) Image Accessibility 101: Informative Images 3 ... 6 3) Image Accessibility 101: Decorative Images 4) Image Accessibility 101: Functional Images 5) Image Accessibility 101: Images of Text 6) Image Accessibility 101: Groups of Images 7) Image Accessibility 101: Complex Images 8) Image Accessibility 101: Image Maps

Posted on by:

alhasenzahl profile

Amanda Hasenzahl

@alhasenzahl

I'm a former ropes course facilitator turned self-taught web developer

Discussion

markdown guide
 

Thanks for this. It's really excellent to see someone promoting accessibility so thoroughly! I'm still frustrated at how little work is done to ensure web content is accessible. It often feels like something that gets considered as a last resort, if at all...

A couple of suggestions:

  • In the decorative images section I would also specifically warn against repetition of text in an alt attribute - e.g. where a link contains both text and an image the image should be treated as decorative and have an empty alt attribute and not repeat the link text. That's a mistake I've seen fairly regularly.
  • I would question the "here" as link text in section 5 - shouldn't that be informative text describing the link target?
 

Thanks Ben! It is a topic that I have become very interested in and one that I think is so so important. It is so frustrating when people brush it off and don't treat it as a crucial part of what we do.

Also, thanks so much for the suggestions, they are much appreciated. I will look into adding the decorative image example you suggested above because you are right that you wouldn't want repeated text in that instance. And you were so right about the link text there, thank you for catching that.