Web Accessibility And Images

Oft used to represent accessibility, if I hadn’t just told you that what would you assume the above picture actually means? This is false simplicity, where “designers’ blindly assume everyone knows what an icon means.

A common issue on websites that should be a relic of the past is how improper coding of images hinders accessibility. On-screen readers (software that reads the page aloud), braille readers, alternative navigation, and so forth the placement of presentational images in the HTML and lack of proper code for the content images results in a poor user experience.

In fact, done poorly they are an accessibility violation under the Web Content Accessibility Guidelines.

What Are Presentational Images?

Also called “decoration”, “design”, or “template’ images, these are decorations that are not part of the content. They range from images used to make styled borders, to icons and logo’s used to represent controls, company names, and other such presentation. That is what distinguishes them from “content images”.

Whilst many such images have gone the way of the dodo with CSS 3’s increasing ability to handle such things without images, there are a lot of cases where we still end up resorting to them.

What’s Wrong With Presentational Images?

In and of themselves? Nothing! Like a great many things on websites it isn’t the concept that’s the problem, it’s the implementation. Applied improperly they can confuse non-visual users, and…