In this article, I’ll explain how to write the best alt attribute for your web images.
Rules for a good alt attribute
- Our golden rule: the alt attribute should always be present in the img tag. In my article “Web Accessibility: Why Your Images Should Always Have an Alt Attribute“, I dive deeper into it.
- Ideally, it shouldn’t be longer than 120 characters.
- Do not repeat content: if it’s already mentioned elsewhere, we do not need to replicate it here.
- Do not write “Image of…” on the alt attribute. The screen reader will announce the image as such.
- If the image we’re talking about is purely decorative and does not add meaning to the content, we should leave the alt attribute empty. This is key to making sure screen readers ignore this image. Not including the empty alt attribute will result in assistive technologies reading the file name and leading to confusion.
- If we’re using an image as a button, its alt should have the same copy as if it were a text button, so basically we should write the action that the button will perform.
- When writing an alt attribute, we need to describe the function of the image, not its content.
- If you need to include a large description, we can always rely on the aria-describedby attribute. This attribute won’t be visible on the website, but will be read by screen readers.
- Do not use the alt attribute for credits or copyright. This kind of information should be included in a figcaption tag, a specific element whose purpose is to include that kind of information.
- Do some homework. If you find yourself facing a different kind of image, such as charts or works of art, do some research on better practices in order to include the proper information on the alt attribute and include any extra necessary pieces of content.
Knowing how to write a good alt is key to ensuring a great experience with assistive technologies.
