Alt text, or alternative text, is an important element to include when making your website accessible to those of all abilities. Alt text is a short description of the content of an image – textual of course. This way, if someone cannot see the image, a screen reader can still describe the image to them. Alt text is also important for SEO, as search engines only search text.
How to add alt text to an image in WordPress
When you add an image in WordPress, you can add alt text from the media gallery:
There are a few things to note when writing alternative text for the images in your website. Alt text should be short, not overwhelming to the reader. It should also be relevant to the image. Keep in mind that when deciding on alt tags for accessibility, your descriptions are what a visual impaired person will “see” from your website.
You can edit alt text from the WordPress text editor as well.
<img class=”aligncenter wp-image-8676 size-large” src=”https://coursevector.com/wp-content/uploads/2019/10/alt-text-example-1024×448.png” alt=”alt text example” />
Alt Text for special images types
Sometimes we have images that are links, buttons, logos, or some other special type of graphic. Here is how to handle these special situations:
- Images that are links – Describe the destination of the link rather than the image itself.
- Button images – Describe the button’s function, which usually matches the text presented on the button.
- Logos – Simply state the company or organisation name.
- Special Graphics – Infographics, charts, and graphs present a special challenge. Since there is a lot of text in the graphic, you can write a short summary in the alt text. Remember, alt text should not overwhelm the user. It is good practice to then list all the text on the infographic below it in the post or page.
- Decorative Graphics – If your image does not add meaning to the page, it does not need alt text. If the image has a caption, it doesn’t need alt text. If you add alt text to an image with a caption, the screen reader will probably read the same thing twice. If your alt text and caption are different, then you’re okay to add alt text with a caption.
Website accessibility should not stop with alt text. Here are some resources you can use to make a more accessible site:
