One important website accessibility standard every website manager should know is that EVERY photo on your site MUST include alt text. Alt text (alternative text), or alt attributes play an essential role in making your site accessible to all visitors.
Here are three tips to ensuring your image descriptions and informative and optimized for screenreaders.
Describe the photo accurately
Computers and e-reading devices can’t analyze images. Alternative text works to inform screen readers and searchbots what’s in the picture. It’s also what will display on the screen should the image fail to load.
When writing alt text for images, make sure you’re describing the image and it’s purpose accurately and succinctly. You need to give enough information so that readers and search engines understands how the image relates to your page.
For example, if you’re writing a blog, revealing the cover of your novel, the alternative text would describe what your book cover looks like.
The surrounding content on your page can also provide the readers additional context around the image, so be sure to make sure the description is original, adding value to the reader instead of being redundant.
In our cover reveal example, including your name/byline in the alt text is like redundant because you’ve already referenced that information within the body of the post.
Screenreaders also know, thanks to the alt text line, that this is an image, so avoid unnecessary words in the description like “image,” “graphic,” etc.
Keep it under 125 characters
It’s like the original Twitter. You don’t need to fluff up the description or be verbose. The more succinct you can be, the better the description. In fact, many screen readers will only read the first 125 characters, so it’s important to keep your alt attributes under that limit.
What about images that are purely for design?
There may be times when an image is purely decorative, and does not add any context or meaning to your page. When this is the case, simply insert “” in the alt text field. This signifies that the value is null, rather than missing/inaccessible.
