Accessibility by design — how we made sure our new public website is accessible

Tim White
Digital BANES
Published in
4 min readJan 25, 2019

Hi, I’m Tim from Bath and North East Somerset council. One of the aims of our project to redesign our public website is to make sure that it is as accessible as possible and that we are not excluding users by designing something that does not meet accessibility standards. There are also new regulations on accessibility that every public sector website must meet from September 2018. In this blog I’ll be talking about how we build accessibility into our design, but also about how we make sure our new site will be accessible by testing with real users.

We are using a toolkit based on the GOV.UK Design System which will help us provide a consistent look and feel to the new public site. The GOV.UK toolkit has been through extensive user and accessibility testing so we knew that the concept was a sound one. We carried out a piece of work earlier in the year through Pilot Works to design a B&NES version of the design system which sets out the styles, components and patterns we will use. the toolkit was developed to be compliant to an AA level against industry standard WCAG 2.1. By using this as a basis we know that the colours, typography, logos, layouts, headers, footers, etc that we will be using are accessible.

We are also using a couple of software tools that help us establish whether our actual pages are compliant when all the styling is applied and whether the html we have used is accessible. We use something called WAVE to make sure that the pages are accessible when the styling is applied. This is a browser plug in and highlights any errors so that we can quickly fix them.

Example of WAVE on one of our new pages

We also use a tool called Validity to validate the HTML we have used. This helps us to make sure that the code we have used on a page is accessible before we start putting pages in front of real users to test it with them. Using these tools at the design stage does not guarantee accessibility; however it does allow us to tackle the most most obvious issues before we start looking at testing specific types of assistive technologies such as screen readers, magnifiers and speech recognition software.

Example of Validity highlighting errors with HTML

Automated testing is no substitute for putting pages in front of real people and understanding how they use assistive technology to access web content. Government Digital Services (GDS) have carried out extensive research into accessibility testing and recommend testing with a number of technology types and configurations to ensure that your site is accessible to the majority of people suing similar types of technology. These are the main types of technology used to access GOV.UK and testing against these should give a good level of confidence that the site will be accessible.

We have been able to make use of internal staff for accessibility testing, taking advantage of the diverse work force that we have within the council. This will be an ongoing process as we redesign the website, with regular testing as we design better ways of presenting complex information to people, and build better digital services to enable our residents, businesses and visitors to transact with us online at a time and place that is convenient to them.

Our first accessibility test focused on a user who has a screen magnifier (Zoomtext). Our testing was aimed at understanding how the screen magnifier was used, what challenges it presented to the user, and then testing some of our redesigned content with Zoomtext and understanding whether it improved accessibility. You can read more about the testing and what we uncovered in our testing report.

Next up we will be discussing content style guides, how we get the right tone of voice for the council, and how we can use the style guide to ensure consistency across our new website…and beyond.

--

--

Tim White
Digital BANES

Project Manager at Bath & North East Somerset Council