Making the web accessible again

Nov 25, 2012

A brief introduction about the small improvements we can all make.

Below is a phrase that you may have seen more than once, and yet more often than not web accessibility is almost an afterthought, instead of what should be considered a fundamental need.

The power of the web is in it’s universality
- Tim Berners-Lee

A HTML document at its very core is accessible. By introducing CSS we then introduce styling, and potential issues may arise here.

Let’s start with a quick example, here is some basic CSS:

 1 body {
 2 	background-color: black;
 3 	}
 4 h1 {
 5 	color: #333;
 6 	}
 7 p {
 8 	font-size: 12px;
 9 	color: #fff;
10 	}

I’m sure that the big issues will already jump out to some, but if you need a visual representation of how it looks, then you can take a look at the image below.

Example of poor colour contrast on the web.
Accessibility example

There are two big issues, and one which is debatable.

First up, the h1 colour, and the background colour of the page have very poor contrast, this is of course an obvious example, but what about the not-so-obvious? I think Jonathan Snook’s Colour Contrast Checker is invaluable, to help making sure you pass the AA/AAA requirements for your website.

A consideration (before I continue), comes with opacity. Please remember that if you have an image as a background, and overlay a caption with opacity (as an example), then be aware that the background image could have a negative impact on the colour contrast of the text.

Secondly, a font-size of 12px just doesn’t cut it. I don’t care who says differently!

At age 40, only half the light gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%.
- Kevin Larson, Reading Researcher at Microsoft

Lastly (unless I’ve missed something glaringly obvious), white text on a black background. I don’t use it personally, I find the strain too great for myself, but I have always been a fan of light backgrounds and darker text. However, I don’t believe it has any accessibility issues - and if it does then please correct me!

What prompted this post was a brief conversation with a colleague at Europeana, we touched on accessibility and I asked him if he could recommend any screen reader software that was free to use. He introduced me to Chromevox. After ten minutes I knew that this would be a tool that I will be using a lot more in the future!

This post is already long, but accessibility is not just about people with visual impairments, we need to consider other disabilities, deafness, motor or dexterity impairment, people with learning difficulties. We need to keep the web accessible, and stop breaking it! I am sure that it is only a matter of time before accessibility laws get tightened, and in the UK there are already legal proceedings

Just as people differ in the language, characters and cultures to which they are used, so they differ in terms of their capacities, such as, in vision, hearing, motor or cognition. The universality which we expect of the Web includes making sure that, as much as we can, we make the Web a place which people can use irrespective of disabilities.
- Tim Berners-Lee

Further reading: Web Accessibility Initiative