Why should you make your website accessible?
You miss out on a big chunk of visitors.
According to a study 
of the World Health Organisation, about 15,3% of the world's population lives with some sort of disability. This is over 1 billion people worldwide. This figure does not take into account the temporary disabilities anyone can experience. You might break your dominant arm, or your vision might be deteriorated for a while due to an illness, excluding you from inaccessible web content.
Making your website more accessible, significantly increases the available market. This will, in turn, increase your revenue, making accessibility a financial benefit.
It the proper thing to do
Accessibility is about equal rights. In a rapid digitally evolving society leaving behind 15,3% of the population is just morally reprehensible.
It is (going to be) the law.
Since 1985 laws have been drafted and enacted all around the world. These laws impose standards for accessibility in function of mainly non-discrimination & accessibility laws. Throughout 2018, 2285 lawsuits have been filed in America accusing companies of inaccessible web content. This shows an increase of 181% compared to the 814 cases in 2017.
A European law enacted in 2016, obliging all digital services of the public sector to be compliant with the WCAG 2.0. There are no European or Belgian laws regarding web accessibility for digital services in the private sector right now, but a draft of a European law has been proposed for both public and private sector.
20 Rules of thumb for an accessible website
The WCAG website presents the guidelines to design your website to be accessible for people with disabilities such as: visual, hearing, cognitive and fine motor skill disabilities or epilepsy. Due to the large amount of information and the use of jargon it’s hard not to see the wood for the trees. Use these 20 rules of thumb to quickly learn how to make your website accessible.
1. Never use underlining for anything other than a link
Underlining is widely interpreted as and url. If you want to emphasise something, make it bold or place it in inverted commas.
2. Use the “external link” icon
This one:
This way the user will not be surprised when a new tab opens.
3. Always use the Alt-attribute
A screen reader is a tool commonly used by people with visual disabilities. The tool describes the interface using audio. When it detects an image, it will read the name of the image out loud. If you add an Alt-attribute to the Img-tag, the screen reader will read the text in the Alt-attribute.
4. Take care of your image descriptions
When you insert an alt-tag to describe the image, make the description vivid, precise and short. Limit it to 120-250 characters. If an image is not relevant, leave the Alt-attribute empty. The screen reader will then skip the image. Some tips for describing your images properly:
- Start with describing the most important element of the image.
- Next: describe something that is “In the background…” of “In the front…”.
- Think about localisation, they want to see the movement of the picture.
- Don’t be afraid to use colors or shapes because most blind people did see in a part of their lives
- Work with short sentences, simple but sophisticated, find that one word that conveys everything.
- Avoid comparing it to everyday objects because they can have many shapes.
5. Add text to your pictograms
Not everyone interprets an icon in the same way. Especially in other cultures or generations, symbols can have different meanings. Also for people with cognitive disabilities, adding text can make a big difference.
For example:
This icon of a floppy disk is no longer interpreted as 'saving' by younger generations.
An icon of cutlery might be interpreted as “food” for people in some cultures. Yet in some cultures, people don’t use cutlery to eat (cfr. Chinese chopsticks).
6. Don’t mix tooltip and alternative text
For the simple reason: a screen reader will read the text twice. On the website of Microsoft Accessibility you can see the description of the image in a tooltip when you hover over one of the images. Don’t make this mistake. This description is intended for people with visual disabilities. They do not see the tooltip, but they will hear the description twice.
7. Don’t put important text in images
The screen reader can only read text that is actually written in text, it can not read from image files.
8. Be careful with text over image
Don't do it or make sure the contrast is sufficient using this tool.
9. Do not use an image carousel
It cannot be adequately addressed by screen readers. And other reasons why not to use a carousel. If you insist on it, at least add a pause button!
10. Include the file extension and size in download name
The screen reader will read the extension and size out loud. The user can then decide if they want to download the file. Maybe they do not have the program to open the file, or the file is too big and will take too long to download.
11. Insert links in your text to support tab navigation
People with fine motor skills disabilities or visual disabilities might use the tab key to navigate through the website. The tab key navigates through the links. Make sure to insert links throughout the pages, that navigate to other pages of your website.
12. Don’t use more than 3 fonts
It’s just plain confusing. Errors in consistency might make people think they are on a different website.
13. Do not use serif fonts
It’s hard to read, especially for people with dyslexia. Experience what it’s like to read with dyslexia on this great website.
14. Use minimum 16px font size
It is proven to be the best readable font size for most people, including elderly people.
15. Don’t use more than 4 colors
The more colors you use, the more likely they will cause problems for people with color blindness. See your webpage through the eyes of a person with color blindness with the Toptal color filter.
16. Color contrast 4.5:1 normal text, 3:1 for large text and icons
The color contrast determines the contrast of the background and foreground colors of a text or icon. Large text and icon needs less contrast to be readable. It should be at least 3:1.
Small text needs more contrast to be readable. It should be at least 4.5:1.
Here is a very useful browser extension to measure the contrast. The tool I use is a desktop application. You can download it here: CCA.
17. Use patterns in your graphs
When the colors are hard to distinguish due to colorblindness, there will still be the pattern to distinguish the different fields.
18. Take care of your headers
They will be the guides of the screen reader. Make sure they are used properly.
19. Test with real users
There are many WCAG testing plugins out there. But remember that they can only test about 20% of the website WCAG standards. If you want to properly test your website, have it tested by users with real disabilities. Give them a specific task and ask them to describe their problems and take screenshots.
20. Check your content on readability
Ok it’s not the greatest looking website , but it does a magnificent job. Just paste your text in the text box and this tool will check the readability on 8 different readability scales and provide you with the consensus. The consensus of this blogpost: standard/average readers age: 12-14 years old. Not bad.
It’s not easy to meet accessibility standards. Therefore, stay active and go through this checklist every once in a while. Be curious, search the web and share your knowledge!
