We recently received some feedback through our Github repository regarding the accessibility of the “hero” images we use on some pages of our website, including the blog posts.
When we originally designed the site, we considered these images as “decorative” or “ambient” in nature, and decided they were not intended to convey meaning. As a result, we thought they did not need to be described to visually impaired users through the use of alternative text.
After this issue was raised, we had some internal discussions, and we realized we needed to revisit our earlier thinking. In the case of blog posts, the images can at times contribute context to the story. For example, the post Designing for Canada, includes a picture of the author, which is arguably contextual information.
Another example of an image adding some context is the post We’re all in this together by guest blogger, Hillary Hartley, Chief Digital Officer of the Government of Ontario. In this case, the accompanying image is of the Ontario Digital Service team.
Some more challenging cases were presented in posts like Picking our projects. The accompanying photo in this case is of an assortment of posters we have around the office. In this case, the image contains text, but is it just an “ambient” image? Does it convey additional information, or contribute to the message?
There is debate about the need for alternative text in a few of these situations. Some would make the case that providing alternative text for all images, even ambient or decorative ones, creates noise and clutter for screen readers. Others might respond that what one considers “eye candy” may be another’s emotional link to a website.
Some informal user testing has found that users have shown a preference for a brief alternative text for ambient and decorative images, unless that image is purely decorative, like a gradient or spacer. In the end, we have decided to add alternative text for these images. Even though there seems to be a bit of a grey area in regards to ambient or decorative images, we feel that in this case, we’re on the side of having them.
Frequently the decisions we make in supporting accessibility can be open to interpretation. Where exactly is the line between decorative, ambient, and informative images? No automated testing process or tool will be able to make that distinction for you. You have to be deliberative and open to challenging your assumptions, and willing to change your mind.
While we’d like to get it right the first time, at CDS we believe that accessibility is a continuous process of listening, evaluating, iterating, and learning. The whole team needs to participate, broaden our knowledge and skills over time, and share and learn from our mistakes.
There are so many great resources on the web for learning about accessibility. This issue we’ve been discussing may seem minor to some, but we learned a lot from others in researching the best solution, and we feel there is value in having this discussion, even if the solution should have been obvious. Some great resources we’ve found along our way include:
- 18F Accessiblity Guide
- 24 Accessibility
- Alternative Text - Context is Everything
- CanAdapt blog posts by WCAG team member David MacDonald, in particular Alternate text for CSS background images and When can a web author use null alt text
- Des images accessibles (in French)
- GDS Accessibility Blog
We will continue to blog about accessibility and would love to hear from you if you have comments, topic suggestions, or ways to improve the accessibility of any of our projects.