Every image should contain an “alt” attribute – even if it’s blank. No alt attribute is just wrong, but when should the alt be blank and when should it be informative (contain a description)?
Guidelines on this I believe would be constructive for those authoring themes, widgets, extensions etc.
There’s a WebAim Alternative Text Article
that’s fairly brief, informative and definitely worth reading. That article ends with this summary.
Despite being the biggest issue affecting web accessibility, there are still divergent and incorrect methods for implementing alternative text. By following the basic principles outlined here, web developers can make their web content more accessible to individuals
- Adding alternative text to images is one of the easiest accessibility principles to learn and one of the hardest to master.
- Alternative text may be provided in the alt attribute OR in the surrounding context of the image.
- Every image must have an alt attribute.
- Alternative text should:
- * present the CONTENT and FUNCTION of the image.
- * be succinct.
- Alternative text should not:
- * be redundant (be the same as adjacent or body text).
- * use the phrases "image of…" or "graphic of…".
- Appropriate alternative text depends heavily on the image's context.
- Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
- Decorative images still need an alt attribute, but it should be null (alt="").
The accessibility of the web in general would increase dramatically if alternative text were provided and implemented correctly.
The problem arises in our perception of what Google and other search engines want. Are they wanting to ignore images that are not functional (decorative only and respect the alt=empty) or do they try and harvest all information whenever they see an image tag
(and then penalize when they find a blank description).
Consider a couple of examples in the context of BlogEngine, where because an image may be inserted automatically and in a generalized way it can get tricky - what to do here:
Let’s say you have an author summary along with each post and that summary has markup for the author’s image.
<a href=”more on author”><img src="path to image" alt="Joe Bloggs">Joe Bloggs</a>
<a href=”more on author”><img src="path to image" alt="">Joe Bloggs</a>
The first has alt text and the second has blank alt text, which is best and why?
The first satisfies the condition in the summary above that the alt text should be succinct and present the content and function of the image i.e. it’s apparent that this is an image link to the post author and it’s good for Google because the image has a name
tag (the alt). But…
There’s another condition that states that alt text should not be the same as adjacent or body text. So in the first case the screen reader comes along and reads “Joe Bloggs, Joe Bloggs” twice, because it’s in the alt text AND in the link text immediately following.
In the second case the alt text is blank so the screen reader knows to ignore the image and simply reads the link text “Joe Bloggs” once. The image is inside a link with link text that describes the function of the image – but then the mind cogs start turning
and we ask how does Google interpret this image and plump for the safe option(include the alt description) – but are we right?
What about all those thumbnail images we include or can include for post lists, recent post and related post widgets etc. Do we need alt text in all those images or is it sufficient to have the alt text description in the actual post image – after all, Google
can get the alt text from that if it wants, so maybe the thumbnails just muddy the waters?
When you think about it, quite a lot of post or page images are plain and simply decorative. The system should by default enter alt=empty if you don’t supply alt text, which I suspect many people don’t (the TinyMCE post editor does this, not sure about the
For automated image insertion, I've changed code in my theme and any custom controls to give thumbnails alt=empty where you can be sure that the image is described by link text. This is very easy to code, but if wrong then its wrong multiplied throughout your
blog, anybody got any experience/thoughts on this?