By Daniel Vidoni
"The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect."
- Tim Berners-Lee, W3C Director and inventor of the World Wide Web
After the fall of Rome in 476 AD the world descended into a thousand years of darkness. Knowledge and technology were utterly lost and fear and superstition reigned supreme.
Thankfully, in 1450 Johann Gutenberg invented the printing press and all of a sudden everyone had access to information traditionally locked away in libraries accessible by an elite few. This transformed the Western world and ushered in the Renaissance. Our modern technological world is a direct result of the rebirth and sharing of knowledge.
Everyone has something to offer
By making information accessible to all Gutenberg allowed the construction of a knowledge network between scholars, writers, explorers, and everyone else who could read or write. It expanded our combined mental power as a species in a similar way that brain cells networked together create consciousness.
The more cells, the more interconnections, the more possibilities. Every cell has value and something to contribute, it just needs to be given the chance to connect up with the cells around it in order to do so.
Accessible information and the Internet age
500 years have passed and we now have the Internet to share information and ideas at the speed of light. I'm taking advantage of that right now by presenting this information to you.
But if web sites sitting on the Internet are not accessible to everyone not all the cells will benefit, not everyone can connect up, not everyone can contribute and learn and be part of the collective consciousness of which the Internet is a part.
Accessibility is good for everyone
By restricting information access we loose potential opportunities for new knowledge and idea to flow from certain sectors and in incalculable ways compromise our future. Can you imagine the outcome of not teaching Einstein to read?
Also, it's just a matter of time before we all grow old and become impaired to some extent, or perhaps we'll suffer injury. We may currently have friends or loved ones with a disability.
It often takes the most minor adjustments to the environment to unlock the world for these people. So why not do it? Here are two reasons I've come across:
- A lack of understanding of the issues and nature of disability
- A philosophy of "it will only benefit 5% of our clients" so it's not worth the added cost or trouble
The first of these points can be addressed through education and by encouraging the willingness to improve things for the benefit of everyone. I am attempting to do this right now; your are helping me by reading this - thank you.
The second point is covered by the facts that it doesn't cost more to make things accessible - it just requires a bit more thought, and secondly that it benefits everyone not only the visually impaired.
Try navigating an accessible site and you'll find it a pleasure to use, even if you are tired and in a hurry the site will make it easy for you to get around. Accessible sites don't discriminate against anyone - they are more accessible to everyone - they are also more accessible to search engines!
Accessible web sites
Firstly, let's define what an accessible website is: An accessible website is one that is compatible with access aids (screen readers), and is able to be transformed into an alternative format if required by the user.
A website can be defined as being a container of information. Web designers go to a lot of trouble to present this information to their users in a consistent fashion.
Many designers are artists with clear visions of how they want their web sites to appear - to the exclusion of all other factors. They forget what a website is for and who it serves. They are often young, use the best equipment and have no vision impairments. They don't really understand what it is like to not have anything less than 20/20 vision.
A simple vision test
If you're a web designer reading this, I suggest you get up from your desk, walk away from your 19 or 21 inch monitor and try to read this from a metre away. If you can't, no problem, just resize the fonts in your browser to 'larger' or 'largest' and you should be able to read it just fine from that distance.
A simple co-ordination test
Adjust your mouse settings so that your mouse becomes super-sensitive or use the mouse with your non-mouse hand. Now try and navigate the Internet and use your computer as you would normally. It's a nightmare! This is what it's like to have reduced coordination, limited strength, or a wide variety of neuromuscular conditions affecting motor control.
A final test
If you have one of those fancy monitors that pivot, turn it upside down then try and work with your computer. If you don't have a pivot monitor, use a mirror to reverse the image of your screen and try to operate your computer through the mirror. It's very difficult. This is something like having dyslexia.
I don't give you these tests to be mean or difficult but to give you insight into another world. A world with a higher level of difficulty. A world with additional challenges on top of all the other challenges which we face. As designers and engineers we have the ability to lessen these challenges, as human beings we have a duty to do so. As we benefit from the work done by past generations, so future generations will benefit from improvements made by us.
So what can we do to make web sites more accessible for the disabled? Read on and find out. If I've missed anything please let me know! I'm always looking for new and better ways to do my job, and to make the world a better place - especially if it costs me nothing!!!
Contrast refers to the difference between the brightest and darkness parts of an image. Black text on a white background is very high contrast, that is there is a very great difference between the words and the background allowing them to stand out and be clearly defined as separate. This makes the words easy to read.
If instead of Black text on a white background you had pale blue against a green background there would be very little contrast and it would be almost impossible to read even if you have excellent vision.
Therefore, always choose high contrast colours when constructing your sites.
Use complimentary and easy to read colour combinations. Complimentary colours are the colours "opposite" each other on the colour wheel. This gives them a good contrast.
Choice of background
Avoid overly cluttered or busy backgrounds. Watermarks have their place but can be overdone. If a watermark must be used it should be very pale or blurred so as not to interfere with the reading of the foreground text. When in doubt leave the background clear. Remember that the purpose of the website is to deliver information, not win an art award.
Use text alternatives or transcripts for multimedia items. If any of your content includes videos or audio interviews I suggest transcribing them into a text format which can be read. If your visitor is deaf they will not be able to hear the multimedia presentation, but they can read the transcript thus making it accessible to them.
This idea may seem a little bit lateral, and it is, but if you can put yourself in your clients shoes for a moment you will get a plethora of ideas on how to make you website more accessible. Try turning off 'show images' and then ask yourself "how can I navigate the website?" Or, mute your computer sound and go through all of your website's media just as a deaf person would have to.
Most of what I present here is common sense when you think about it.
Use large buttons for your navigation and increase the mouse 'landing zone' for navigable items. Precise mouse clicks are difficult and annoying especially if you're in a hurry and know what you want to do. It's easy to miss click and end up in a different place if your navigation uses bunched-up teeny tiny text. Also, frequent visitors to your site will know their way around so again - allowing easy stabs at your navigation buttons benefits everyone.
Use of accessible fonts
Use browser rescaleable fonts. There is absolutely no reason not to do this. It is a no compromise solution to accessibility. Just define the base font size and let the users browser to do the fine tuning based on the user's needs. Use browser rescaleable fonts in the navigation bars wherever possible.
Take advantage of cascading style sheets (CSS) to abstract the website's appearance from its content. This allows users to plug in their own style sheets overriding the original and allowing them to choose the contrast and colours from their stylesheet.
Long horizontal runs of text are difficult to read and if the line spacing is too tight it's easy to lose one's tracking on the return sweep. Space out your lines, use 12 point or greater font size this makes the text easier to read.
Avoid too many different fonts. Two fonts should be enough, three is a maximum. Also avoid too many font sizes, again two should be enough. They should all be browser rescaleable.
Try to avoid clutter, poor contrast, and any visual noise which can interfere with reading the content which the user has come to read.
Make sure there is adequate space around images. It is easy to wrap text neatly around images but if they wrap too closely the text and image can become blurred together. Space them out and make them distinct and separate.
I have listed some of the many ways in which web sites can be made more accessible to not just people with disabilities but everyone. There is absolutely no reason why all web sites cannot be aesthetically beautiful, functional and also accessible.
I throw down the gauntlet here and now to all designers, architects, engineers, and leaders to make our world as accessible as possible, as fair as possible, as civilised as possible, as human as possible for all future generations.
What? I ask for too much I hear you say?
Ok, for now we can concentrate on accessible web sites.
Further reading and resources:
- You can read the WC3 Web Content Accessibility Guidelines by clicking here
- Use 'Bobby' to test your site's accessibility compliance by clicking here