What is accessible web design and how can it be achieved?

The internet as a medium has the potential to be very accessible. Telephones can alienate the deaf/hard-of-hearing, and television can alienate the blind/visually impaired but email and the web are great tools for people of all abilities.

The inclusive nature of the web

For a deaf person the web poses little discrimination, websites rarely rely upon sound for users to interact however, websites do rely upon sight because users have to read instructions and content, not to mention, see images conveying information. This problem can be overcome with a screen-reader (which can also help visually impaired users with computer applications like Word, Outlook etc).

As a screen-reader overcomes that problem. Then that’s it, we can just make our websites and not worry about any accessibility issues can’t we? Well no, we can’t. It’s important to understand this issue so that barriers aren’t placed in the way of disabled people (that don’t necessarily stop them from using our websites but do frustrate and annoy them to the point where they don’t wish to use them).

The issues

  • images
  • links
  • colour

Today I’ll be dealing with images.

Accessible Images on the web

Images that convey information e.g. road signs or icons are helpful to the sighted but not to the visually impaired. If you place an image on your website you should note if they are conveying information and if so, add meaningful alt text.

Alt text’s purpose is to give a text alternative to the image. If the image doesn’t have any meaning e.g. it simply looks pretty then give it an empty alt tag.

<img src="/img/myimage.jpg" />

In my opinion, this shouldn’t be necessary as the browser should take care of this but, if you don’t add the empty alt tag (alt=””) to your image the visually-impaired user’s screen-reader will read out loud ‘myimage-dot-jpg’ to the user. This is a real problem if the website makes this mistake multiple times on many pages.

The empty alt tag can also be applied to an image if information is conveyed but the image is surrounded by text with the image merely acting as support for that text. In this situation, meaningful alt text may just be doubling up on the information on the page.

What is meaningful alt text?

If the image conveys meaning then express that meaning in the alt text. Don’t spend time describing images in the alt text – that is rarely helpful. If the image is a graphic display the price of an item for sale on your site maybe the alt text should be:

<img src="/img/myimage.jpg" alt="My Product Name: £19.99" />

You see it’s that simple. Using alt text correctly is easy and makes your websites much more accessible.

Comments are closed.