Creating Accessible Websites
Inclusive Web Design
My 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?
- Use text as well as colour in their chart,
- Use colours that have a greater contrast,
- Use different patterns as well as colours.
Ikea 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.
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.
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
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.
- Include a “skip nav” link at the top of long lists of navigation. This can be positioned with CSS to the left or right of the screen so it is not visible to sited visitors but can be read by a screen reader.
- Use separate CSS stylersheet to format the site and check that the site is readable in the correct order when CSS is turned off.
- Include meaningful alt text on all images and don’t use images for positioning.
- Include scope atribute in tables
‹th scope="col"›Heading 1‹/th›
‹th scope="col"›Heading 2‹/th›
‹th scope="col"›Heading 3‹/th›
‹td> Row 3.1‹/td›
Heading 1 Heading 2 Heading 3 Row 2.1 Row 2.2 Row 2.3 Row 3.1 Row 3.2 Row 3.3
The screen reader will read: Heading 1: Row 2.1, Heading 2: Row 2.2, Heading 2: Row 2.3, Heading 1: Row 3.1, Heading 2: Row 3.2, Heading 3: Row 3.3.
- When creating forms make sure that your labels include a “for” attribute. ‹label for = “firstname”› First Name‹/label›‹input type=”text” name = “firstname” id=”last name”›. Read Accessible Contact Forms for WordPress for more information about using form plugins.
- Ensure that your site design does not fall apart when text size is increased.
- Provide good colour contrast between text and background.
- Do not rely on colour only to provide meaning for charts and maps. Include words numbers or patterns to enhance meaning.
- Check that your site is readable for people who are colour blind.
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.
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.
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:
- Ensure that clickable areas are large enough for people to easily find them and click on them,
- Avoid complicated layers of drop-down menus that require fine control to access,
- ensure that your web site is accessible by keyboard only or mouse only,
- If pop-ups are necessary on your site ensure that you have a close button that is large enough for someone with limited coordination to access,
- Line up form fields vertically rather than horizontally,
- Ensure that radio buttons and check boxes can be accessed by the tab key.
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.
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.
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.