Making Bulb accessible - introducing the new Bulb site
By Heydon Pickering, inclusive designer at Bulb
At the end of last year, Bulb pledged to significantly improve the accessibility of the site. This is important work. Energy is not an optional product - we all have to heat and light our homes. So, when Bulb asked me to help them make their site accessible I was on board straight away. Since the start of the year I’ve been working with the team to do just that. This post is an update on what we've done so far, including re-launching a brighter, better, more accessible site.
When accessibility and design work together
Making a website accessible starts with how you design the site. It's very difficult to add accessibility when the design work has already been done. When I started working with Team Bulb on accessibility, the team were developing a pattern library for the design of the site. A pattern library helps to give a site consistent design by having ready solutions for common design problems. It’s made up of several defined components which define how certain pieces of information are coded and look on the page. This is a great place to jump in from an accessibility perspective.
While we were building the pattern library, we were able to make sure all the components that make it up are accessible. We built a number of new accessible components which can be used across Bulb’s site. This means that the work we’re doing will live on as the site changes and develops. Because we’ll be using the pattern library to design pages, any new page will be consistent with the rest of the site, and accessible too.
Putting this into practice with the new bulb.co.uk
Having embedded accessibility into our design practice, we set about putting this into practice in real life. The first place we’ve implemented accessible components is on the new and improved bulb.co.uk, launched this week (hurray!) One way of getting an impression of how well a web page supports accessibility is to use the Lighthouse browser extension from Google. After our recent work, our score stands at 97% (taking the homepage as an example). This is up from 75%. And it’s significantly higher than any of the Big Six energy companies. However, not everything we've done can be picked up by this tool. We've done our best to make the experience of using the site simpler and more ergonomic for people with disabilities too.
One example of how this works in practice is how we’ve implemented error messages which display when someone inputs incorrect information, for example by putting an invalid postcode into our ‘Get a Quote’ tool on the homepage. The error message that displays when this happens is now screen reader accessible and uses warning icons that are easily identified as errors to folks with color impairments.
Some challenges were harder than others. One of the most interesting challenges so far has been to invent an accessible solution to the site's generator map, which allows you to explore the renewable generators Bulb works with. Simple visualisations which have static imagery can easily be made accessible by using alternative text, which is read by a screen reader. Interactive visualisations are much trickier. Our solution for the generator map was to mark up the location pins in the map as a list of buttons, which are accessible by a keyboard using the Tab key. Many people rely on the keyboard to navigate pages because they are not able to accurately or comfortably control a mouse.
You can see how interaction by keyboard works in the animation in the video below. Mac OSX’s Voiceover screen reader speaks the information for each generator selected as a map pin:
Building with users in mind (and in the room)
To make sure we’re on the right track, we’ve been inviting research participants to Bulb’s testing lab. It’s really important to have the people we’re designing for in the room, testing the things we’re building.
For example, we learned in a recent session to be more descriptive of decorative images. Even though they may not be of much interest to blind users, partially sighted users running screen reader software sometimes like to know about the detail in these images that they are struggling to see.
As well as our research participants, the enthusiasm for accessibility across different teams at Bulb has helped to make this a success. The dialog between designers and engineers, which helps fit pieces together, has been really open. This is quite unusual. For example, when we were discussing how forms would look and be interpreted by screen readers, I was able to stress a need for a bold and clear visual design, and discuss ways to make the input code accessible too.
Where we go from here
Of course, there is still plenty to do. Next in line is to make our join site (where new Bulb members can get a quote and sign up) accessible. And to do the same for the Bulb Blog. Because we host the blog using a different platform, it missed out on the recent accessibility upgrade. These two things are our next priorities.
As well as that, I’ll be working a lot more on automated and manual testing processes so we can keep ourselves in check. For example, I’ve written a script to help our quality assurance team check that components don’t break when the user zooms the web page. If there’s an issue, the component would need to be redesigned. Many users zoom web pages, including those with impaired vision and others who want controls to be more easily pressed by touch.
What we're excited to share with you soon is not just something technically more accessible, but also more attractive and ergonomic for everyone. But we can't do our best work without feedback, so if you spot anything amiss on the new marketing site, or you are interested in become a research participant — please get in touch! Drop us a note on email@example.com.