Images | Essential Practices for Content Creators

Images can be a great way to enhance web content. To ensure that images are accessible to all users, there must be an alternative way to convey the information portrayed in an image.

Images should have alternative text (alt-text)

Images should always have alt-text. Alt-text should be clear and descriptive in order to convey the emotion and/or actions that exist in the image.

Alt-text should not start off with “image of” or “picture of” because when a screen reader detects images, it will read it as “image, image of” or “image, picture of”.

Chapman student playing piano while professor observes in the background

Bad:

Alt-text: “image of student and professor”

What’s wrong with this?

The alt-text starts with “image of” and provides no context to what the student and professor are doing. Providing accurate details will help a user know what the image is trying to convey.

Good:

Alt-text: “Chapman student playing piano while professor observes in the background”

Tip: Cover the image and read the alt-text aloud. Are you able to picture in your mind what the image looks like? If you can, it’s accessible!

Images with text

Text within images are not detected by screenreaders. Flyers, posters, or even collages with different textual logos should not be used on webpages.  If your image has important textual information, it should be typed out and exist outside the image.

Images as buttons

Adding a link to an image should be avoided. When links are read aloud, images used as buttons will not have any context to it.

Additional Resources


Go to: Getting Started: Web Accessibility