Web Design, Blind Accessibility and Big Dot Framework 1.0
Not many people consider blind and visually impaired people when designing a website. Several years ago I was in the studio when the phone rang. The man on the other end of the line was Pervez Hussain, and over the next hour we discussed a web design project that would not only be one of the most interesting projects that I’ve ever worked on, but would change the way that I have designed every website since.
Pervez Hussain
It makes sense for me to tell you a little bit about Pervez. At a young age, Pervez lost his sight. For many people, going blind means a massive hindrance on what they can achieve. This was not the case for Pervez who, despite being blind, was able to successfully carve out a career in the Police force, deliver diversity training, become a spokesperson for Unison and Guide Dogs for the Blind, run the London marathon, write an acclaimed autobiography, become a prolific DJ and survive kidney failure.
The motivational speaking project
Pervez had achieved a lot, and overcome a great deal of adversity in the process. He now wanted to use his experiences to help others by becoming a motivational speaker. For that he needed a website, and that’s where The Big Dot Company came in.
Pervez only had a very small budget, but I was moved by his story and thought the project sounded interesting. You might think that designing a website for a blind person would be easy. In actual fact this would be one of the most challenging projects that I have undertaken.
Blind Accessibility
Too many websites try so hard to wow people visually, that they fail to cover some fundamental requirements that all websites should have.
Load time
Large, un-optimised images, flashy animation and tonnes of often superfluous JavaScript can mean that websites take too long to load. They might be fine if you’re users have a fast broadband connection, but they can be problematic for people with slower connections or older mobile devices.
I designed the site using a simple, responsive two column layout. The delivery of the content was optimised so the site had a very rapid loading time.
Clarity
Websites can use all sorts of stylish colours and typefaces and font sizes, which may look good, but how easy is the content to read if your user has a partial visual impairment?
Tools were employed, and tests were conducted to select the best typefaces, font sizes and colours. I also added a widget on the side of the page which allowed users to increase or decrease the size of the text to suit their own needs.
Screen Readers
People with very poor, or no eyesight can use screen readers, such as Jaws or the programs which come pre-packaged with Windows and OSX, to read out what is on the screen in front of them. Screen readers don’t just read plain text; they also access various meta-datas.
Alt Tags
Image alt tags are a meta data field, which for most people will only be shown if the image fails to load, but screen readers will read out alt tags as a way of describing the images. Many web designers fail to put alt tags on their images and often if they do, they’re something nondescript like “background image”
I was fastidious in making sure that the alt tags on Pervez’s website were a solid reflection of what the image showed, for example “Pervez receiving the Quality People award in 2012”
ARIA Compliance
Being able to read the content is one thing, but there are also measures that can be taken to make the site easier to navigate.
We used ARIA tags to help to the screen readers to know what part of the site they were looking at, for example the navigation menu or a contact form.
Testing
To test the site, I downloaded a trial version of Jaws and then began to try and use the site while blindfolded. This allowed me to make various tweaks to ensure the site was as accessible to blind people as it was to sighted people.
Conclusion
Employing all of these techniques on a web design project that isn’t intended to be used primarily by people with visual impairments would probably be overkill, however it did make me far more aware of the importance of making websites accessible to people with sight difficulties, and that has been reflected in every website that I have designed since.
This project became a framework for future design projects and has now been superseded by Big Dot Framework 2.0, which takes all of the good features from this project and builds upon them to become one of the most powerful and thoroughly optimised templates in existence.
