I was in a meeting with a client and a SEO expert and they would like to stop using images as backgrounds and just use normal images with good alternative text, to rank better in search. I agreed to the point where they wanted to made it an absolute rule. All images must absolutely always have alternative text was my understanding of their checklist.
I had to object and I made it clear that all images with HTML “img” attribute must always have an alt attribute but if image is there to decorate – so image is not adding information and is there as pure decoration – then “alt” attribute should be empty, like for example <img alt=”” src=”/image.jpg />.
I also expanded on it by trying to make them think of a voice only user interfaces (like for example a screen reader) – and if they would like to hear about each and every image on the page, also if image does not add to the content. They agreed that could be too much, but had some doubts about what an decorative image really is then.
So what is a decorative image
It’s an image that:
- doesn’t add information to the content (and does not duplicate information that is already given in the context),
- all visual styling that can be removed and doesn’t remove information (like corners, spacers, borders, gradients…),
- decorative images or icons as part of a text link or button (like menu icon with text “menu” besides it, wrapped in link or button),
- eye-candy, aesthetic, ambiance images – not contributing information but there to make content more attractive (again – if they do not add information to the context),
Once again – decorative images should not have alternative text because it just adds clutter – for example screen reader users have to listen to duplicate content.
Back in the days before CSS was used to position elements on the page we were forced to use tables and also small, typically single pixel-sized transparent images. So imagine if your site has hundreds or thousands of images with alt text “spacer” (they were used for spacing). And then using a screen-reader on this page (hearing “spacer”, “spacer”, “spacer” hundreds or thousand times). That’s clutter, right.
So please – do not have alt text on every decorative image you use and save precious time for your assistive technology users.
Web Accessibility Initiative (WAI) has made a simple decision tree (opens in new window) that can be used to defining when an image has to have alternative text.
So what should we do if we want to provide images accessible for humans and robots
If image is not decorative – absolutely add alternative text to it. Best way is to add text inside “alt” attribute and limit it to approximately 125 characters at maximum, so that screen-reader users get short and concise information. Do not try to spam with keywords, as you know Google is clever enough to get it. Use natural language.
I’ve seen Google recommendation that practically all images should have an alternative text inside alt attribute (opens in new window). So no wonder why our SEO expert added it to the checklist. But then again – they did not even mention the difference about decorative and non-decorative images on the page. And they really should. But OK – I guess they have their own agenda – it most definitely is a good thing for a search bot to be able to parse alt attribute and “understand” the image.
User testing with screen-reader users should really decide this if we are honest. And it should be made per article. Sometimes ambient images do convey additional tone of voice or maybe add to context and then the user might want to hear the alternative text and sometimes it would just steal precious users time.
Sometimes we need to user test if the ambient image should have alternative text or not. If image adds to tone of voice for example it may be useful for users of assistive technologies to hear about it.
it really depends sometimes. Decorative image adding some subtle context may need alternative text…
So – there is maybe a way to have good SEO and accessibility at the same time – let’s have your alt attribute with text you want and then add role=”presentation” to the “img” and screen-readers will skip the image and just ignore it but a bot will still be able to parse the info about the image!
