Accessibility Audit for Evidently Cochrane UK
As an assessment for the Inclusive Design module of my MSc, I performed an accessibility audit on 5 pre-defined pages of the Evidently Cochrane UK estate. The below is a summary of background and findings, the full client facing report is linked at the bottom of the page. Some of these suggestions were implemented on the website in August 2020.
Why worry about accessibility? Are there actually that many people that we need to pay special attention to that it’s worth our while as designers, developers, and product managers? You’d be surprised: visual and motor impairments are more common than often thought, in fact in the UK there are over 11 million people with a limiting long-term illness, impairment or disability (source).
There are of course laws that compel us to make adjustments and considerations for accessibility in our designs, but there is also the demographic and economic argument: the prevalence of disabilities rise with age, and in our aging society this market should not be neglected. In the UK, the combined annual spending on goods and services is estimated to top £80 billion - money that could be spent on your product.
With this in mind, I set out to assess the Evidently Cochrane online estate for its accessibility against the WCAG 2.1, Level AA. Below are the top three issues identified by using a combination of rigorous testing against guidelines, accessing the page with assistive technology (screenreaders), and html inspection.
Results
Keyboard-only access to website is difficult and not always possible
Keyboard access to a website can be essential for users with low to no vision who rely on a screenreader, as well as users with limited physical dexterity who may not be able to effectively control a mouse or trackpad.
1. Tab focus is low contrast and difficult to see - use CSS to increase padding and higher contrast colour
2. Tab focus skips items in the top-level navigation and comment submission box - use JS and CSS to ensure this and test in various zoomed in states to ensure functionality
3. Tab focus does not follow a logical order on the screen - ensure that a comprehensive site structure is in place, utilising both headings and landmarks
Inconsistent heading structure across estate can make navigation difficult for screen reader users
1. Page Title should be descriptive enough for screen reader users - it’s good practise to customize the title tags on each page of your website so that they accurately describe what’s on that specific site
2. Heading structure is missing or inconsistent - review the current application of headings and whether these actually have a purpose. For example, on the homepage every blog post entry is tagged as an h2 while the header ‘Latest Articles’ is h3. The section header should always be higher in the hierarchy than the entries below it.
Tip: Once you have a logical structure and individual areas, use ARIA landmarks based on the content in those areas, and ensure correct and consistent labeling. ARIA landmarks are a useful tool to enhance the semantic structure of a website by conveying structural information to keyboard or screenreader users.
Contrast ratio guidelines failed on several occasions, which may cause issues for users with colour-blindness or impaired vision
Contrast and colour use are vital to accessibility. Users, including users with visual disabilities, must be able to perceive content on the page.
The shade of blue that is currently used across the Evidently Cochrane estate for both section headers as well as link indicators, among others, doesn’t contrast well enough with the page background and header font (both white). The green used in the search bar also doesn’t prove enough contrast for white font. The grey used for field labels in the comment box equally is too light.
Tip: It’s good practise to always use a contrast checking tools when defining the visual language of a website. WebAIM provides a useful online tool that can be used in most browsers.
The full report can be found as a pdf here.