Images: Best Practices

Proper use of alt text makes your images accessible to visitors who use screenreader software. This means deciding on a case-by-case basis whether to include alt text—and writing it well if you do use it. Alt text should be descriptive and concise. It should convey the same meaning/function as the image it supports.

Imagine using your website without being able to see any of the images. Or better yet—try it out by disabling images in your browser. Are you still able to completely understand the content without them?

For most Haas webpages, your answer is likely “yes,” as most of the images used on our site are purely decorative and don’t require alt text. All images on our site have a blank alt attribute by default, which means that screen readers will ignore them.

If your content is not fully understandable without the supporting images, you need to use alt text.

Add alt text to your image when inserting it from the Media Library. The alt text field appears in the right sidebar under Attachment Details.

Unsure whether to use alt text or not? Try using this alt text decision tree from the World Wide Web Consortium (W3C).

Graphs, Charts, and Complex Images with Text

If you’re using an image that contains a lot of text (e.g. a graph, chart, or diagram), use the Accessibility Text building block to type out the text that appears in the image. This block can be added just above or below your image.

The Media Library is a shared resource. Do your part to keep it organized and useful for all by following these best practices:

Give your file a descriptive name.
For example, name your file “ann-harrison-portrait.jpg” or “chou-hall-classroom-banner.jpg.”

Delete unused files from the media library.
If you upload a photo to the media library in WordPress and don’t use it, remove it.