The Hidden Nuggets of WCAG2: When Not to Use ALT Attributes
So, just when should you not use an ALT attribute?
Short answer: never.
You must always have an ALT attribute if you have an IMG element. Always. No ifs, no buts, no maybes.
But WCAG2 Says …
I have developers come to me and insist that WCAG2 says it’s okay not to have an ALT attribute. They are referring to the section of Success Criterion 1.1.1 which says:
Decoration, Formatting, Invisible: If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.
These devs take this to mean that an ALT attribute may be omitted where the element effectively has no meaning. In fact, WCAG2 quite specifically states that if no information is conveyed by an image then it should be coded so that it can be ignored by assistive technologies.
This does not mean there shouldn’t be an ALT attribute – it means the ALT attribute should be empty.
The specific technique, H67 is:
Using null alt text and no title attribute on img elements for images that AT (assistive technology) should ignore
According to WCAG2, you can only make an assistive technology ignore your image if you have an empty (or “null”) ALT attribute – that is: alt="". This is emphasised in WCAG2 by the inclusion of Failure 38:
Failure of Success Criterion 1.1.1 due to omitting the alt-attribute for non-text content used for decorative purposes only in HTML
When exactly should I use an empty ALT attribute?
You should use an empty ALT attribute when the image conveys no information. But be careful – I’ve seen people take this to extremes. Only images such as borders or spacer images should have empty ALT attributes. In most cases an image will require an ALT attribute – and if you’re not sure whether you should have an ALT attribute or not, err on the side of caution and use one.
Here are just a few examples where images should have empty ALT attributes:
The spacer GIF:
The underline feature:
The bullet point:
The decorative image:
However, in all of the examples above, it would be preferable to follow Technique C9: Using CSS to include decorative images.
What’s a decorative image?
The last example was of an image used for pure decoration. WCAG2 defines pure decoration as:
serving only an aesthetic purpose, providing no information, and having no functionality
Note: Text is only purely decorative if the words can be rearranged or substituted without changing their purpose.
Example: The cover page of a dictionary has random words in very light text in the background.
The following are some examples of images that have empty ALT attributes. In all these examples the images don’t convey a lot of information, but they are still not pure decoration. They convey some information and need descriptive ALT attributes.
ALT attribute should be ‘Old style map’
ALT attribute should be ‘Older man with glasses smiling at the camera’
ALT attribute should be ‘Merry Christmas’
The exception that makes the rule
The only exception is when you have an image that links off to a page, sitting next to a text link that links off to the same page. In that case the image and the text should be contained within the same HREF element and the ALT attribute should be empty. For example, the following should all have empty ALT attributes:
Hopefully, that’s going to help you make the right choice as to when to give an image an empty ALT attribute so that screen readers ignore it, or one that has meaningful information that will help the user.
However, that’s not all there is to say about ALT attributes.
Next week, I’ll have more on the weird and wonderful world of ALT attributes.
Frequently Asked Questions (FAQs) about Alt Attributes
What is the primary purpose of an alt attribute in HTML?
The alt attribute, also known as “alt text” or “alt tag,” is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is primarily used with image elements to provide a text description of the image, which improves accessibility for people using screen readers or in situations where the image cannot be loaded.
When should I avoid using alt attributes?
While alt attributes are generally beneficial for accessibility, there are certain situations where they should be avoided. For instance, if an image is purely decorative and does not convey any essential information, it is better to leave the alt attribute empty (alt=””). This way, screen readers will skip over the image instead of trying to describe it.
How does the alt attribute impact SEO?
Alt attributes can significantly impact SEO as they provide search engines with more context about the content of your webpage. By accurately describing the content of images, alt attributes can help improve your website’s visibility in image search results and enhance overall SEO performance.
What is the difference between alt attributes and title attributes?
While both alt and title attributes provide additional information about an element, they serve different purposes. The alt attribute is used to describe the element’s content, particularly for those who can’t see it. On the other hand, the title attribute provides supplementary information about the element, which is typically displayed as a tooltip when the user hovers over the element.
How should I write effective alt text?
Effective alt text should accurately and succinctly describe the content of the image. It should provide context and convey the same information that the image would if it were visible. Avoid using phrases like “image of” or “picture of,” as screen readers already announce the image element.
Can alt attributes be used with elements other than images?
Yes, alt attributes can also be used with area and input elements. For area elements, the alt attribute describes the area of an image map. For input elements with type=”image”, the alt attribute specifies alternative text for the image used as a submit button.
What happens if I don’t include an alt attribute in an image element?
If an image element does not have an alt attribute, screen readers may read out the image’s file name or URL, which can be confusing or meaningless to users. It also fails to meet accessibility standards set by WCAG 2.0.
How does the alt attribute contribute to web accessibility?
The alt attribute plays a crucial role in web accessibility by providing textual descriptions of images and other elements. This allows users with visual impairments to understand the content through screen readers, and users with slow internet connections to understand the content even if images fail to load.
Can I use HTML tags in my alt text?
No, HTML tags should not be used in alt text. The alt attribute value should be plain text.
Is there a character limit for alt text?
While there is no hard character limit for alt text, it is generally recommended to keep it under 125 characters. This is because some screen readers cut off alt text at around this length.
Gian Wild has been working in accessibility since 1998. She worked on the very first Australian accessible web site and was the accessibility consultant for the Melbourne 2006 Commonwealth Games. For six years she was actively involved in the W3C Web Content Accessibility Guidelines Working Group. Gian Wild is the Director of AccessibilityOz.
