Inclusive Web Design
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.
My Niece 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 is 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 has 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.
Some people consider that the reason for making a site accessible is to prevent a lawsuit. 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 the alt attribute to label your images not only helps visually impaired people, but people who have images turned off on their browser. Choosing an 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
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 stylesheet 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 attribute in tables
‹table›
‹thead›
‹tr›
‹th scope="col"›Heading 1‹/th›
‹th scope="col"›Heading 2‹/th›
‹th scope="col"›Heading 3‹/th›
‹/tr›
‹/thead›
‹tbody›
‹tr›
‹td›Row 2.1‹/td›
‹td›Row 2.2‹/td›
‹td›Row 2.3‹/td›
‹/tr›
‹td> Row 3.1‹/td›
‹td›Row 3.2‹/td›
‹td›Row 3.3‹/td›
‹/tr›
‹/tbody›
‹/table›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.
Hearing Impairments
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
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 website 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 checkboxes can be accessed by the tab key.
Dyslexia
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 everyday 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 sans-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.
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 on 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.
Read more on Accessible Web Design.
Marketing Website Accessibility in the Age of Assumptions from Search Engine Journal.
Last updated 23 January 2020