Accessibility means enabling people with disabilities, including those with age-related impairments to perceive, understand, navigate, interact with and equally contribute to websites and tools without barriers.
Some designers think that accessibility guidelines may hinder their ability to be innovative and produce attractive and eye-catching materials. This is both right and wrong. Accessible designs can be simpler but at the same time easier to digest by everyone not only people with disabilities. Think about it this way, a successful design is the one that can convey its message to the largest possible audience.
The accessible designs are particularly challenging when you want to adopt new features in your website design, such as drop-down menus and hidden action buttons or looking for a modern theme in your designs using mono colours or little to no colour contrast.
Photo 1 Example of drop-down menu
The do and don’t list can be complicated to designers who are being introduced to accessible designs for the first time but if you take it one step after the other you’ll find that it’s easier than you’ve imagined. Here’s basic guidance on how to make your designs accessible:
The first rule you should always consider is to create good contrast between the colours that you use in any design, whether for a website, online ads or print media. For example, don’t use light grey font on a white background or pink font on a purple background. This can be very confusing for a lot of people with visual impairments or Dyslexia. You should also consider that some people have difficulty distinguishing between red and green in particular so avoid using red text on green background or vice versa.
Here are a few more tips and tricks to bear in mind when creating designs:
- Don’t use colours as the only visual means of conveying information. A useful way to avoid this is to imagine your design in black and white. You should be able to recognise all the information within the design even if it was in black and white only. For example, if you filled in the wrong post code in an address input field, the wrong information will be highlighted in red, but for people who can’t see the red colour they won’t be able to recognise which field is the wrong one. Thus, an error symbol next to the wrong field is required.
In this example, the website highlights the wrong field in red. This might be visible for people with a good vision but for those with vision difficulties it’ll be a tricky task. Imagine the same form in only black and white:
As you can see now, it’s really hard to know which field is the wrong one. Imagine if you are filling your address or personal information in a website with 10 or more input fields, you’ll be really confused not knowing which field is the wrong one. The solution is to add symbols or descriptive texts next to the highlighted fields like this:
- When it comes to grey colour, always consider that the lightest shade you can use with big texts (24 px, 19 px bold, or larger) on a white background is #959595.
For smaller text, you should use no lighter than #767676 on a white background. If your background is a little grey itself then you should go with a darker shade.
Here’s a useful online tool that helps you choose the right colour for your designs to make it accessible to everyone: Colour safe. The second tool will help you to choose the right colour contrast between your font and your background: WebAim.
When adding text to your design, website or any print material always remember that the bigger the better. A rule of a thumb is the minimum font size you should use is 12 point. Sizes between 14 and 18 are preferable.
Avoid using decorative fonts that are hard to read and go for simple ones with clear upper and lower-case characters. You should also pay attention to the spacing between the characters; too small or too wide spacing will decrease the readability of your text.
The recommended leading for a text is no less than 25 to 30 per cent of the point size. The leading is the space between the lines of a text and it helps readers to move their eyes between the lines easily. Bear in mind that heavier fonts need more leading.
Choose fonts that have a medium weight for the body text and eliminate the use of bold fonts to the headlines or sub-titles. Avoid using light weight and italic fonts.
If you are designing a layout for a website, keep it simple as much as you possibly can. Avoid using drop-down menus that requires a lot of mouse movements as it can be frustrating to people with limited dexterity including elderlies and people with disabilities. Instead, opt for designs that can be easily navigated with only a keyboard.
Make all buttons descriptive; avoid using click here buttons as it’s not only bad for the accessibility score of your website but also for your SEO. Descriptive buttons help people who use a screen reader to navigate easily through your website.
Don’t rely on photos and videos only to convey the needed information. Add alt text or an alternative text to all buttons, photos, videos and sound files on your website to allow people who use a screen reader to understand the content of your website and get the information they need. This is also good practice to adopt to improve your SEO strategy.
Avoid forms without borders; all forms and input fields should have defined boundaries and a clear label to facilitates the navigation for users with mobility impairments and those with cognitive disabilities. It is important for people who use a standard or adaptive pointing device to know the size and location of the click target or input field. People with cognitive disabilities will find it difficult to find and interact with click targets without common visual cues.
Here’s an example of a website that doesn’t have clear input field boundaries.
To be accessible by everyone, the input field boundaries should be defined as following:
Try to avoid hidden action buttons or links that only appear when you hover the mouse over a certain object like the edit button that appears when you hover your mouse over your profile photo on a social platform. Having all the action buttons and links visible is important for people with motor-related disabilities, including keyboard-only users, and those who use speech recognition tools to interact with web pages. If links are not visible on the screen, the user won’t be able to find it and click on it.
For more information about accessible designs, read the UK government guidance on the accessible communication formats on this link.
If you have any question or need any help in making your website accessible, give us a call on: 0345 200 1185