5 rules of thumb for an accessible website!
Accessible design
Responsive design
contrast
Clear definition
Text
Why bother making my website accessible?
Having an accessible website is essential to ensure that all users, regardless of their physical or technological limitations, can access and interact with content. An accessible website not only improves the user experience, but it also opens up to a wider audience, which can lead to increased traffic and better brand perception. Furthermore, it’s a step towards complying with legislation and guidelines that focus on promoting digital inclusion. In this context, it is not only a technical necessity, but also an ethical choice that shows consideration and responsibility towards all users.
There’s many websites that can be used to check accessibility! These include Wave and Google Lighthouse
https://wave.webaim.org
https://developer.chrome.com/docs/lighthouse/overview/
It’s always a good idea to use these tools to test your website, it’s an easy way to find any errors that have been made! It’s also a good idea to test the website yourself, can you still use your website if you try only using a screen reader?
WCAG (Web Content Accessibility Guidelines) is a set of guidelines that help make web content more accessible to people with various disabilities. The goal is to ensure that everyone, whether they have visual, hearing, motor or cognitive challenges, can access and use web pages effectively. WCAG focuses on four main principles: content should be perceivable, usable, understandable and robust.
1. Accessible design
It should be possible for everyone to use your website, so it’s important that people who use assistive technology can also easily use your website. This means that screen readers should be able to be used on the website. This can be done by using semantic HTML (https://www.w3schools.com/html/html5_semantic_elements.asp) and by using alt text on images that give screen readers a description of the content on your website. This also means that text on images should be readable with a screen reader.
You should also be able to navigate through the page using only your keyboard. This means that elements that can be interacted with should be pressed without using the mouse. This means that you can use tab to switch between elements and use enter to interact with the element. (https://webaim.org/techniques/keyboard/)
It’s also a good idea to make sure you can zoom in on the website and still be able to use it. People with poor eyesight often zoom in to get a better view of the website. (https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1)
2. Responsive design
Your website should be usable on all platforms, including desktop, tablet and phone. Make sure your design looks good and is still usable regardless of the device being used.
3. Contrast
It’s important to have a good contrast between foreground and background elements. If the contrast between the background colour and the text colour is too low, it makes the text difficult to read. Here you can use tools like https://webaim.org/resources/contrastchecker/ that helps you check the contrast. It’s important to check if the contrast is still there in both light and dark mode!
4. Clear definition
5-8% of men are colour blind and 1% of women are colour blind! Maybe that doesn’t sound like a lot, but imagine losing out on 5-8% of your costumer base for something that’s easily fixable!
To make your website more accessible to people with colour blindness, it’s important to explain what the elements do by using more than colour. This can be done by describing what the feature does.
5. Text
10% of the global population have reading difficulties!
Make sure your text is easy to read! As mentioned above, both contrast and size are important, but it’s also important that the font itself is readable. Including line spacing is also important to consider. But it’s not just the design of the text itself that’s important! It’s also important that the content itself is easy to understand.
