Digital inclusion and social impact are a major part of our work at Nexer, so alongside some of the digital projects, campaigns and user research work we do, we thought it would be useful to share some technical advice and resources to help people get started with accessibility testing. It's Global Accessibility Awareness Day on Thursday 19th May, so we put together the following eight steps for testing the accessibility of the things you're building.
Why does this matter?
Sadly, many people see web accessibility as specialist or a bit of a ‘nice to have’. We’ve all heard the same comments:
“How many people does that issue really effect though?” - Debra, 42.
“Looks fine to me” - Ross, 28.
“I don’t think that will ever be a problem” - Steve, 32.
When we talk about this topic we often think of the extreme cases. We think about the people with dexterity issues, we think about the people living with sight loss, we think about the (sorry mum) older people. It is of course good that we think of and include these people but it’s also very easy to forget that improving a site’s accessibility will improve its usability for everyone.
How often do you use the tab key to navigate quickly to the password box after typing your username? How often do you struggle to read something because the slightest glimmer of sun on your phone makes you ramp up your brightness to full whack just to be able to read some basic text? How often do you miss that tiny little cross in the top corner of the pop-up window because it’s just TOO DAMN SMALL?!
So yeah; web accessibility does affect you, whether you realise it or not.
“Great story mate, but I’ve just paid 100k for a website and it’s not accessible.”
Well don’t worry, I’m here to help.
At Nexer we understand that accessibility can sometimes be a hard sell, so we have built a simple testing checklist to help make the biggest impact in the shortest time. We’ve timeboxed this testing to two hours, so that you have an easier job when trying to sell the idea to shareholders or senior management (or whoever controls the cash).
Step 1 – Selecting a sample
In order to get the most out of the next two hours you’ll want to select a sample area of the site to run the tests against. Always try and consider the business-critical paths. Maybe consider using something like Google Analytics to find out which are the highest traffic pages. Typical examples might be:
- Homepage
- Contact Us
- Content Page
Don’t be tempted to select too many pages because you’ll end up either running out of time or compromising on quality on the pages you pick.
Step 2 – Run automated tools
Automated tools will identify a wide range of issues with just the click of a button. We recommend using a selection of automated tools to get as much coverage as possible. The WAVE accessibility checker, the AChecker accessibility tool and the suite of optimisation tools from SiteImprove are just a few that will give you some really good results.
In our work, we invite users with ranging abilities and digital confidence levels into co-design, prototyping and usability testing sessions, but there is real value in combining manual testing with automated tools.
Step 3 – Enable text re-sizing
Many users who are visually impaired don’t rely on screen reader technology. Instead, they may enlarge the text size on web pages to makes the text easier to read. To test this we use two different methods.
- Resize using browser settings: Using the built-in browser settings, the user should be able to resize the text across the page. This is used by most modern browsers and will be easily found within the browser settings
- Zoom text only: This Chrome extension is a popular accessibility add-on and will force the text to resize. We test this up to 200% zoom as per the Web Content Accessibility Guidelines.
Step 4 – Use tab indexing
For users who can’t or prefer not to use a mouse, who instead rely on tab navigation to use the site, we need to make sure that the tab index is logical and that the page is fully navigable using only the tab and the enter keys.
In order for users to do this successfully, some of the things we look out for are:
- Logical ordering (top to bottom of pages, left to right of page layouts)
- Maintaining good hover states so that users know where they are on a page
- Not missing out or skipping over any key sections
- The ability to bypass repeating blocks (e.g. the same header menu on each page)
Step 5 – Always add alternative text
Descriptive “alt text” should be provided for all images. It should be relevant and functional in relation to the content or purpose of the page. This can be tested by using the in-built browser tools or simply by hovering over images whilst running a screen reader. If nothing is identified or the description is unhelpful, then this doesn’t meet the accessibility standards. You are excluding users from the experience you intended when you added illustrative images.
Step 6 – Check the colour contrast
Text across the site needs to have a sufficient colour contrast ratio. The ratio will change depending on the size of the text. Although most automated tools will attempt to identify colour contrast problems, in our experience a lot of instances are missed. Colour contrast should always be included in your manual testing for this reason. Simply take a sample of the colour codes in question and run them through a service such as WebAim’s contrast checker to find out if they are accessible.
Step 7 – Build forms properly
Users should be able to able to complete and submit any form using a screen reader and the tab key. Instructions for forms that are read by screen readers should be clear and give context to the user. Mandatory/optional fields should be identified, and error messages should be clear, instructional and bring focus on the page. The easiest way to complete this test is to turn on the screen reader and complete the form without looking.
Step 8 – Think about pop-ups and modal windows
Obviously, this is not always going to be relevant to all website designs but pop-ups or modal windows can be one of the most frustrating accessibility issues on your site. When a modal window is open, the user should be able to tab through the relevant elements, but they should always be locked into the modal and should not interact with the parent page.
So, there are your 8 steps.
In conclusion
This is designed to be a short audit. This won’t help you find all the accessibility issues with your site, but it will make a big difference in a really short time. With that said, you obviously need to be aware of the outcome. As well as designing and developing digital things ourselves, we provide talks, training and testing to help you build better products. If you’d like us to set something up for the Manchester Digital community to help you improve your knowledge and skills in web accessibility, please get in touch at: hello@nexerdigital.com
