According to a recent survey, which I read about on the BBC web site, the vast majority of web sites do not adequately cater for those with visual impairments.  That’s not exactly surprising, given the visual attractiveness and functional elegance of some JavaScript and AJAX accessories, which many people are now using to pimp up their web sites.  Creating a web site that is modern, attractive and usable, whilst keeping it accessible, is a huge mountain to climb.

So what makes a good accessible web site?  Well, CSS and HTML compliance is one of the first that should be tackled, as making something that follows those guidelines will certainly be most of the way towards being a well-designed web site.  One of the biggest frustrations of the visually-impaired is images without adequate descriptions – when you can’t see, it’s useful to know what it is you’re not seeing!  The second most important asset is being able to scale the page so that those with limited sight can make everything really big and easily readable.

On the one hand, this *should* be something that every good web designer does without thinking, but all too often when trying to create a specific look or design we slip into the trap of using fixed width components and using JavaScript to help us in creating the exact effect we’re looking for.  Then again, it could also be said that being able to create a good-looking web site that is accessible is what separates a good web designer from a beginner using Frontpage.  I have to hold my hand up and admit that I have fallen into the fixed-width trap all too often – this blog is set to 800 pixels wide (or something like that), the Diocese of Chelmsford web site is the same, and my web site is so fixed that it has a large background image providing the layout (although that web site is in desperate need of an overhaul at some point).

So, a few pointers for anyone out there doing web design.

  • Try to design your web site to use percentages for widths rather than absolute values, and let the browser take care of the text wrapping.
  • Boxes with rounded corners are lovely, very Web 2.0, but if possible try to make them flexible horizontally as well as vertically (unlike the ones on this blog which only expand vertically).  There are plenty of tutorials explaining various approaches for this.
  • When setting text sizes, *always* use em values rather than px or pt.
  • tags have an alt=”” option – use it!
  • Don’t overuse JavaScript, especially where it’s the sole method of navigation or where the same effect can easily be done just with CSS – drop down menus and hover effects can all be done with CSS far more elegantly than with JavaScript.
  • Don’t use tables for layout – tables are for tabular data, not layout.  CSS can handle layout far more elegantly and is far more flexible too.
  • Check your web site for HTML and CSS compliance using the W3C checker – it’s well worth the time getting your web site to work correctly.
  • Flash is evil.
  • Now that IE7 is available, and as more people begin to use it, we can make better use of transparent PNG images and fixed positioned divs.

Rant over. 🙂

Categories: Technology

1 Comment

Luke · 12 December 2006 at 6:53 pm

Think of the colourblind people!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.