Accessibility in Designing Digital Solutions

31 Jul 2018 - Michaella Fenton

Digital accessibility refers to building digital experiences that can be used by as many people as possible - this includes those who have a visual, motor, speech, cognitive or auditory disability. Consider that if we don’t design accessible solutions, we don’t design for 20% of users; leaving it as a second thought can lead to less effective applications and further issues down the line.

Successful accessibility goes beyond the technology itself. Taking into account wider factors, such as environmental, social, cultural and any other factor that may impair a user’s ability to interact with a product or service in a meaningful way.

The Social Model of Disability provides a framework through which to analyse this, as it suggests that a person is not disabled by their impairment, but instead by the way that society is structured. The model describes how society fails to account for those with impairments and that we should seek to remove these barriers - for example, helping an impaired individual live at home unaided by introducing features such as chair lifts and ramps to their living environment.

This goes for online and technical barriers too. As creators, we have the responsibility to ensure everyone can use our digital product, irrespective of their ability or cultural environment. The more accessible a website, the better it performs in terms of visitors and the more optimised it is for search engine results pages (SERPS)  - resulting in an improved user experience and higher search rankings.

Designing for accessibility may sometimes sound complicated, but often it just needs to be taken back to basics. Here, we outline the key areas to look at when designing a digital solution:

1. Use plain English

Keep the language simple, clear and concise. With 15% of adults in the UK described as ‘functionally illiterate’, research has shown that to ensure a website is accessible for everyone, it is best to write for a 9 year old reading age. Whether a user is scanning on their phone in a rush, has dyslexia, a low reading age, or is not a native English speaker - people are more engaged with simple content.

This is also the case for the geniuses amongst us. In a usability study conducted by Nielson Norman Group, they found that even highly educated users that are considered experts in their field, prefer concise content that is easy to scan.

2. Colour Contrast

One of the most common web accessibility problems is colour contrast between text and background. People with low vision can find difficulty reading text if the background colour has low contrast.

According to the Web Content Accessibility Guidelines (WCAG) the text to background contrast ratio should be 4.5:1 for 2040 vision and 7:1 for 20:80 vision. This also applies to images of text for example an infographic. As the purpose of an infographic is to convey knowledge and information, the text must be easily identified from the background.

WebAIM is a useful tool to test your website pantone colours for any colour contrast discrepancies.  

3. Navigable

A great looking website means nothing if users cannot navigate their way around it. Users should be able to find their desired destination simply and within a few pushes of a mouse or keyboard.

In order for a website to be accessible, enabling keyboard navigation is essential. Blind users or those with motor disabilities depend on their keyboard to access websites. One of the easiest ways to implement this is using ARIA landmark roles. Landmark roles are blocks of content that commonly appear on web pages. This includes features such as a website banner, sidebar, menu, and search bar to name a few.

Ensuring ARIA landmark roles are present enables the user to easily jump to the relevant section on a page. To apply landmarks, insert the desired ‘role’ attribute to your HTML. For example <div role= “banner”> for a banner or

for a menu. The main landmarks roles can be found on W3’s website.

4. Hierarchical headings

Headings contribute to the structure of a web page or digital application. Adding much more than just a slick looking title, headings outline both the visual and technical layout of a page. Those with certain disabilities may use assistive technologies such as screen readers to scan a page. If headings are used correctly, they will be able to read the page quickly to decipher whether it or not it is relevant to them.

Headings should be clear and descriptive and include the correct heading level. If a screen reader cannot be used efficiently on the entire website, disabled users may fail to complete an action such as buying a product or finding company contact details - resulting in loss of business and high bounce rates for the website.

At Orange Bus, we design and develop interactions for all users, ensuring we involve those with impairments in our user research. Our Quality Assurance team test our client websites and digital solutions to make sure web accessibility is consistently thorough. To find how we can help improve the accessibility of your company website, contact us using the form below.

How can we help?
Get in touch with the innovators at Orange Bus

Thank you, your message has been submitted.