By Leah Ochroch, User Experience Engineer
16 July 2024
— 7 minute read
As designers, we all know that accessibility is important. We see the reasoning, understand common issues, and use many of the wonderful accessibility testing tools available.
Certain guidelines may limit our ability to achieve perfect accessibility standards on every screen, and access may be limited to some tools in work environments. Nonetheless, there are practical and active steps we can each take during the design process to ensure we prioritise and consider accessibility from the start.
Interestingly, products designed with accessibility and edge users in mind have been found to reach four times the number of intended customers. For instance, the electric toothbrush was designed with motor impairments in mind, yet today is much more broadly used due to the universal benefits it offers.1
This article will provide suggestions and examples of how to fold accessibility testing into each phase of your design process so that we can increase the possibility of everyone using our products effectively, regardless of their ability or context.
Person working with designs on a large computer monitor
Page layout is the most important and vital aspect of every design, bar none. It provides the literal and ‘physical’ framework from which all other design elements hang. It also sets the tone of the page and leads the users’ eye along a journey to the most important points and aspects of each design. As such, it’s important for designers to begin thinking of accessibility from the outset.
Before adding colour, proper text, or even greys - always, always, always make sure to take a step back when designing layout. That means adjusting your design to be at 100% scale and fit entirely on your screen vertically. If designed well, you should be able to locate important areas of your page and logically track through it with outlines of important areas alone. And remember that headings, if designed correctly, act as signposts. Think of them as physical boxes on the page, the same as any other.
Text, in any language, is vital to absorbing content. It communicates information, highlights important links, or even adds flair to a design. However, there are many common disabilities which affect people’s ability to read. For instance, it is commonly estimated that dyslexia affects the reading and writing ability of approximately three to seven per cent of the population.2 As such, it’s important to always keep it in mind when choosing and arranging fonts. Ideally, this would mean choosing an inherently user-friendly font, but as every designer is aware, fonts are often predetermined by branding efforts. As such, here are some dyslexia-friendly tips which can work for any font.
Keep kerning and tracking consistent throughout your site. Although it can be tempting to add oomph or variety to a consistent font by changing letter spacing, inconsistencies can decrease readability. This goes for large tracking and kerning especially – preferably, tracking will be approximately 35 per cent of character width, but that isn’t always possible.
Figure 1: Kerning is the adjustment of spacing between individual letters to achieve a visually harmonious result. With no kerning, the space between the edge most points of each letter are equidistant, which creates an unbalanced result.
Figure 2 - Tracking refers to equally adjusting the spacing between letters to affect visual density and is usually done after kerning. Larger tracking causes letters to be farther apart.
Make sure paragraphs and other sections of text have sufficient white space around them. Additionally, make sure your paragraphs and other sections aren’t too large. This will help those with dyslexia or frankly anyone, concentrate on sections of text more easily. Also interestingly, it’s easier to read black text on a light cream or beige background. So while this usually isn’t possible due to brand guidelines, having a slightly off-white background will help with readability as well.
The same spacing concerns also apply to line height/spacing. A good rule of thumb is this: if you blur your vision and the rows run together, they’re too close . And if it looks like each line is hovering in its own world, it’s too far. As a rule of thumb, Web Content Accessibility Guidelines (WCAG) 2.1 standards suggest that your line height be 150% of your font size.3
Also make sure to keep in mind whether your site will be translated and shown in other languages. Dyslexia will exhibit differently depending on the language, although many of the same rules of thumb will apply.
Colour, like headings, can add both flair and signposts to a design. But, for as many as 300 million4 people who are impacted by some form of colour blindness , colour can also muddy the waters. Insufficient contrast between different colours and backgrounds, or colours and text can cause individuals with visual impairments to lose their way when navigating a page. Many design programs come with built-in features to test colour blindness, so we heavily suggest using those tools when available. Generally, selecting colour palettes with strong contrasts is highly beneficial, as opposed to using just blues and purples or reds and oranges. However, there are still a few visual impairments which these tools do not test for, such as low visibility and achromatopsia (otherwise known as total colour blindness).
You can test for both these disabilities through your computer settings themselves . For low visibility, dim your computer's brightness and step away from your screen; ideally, you should still be able to discern all major parts of the page via colour, alignment, whitespace, etc. And for total colour blindness, you can go into your monitor settings and turn on greyscale. This will immediately tell you if your colours have enough contrast. Also, beware the white or black text on colour trap. Although it can be a great stylistic choice, text can easily become difficult to read due to lack of contrast. Where possible, make all your most important informational text black and put it on a neutral, appropriately contrasted background. You can still use colour on or behind headings; remember, they function as signposts just as much as they deliver information, so their designs are inherently more flexible.
Figure 3: How different types of colour blindness (protanopia, tritanopia, deuteranopia) would affect the visual perception of a palette of colours
Interactivity is essential for moving around websites. It enables users to explore at their will, open links to important documents, or even purchase items. As such, it is vital to ensure that buttons and links stand out. Previously in this article, we’ve discussed ways to test for visual impairments which might affect navigation, but now we’ll turn our eyes to some physical ones. Muscle instability and weakness is quite common, especially amongst older individuals; which can make clicking on proper buttons difficult. This especially becomes a problem when a page has many links in close proximity.
One practical tip to test whether your design accounts for users with motor impairments is to attempt to navigate around your design while simulating the challenges that these users may face. Practice clicking on a link in this exercise. How often do you misclick? If the answer is often, ask yourself why. Do I need more space around my link? Or does my link need to be larger? You can try this with both your dominant or non-dominant hand as well. Check that each clickable component is a minimum of 24 x 24 pixels, as per recommendation of WCAG 2.1 guidelines.5 Once you have your answer, you can make all the relevant changes.
Also , users with limited mobility will sometimes opt for using their keyboard over a mouse to navigate the screen. Another practical tip to test your design is to check whether you can interact with your screen using only the tab, shift + tab, enter, space, esc, and arrow keys.
The next time you sit down to design, I hope you can keep some of these accessibility tests in mind. It’s a big world out there, and the more people you can design for, the more people you can reach. Happy designing!
Find out more
