Creating Accessible Websites

Inclusive Web Design

An example of a graph from Ikea that only uses colour to identify different statesMy Neice wanted to check the availability of a product in a particular Ikea store so she opened their website. For her, each of the colours on the chart (left) are the same because she is colour blind. You would think that a large company like Ikea would know about website accessibility. Approximately 9% of the population are colour blind to some extent.

So what could Ikea do to make their website make sense to the nearly 10% of their customers who are colour blind?

The colour in the graph is an olive green and difficult to distinguish from the other coloursIkea still have not made any changes to their site despite promising to do so. This is what the chart looks like for a person who is red-green colourblind (Protanopia) according to the Cobis – Color Blindness Simulator. There is very little contrast between the top colour and the bottom colour.

Good web design is inclusive. Right from the beginning consider making your site accessible to people with disabilities. It is easier to build accessibility into your site from the start than to leave it to the last minute to make changes. Making your site accessible to as many visitors as possible is part of creating a good user experience for your customers.

Accessible website mind map

Some people consider that the reason for making a site accessible is to prevent a law suit. In fact the only company successfully sued for accessibility issues was the Sydney Olympics Website in 2000. You can read more about this case at the W3C Web Accessibility Website.

A site that is accessible to assistive devices such as screen readers is also accessible to search engine spiders and will be considered favourably by search engines.

Using alt attribute to label you images not only helps visual impaired people, but people who have images turned off on their browser. Choosing appropriate alt attribute is not always easy especially for complicated diagrams. Alt attribute should be as short as possible to give a sense of what is represented in the image. If the information in the image is also available in the text a long explanation is not necessary.
top ↑

Technology that was originally created to meet a specific need of a person with a disability has flowed on to benefit the general public. For example Apple introduced siri to its iPads and iPhones developed from technology to aid blind users.

Visually Impaired Visitors

Labrador sitting with his legs out

Visitors with visual impairment include people who are totally or legally blind, visitors who need to make the text larger to be readable and people with some form of colour blindness. The following list will help these visitors when they view your site.

top ↑

Hearing Impairments

dummy hands making the word deaf in sign language

Making adjustments for people with hearing difficulties will also benefit people viewing your website in an environment where they cannot access the sound. Videos should have easy to read subtitles that do not block important parts of the picture. You should include transcripts for podcasts.

Any warning needs to have a visual component as well as a sound. Important sounds in games need to be accompanied by some visual element.
top ↑

Epilepsy

Blinking and flashing animations can trigger an epileptic fit in people who are prone to seizures. Flashing content at the least is annoying. You may want to use it to get attention but you are more likely to drive users away from your site.
top ↑

Coordination Problems

A dog with a bandaged paw

Your viewers may have either temporary or permanent coordination problems due to congenital conditions or diseases or a broken bone in a dominant limb. You can help people with coordination problems with thoughtful web design:

top ↑

Dyslexia

A dog looking at a laptop computer screen

Dyslexia is also known as alexia or “Developmental Reading Disorder” (Wikipedia). It is an inability of the brain to process certain symbols (Perspectives on Dyslexia). People with dyslexia often have normal or above normal intelligence  but struggle to relate the sounds of words with the combination of letters which make up the words. Some people will manage to function in every day life but may have problems reading and spelling while others are severely affected and can barely read at all.

People who are dyslexic need to concentrate to a greater extent on reading than those who do not have the condition. Flashing images can be a great destruction.

Another irritation is slide shows with writing that flick through too quickly for someone with dyslexia to read. A simple fix to this problem is to give the control to the user and do not automate the process. If you have a slider on your page extend the time that each slide shows to allow extra time for slow readers.

Research has shown that san-serif fonts are easier to read on screen than serif fonts. Serif fonts are those that have a little tail on the end of the letter as can be seen in the illustration below.

An example of san serif and serif fonts

Choosing a sans serif font will benefit all your readers but particularly people with dyslexia.

Justifying your text may make your page look neater but it can cause problems for some viewers. Justification can lead to “rivers”of space running down the page causing a distraction for your readers. Hyphenating long words at the end of a line can also pose a problem for your readers.
top ↑

Conclusion

Website accessibility is an important consideration when constructing and maintaining your site. Be considerate to people with disabilities. Our population is ageing and the number of people who have some form of disability is increasing.

Many of these steps do take a bit of extra time, but by including them in your website, a greater number of people will be able to access and enjoy your site. Accessible sites are also more likely to get better rankings in search engines because the content is readable by search engines.