Images
Images add interest and convey meaning to your website. Follow a few tips to ensure all users can benefit from these site enhancements.
Image alt text
Alt text is a text description that conveys the meaning and context of an image. It should be concise, descriptive, and relevant to the image content. Alt text is read aloud by screen readers for visually impaired users.
Why alt text is important
Alt text (alternative text) is used to describe the appearance and function of an image on a web page. It is crucial for accessibility, allowing screen readers to convey what the image is about to visually impaired users.
Alt text can also help with SEO. Because alt text helps to add context to the images you’ve included on the website, Google and other search engines can also read the alt text.
Best practices for writing alt text
- Aim for no more than 125 characters. This ensures screen readers can interpret the text effectively without overwhelming the user with too much information.
- Clearly describe what is in the image. Focus on the important details that relate to the context of the image.
- Do not start the alt text with phrases “image of…” or “graphic of…”. Screen readers already announce the image as such.
- Tailor the alt text to how the image is used on the page. For informative images, describe the information being conveyed.
Adding alt text in WordPress
WordPress allows website editors to easily add image alt text right in the dashboard. After uploading your desired image, add alt text and it will automatically be saved for that image and will be used any time the image is used within the site.
In the attachment details window, add your alt text in the Alternative Text window. “Purely decorative” applies to any image or graphic that conveys information that is not essential for the understanding of the page content, such as many icons and decorative borders.
Without alt text, screen readers will read the file name — which in this example is “image1234.jpg” — will not provide any context to the image.
Alt text for this image may be: A brown striped tabby cat and a black and white cat snuggle while sleeping soundly on a beige chair.
A better, more descriptive, name for this image may be: two-cats-sleeping.jpg
Resources to help write image alt text
Alt Text: Why It’s Important for Accessibility and SEO (with examples)
Step-by-Step Instructions for Writing Alt Text (from University of South Carolina)
Yale University Content Editor Training, Image Accessibility (PowerPoint document; may not be fully accessible)
Ensure images, icons, and graphics have sufficient contrast
Just like with type, contrast is important when adding any image or graphic to your page. This is for the benefit of all users, including those with low vision. See Color Contrast for more information on contrast standards.
Use captions for complex graphics or charts
For technical or complex charts, use captions to explain the information in addition to a shorter alt text. Using the caption option, also available in the same WordPress attachment details panel, enables you to provide more detail about the information provided than normally in the alt text.
Other image considerations
Do not embed text in images. This will not be read by screen readers.
Ensure that any graphic that conveys important information does not rely on color alone.