Embracing accessibility

No developer sets out to make their web content challenging to use, but accessibility can all too often end up low on the priority list. Features, bugs, content and a host of other concerns tend to fill up a developer’s plate first.

It is easy to overlook the needs of others who interact with the web differently from you. It can also be difficult for a user interface designer to throw away their beautiful, pixel-perfect layout and take a fresh look at the page structure.

For example, this is what our Epic Forest demo site looks like with all the styles turned off…

… but someone using a screen reading tool is probably not concerned with how pretty your page looks – it’s all about the content and how it fits together.

Web developers have to juggle a wide range of different media – big screens, small screens, touch screens and print. Accessible design can be thought of as another medium in this list that needs to be supported and tested.

GOV UK Design System

For our AdviceAid SelfServ module, it was clear from the outset that accessibility needed to be foundational to the development process. We opted to use the GOV UK framework to provide the look and feel for the app, which gave us a head start on accessibility support.

GOV UK provides us with:

1. A set of robust user interface components, which are backed up by real-world user testing (link).
2. Background information and methods to assess a site’s accessibility credentials (link).

Modern Testing Tools

In addition to the info provided by GOV UK, we sought out automated testing tools compatible with our app. We use the Angular framework for our UI development – a modern web framework which provides a fluid and user responsive experience and works especially well for mobile devices. We love embracing cutting edge technology but found that Angular apps cause problems for testing tools commonly used for accessibility audits.

We had to find a testing solution which works on the currently rendered page as it appears in the browser. Thankfully the helpful folks at Deque have done just that. They offer a great tool called Axe, which we believe should be part of every web developer’s toolbox.

Automated testing has helped us comply with the technical aspects of the WCAG accessibility specification, but such tools can never answer the question “Can the user find the information they need?“. We have found that there is always a place for regular user testing in conjunction with our automated tools.

Other People’s Shoes

We are proud to have rebooted our development workflow. When we started, accessibility was just another box to be ticked, but the process of learning and testing has been humbling. We have now learnt to embrace high standards, and hope that our tools are making a positive contribution to a more accessible web.

If you have any suggestions about how we have can improve our accessibility credentials, please take a look at our demo site and then get in touch.