This weekend was the third WordCamp in the UK, with the good and the faithful from the UK WordPress community gathering in Manchester to share knowledge, tips and experiences. I spoke twice during the weekend. This post is on the second of the talks “Building for Accessibility and Getting Ready for HTML 5“.

Do I need to ‘do’ accessibility?

The short answer is yes, you do, and for a number of reasons. Firstly, it’s a basic part of being a good web citizen. You wouldn’t ignore someone who came up to you in the street because they were blind or missing an arm, so why build your web site in a way that they can’t get access to?

The reality for most businesses (including in the UK), is that basic web site accessibility is a legal requirement. That said, the UK law is a bit muddy. By building your website to make it accessible on a broader range of devices, and via a broader range of tools and presentations, you give yourself a bigger audience. That’s just plain good business sense.

Accessibility leads to better design

The process of thinking through accessibility requirements leads to better design. When most people talk about website design, they tend to talk about visual design – the static appearance of the site. However, websites aren’t a static visual. We interact with them, resize them, view them on different browsers and discover them via search engines that view them as raw text. A basic accessibility check list deals with all of these things, and that means better design (in a broader sense, including interaction design) and also inherently includes search engine optimisation.

80/20 Beats 100/0 – Every time

There is a danger that in striving for 100% perfection, we end up doing nothing. When it comes to accessibility, I’d rather see people do something, and get it 90% or 80% (or even 10%!) right, than do nothing at all. That may mean some of what I say here offends the purists, but here’s the thing: When I first started looking at accessibility, those purists were the ones that put me off. The dogmatic demand for 100% perfection can result in people deciding that dealing with accessibility is too hard, or too expensive, and that is tragic. Basic accessibility is quick, easy and very rewarding.

Many Dimensions – No One Answer

Disabilities take many many different forms. From visual impairment encountered in old age, to motor issues from birth. Each has their own unique requirements. Sight, hearing, learning, cognitive, motor and mobility impairements occur with a range of severities, and in different combinations. My own experience is through dyslexia. There are many websites that I simply can’t “get a fix on” – the layout and design makes it challenging for me to read them and hard to understand how I am meant to interact with them.

There are many different assistive tools to help, from screen readers and text magnification tools, to input devices. As well as third party tools, most operating systems include universal access technologies. If you’ve never tested them out, fire up systems preferences or control panel and give them a spin. You’ll find screen magnification, black and white / text inversion settings, contrast controls, speech technologies and keyboard for mouse controls.

Em don’t Err

When websites are built, there are a number of different ways of specifying the sizes of fonts and devisions on the page. For many years web designers used pixels, but pixels are fickle things. They vary in size from machine to machine, and while it makes it easy to align text to graphics (which are sized in pixels), it means that you loose the ability to let the user’s view make smart choices about how to display your page. Enter ’em’s, which are more flexible and the preferred alternative these days. Building a page with ratios, rather than absolute sizes, enables users to use large fonts without breaking your site. Open up your favourite site and use the browser’s view settings to display it in a larger font. Does it still look ok? Then all’s good and well, but if the text goes off screen, or starts to overlap with graphics on the page, all is not well.

Choose Your colo(u)rs wisely

Colour blindness affects a huge portion of the population. Poorly contrasting, over opposing primary colour foreground/background combinations don’t only look poor, they are poor. Choose a sensible palette of colours that are discernible, even in black and white. Then stick to them.

Is a Text-Only Site the Answer?

The short answer is: No. While a text-only page can help, it is far from a full solution. In some cases, removing the images can make this worse. Well designed images can make navigation more intuitive, and provide important cues for people with reading difficulties. Good web-design separates decorative and functional images and places them in the style sheets or page HTML as appropriate.

Flash is Evil?

Apple’s Steve Jobs might like you to think so, but while the whizzy Adobe Flash animations slapped onto the front page of many sites have been an accessibility (and usability) nightmare, there is no reason for this to be the case. Adobe provide an excellent set of guidelines and tools to make Flash applications that are very accessible. It’s simply a matter of using them. Please make sure that you, or whoever you hire, does. Apple’s HTML 5 fuelled crusade against Flash is going to do little to improve accessibility – you are still embedding video, and still need to provide accessible controls and alternative content.

Run the Race Twice – Or Run it Once Well

There is a camp that argues for building a completely separate instance of your site to deal with accessibility issues. Personally I think that is a dangerous road. Firstly, it instantly doubles the amount of work involved in keeping your site up to date. Your site is completely up to date, right? Secondly, the result almost inevitably ends up with web pages that are trying to cater to Dave, with a reading age of 8, who is passionate about your products, and Sue who has a double first from Oxford and is partially sighted. It’s a result that is inevitably downright insulting to everyone involved.

Formal Guide Lines and certifications

The initial Web Content Accessibility Guidelines WCAG 1.0 received a mixed welcome.  The 2.0 contribution is a heavy read: http://www.w3.org/TR/WCAG20/, you could start with: http://www.w3.org/TR/UNDERSTANDING-WCAG20/, although I read the “understanding WCAG20” document, and didn’t understand that either the first time! You could also try: http://www.w3.org/WAI/WCAG20/quickref/. The documents are a challenging read and feel quite onerous. In the UK we have the Disability Rights Commission (DRC): Pas 78. It used to be a paid for document, but now you can download it for free via that link. Don’t lose the will to live when you read these things! I’ll come back to some easy first steps that you can take, the guidelines are for when you get serious about accessibility – which I strongly urge you to do!

LWOAM

“Life without a mouse” – from mobile phones to office workers with RSI, it isn’t just cats that are chasing the mice away. Understanding what it feels like to interact with your site without a mouse is a solid way to improve your site’s layout and navigation structure. Make sure you have access keys set (Twitter does!), that web forms have tab indexes, and that your site isn’t over reliant on hovers.

Some Simple Heuristics

As a very basic, minimal set of checks, here is what you can do in less than five minutes for your site or sites that you build:

• View it at your lowest screen resolution
• View it in black and white
• View it without stylesheets turned on
• View the page source

If viewing in any of those modes leaves you perplexed, then you probably need to fix it. Make sure your images have ALT text, and that the fonts on the web page scale sensibly and you’ll be making the web experience. There are some on-line testing tools (for example T.A.W.), although none of them are perfect or instant magic..

Coming up in Part II Web 2.0, HTML 5, AJAX and building for accessibility from the start…