Designing and developing an inclusive, accessible digital audio solution

Re-platforming RNIB Connect radio with an accessible new audio player, as part of a wider site re-design

Overview

As part of our wider website re-design project with RNIB (Royal National Institute of Blind People), we collaborated closely to build a new audio player to support moving existing audio content from a subdomain onto the main website.

The challenge

One of the key priorities for RNIB was to migrate their existing audio content and integrate their radio station, RNIB Connect, into the new website. The radio content had lived on a separate subdomain on the existing site, but they wanted to integrate all digital services into one domain to provide a more cohesive user experience.

RNIB’s Connect radio is listened to by around 90,000 users per month, with many users relying on screen readers and keyboard navigation, so it was crucial we translated the existing functionality effectively, while making sure the player was compatible with assistive technologies and usable across both light and dark themes.

Working closely with the in-house RNIB accessibility team, we had to consider how to design and build a new audio player to tie in with the new website designs, while maintaining a streamlined user experience between the old and new platform.

Actions

The RNIB team had done some initial research into third party audio players, scoring them for accessibility and compatibility with their audio content. Together with the lead designer I reviewed the shortlist against our technical requirements and the available customisation options, noting any risks or implications for each.

We agreed on a shortlist and final recommendation of Video JS player, which we shared with the RNIB team. We then produced an initial prototype to test with their in-house accessibility team. We collaborated closely on several iterations of the prototype, testing with multiple pieces of accessibility software (including multiple screen readers, high contrast mode and keyboard navigation), making sure the UI was equally effective in both dark and light mode themes on the website.

Challenges

Through testing we found a few styling inconsistencies with the volume control scrubber between browsers, and especially in high contrast mode. The scrubber used a background colour for the volume UI, which proved an issue in high contrast mode where background colours are removed, rendering the volume control invisible. We tested a number of iterations, overriding the default styling to ensure we could display the volume scrubber as consistently as possible. Ultimately we decided to swap the background colour for a border colour, with a slightly different styling in high contrast mode. This meant compromising slightly on visual consistency to ensure an accessible experience.

Outcome