Web accessibility examples: 5 sites doing it right

By James Sheasby Thomas

There are financial, legal, and moral drivers for ensuring your site is accessible. Here we look at five great web accessibility examples to show you how to design inclusive products and services.

If you need a primer on web accessibility, do check-out our web accessibility checklist to better understand the business case for accessibility and how to get started.

Now let’s take a look at some of the sites doing it right!

1. Scope

Scope.org.uk, the website for disability equality charity Scope, is a lesson in how to do keyboard accessibility well. 

Try tabbing through the page, observe the big ‘skip to main content’ banner that appears for the first tab, the transition styles when tabbing between elements, and the thick border on the focus indicator.

The site is also a great example of how to achieve beautiful site design that meets accessibility requirements. Large, high-res, and captivating imagery is easy on the eye, even for partially-sighted site users, and colours are distinct, with large font sizing, line spacing, and well-designed buttons.

One of the things we like most about this site is what you’ll find on the ‘Accessibility’ page, which is given prominence in the top navigation bar next to ‘Contact’. 

As well as setting out Scope’s commitment to accessibility, it provides tools and support for site users who might need to customise their experience. It also provides a bullet-point list of accessibility problems on the Scope site which they’re in the process of fixing.

This approach is fully transparent and demonstrates Scope’s very serious commitment to improving the experience of site users with accessibility needs.

2. SSE Energy

With an ageing customer base, SSE is embracing inclusive design and working to deliver an accessible service to all its customers alike.

SSE’s energy business has focused much of its accessibility efforts around its online sign-up journeys, since they’re the most important and profitable user experiences on the website.

As part of a redesign of these journeys, SSE has gone back to basics. It has changed key elements of its digital design, including a significant revision of its brand colours. 

Following an accessibility audit, remedial code work, and the implementation of new design principles, SSE set about conducting accessibility testing with real customers to drive out further improvement opportunities.

The result is a clear, clean, easily navigable design. Tabbing for keyboard-only users works well, with a prominent ‘Skip to content’ button on the first tab, and attention has been placed on code structure and alt text for non-text elements.

Check-out the SSE case study to learn more about how the organisation is working to achieve inclusive experiences for all its customers.

3. BBC

The BBC’s digital team are strong advocates of inclusive design, which ensures that accessibility is an ‘integral part of user experience design’. For the BBC, this means putting people first, adding value for disabled people, prioritising familiarity and consistency, giving control over content, and offering multiple methods interact with interface components.

Like the other examples in this post, the BBC website includes a hidden ‘Skip to content’ link at the start of the tab index that is revealed when you tab to it, but there is also an ‘Accessibility Help’ link straight after. This ensures that keyboard and screen reader users who are new to the site can quickly find help without having to wade through the rest of the navigation.

 

 

The BBC website is packed with lots of small accessibility enhancements. There’s hidden text that gives extra context to screen reader users, including more accurate timestamps on article promos and extended labels next to share icons. 

As you would expect, the site is very easy to navigate via keyboard, and care has been taken to ensure that assistive technology users aren’t exposed to adjacent links that point to the same page.

 

an example of the BBC site using hidden text to provide more context to screen reader users

The above image is a great example of a small enhancement for screen reader users. It shows a news article with its email and social media sharing menu expanded. In the code inspector on the right of the image, you can see that the label 'Twitter' is hidden from assistive technology users using the aria-hidden property, but that there is an offscreen 'Share this with Twitter' label that is made available in its place.

The BBC was also an early pioneer of responsive web design; their site works at every possible screen width, with page elements fluidly resizing and stacking as the available space decreases. 

This isn’t typically thought of as an accessibility feature, but sites that have fluid page layouts are also extremely helpful for partially sighted users who have increased their browser zoom level. As you zoom in, the page layout slowly transitions from desktop to mobile via an intermediary tablet layout. No matter which zoom level you select, the content and layout stay in proportion to each other.

The BBC’s accessibility features aren’t limited to text and images, of course. Their flagship BBC iPlayer and BBC Sounds services are optimised for screen readers, keyboards, and alternative input devices. All iPlayer programmes have subtitles, and users can find audio described and signed programmes via the category navigation.

4. GOV.UK

Like the BBC, GOV.UK is a great example of a website that does lots of little things to make sure the overall experience is as inclusive as possible. As well as semantic and well-structured HTML, it has many small enhancements for screenreader and keyboard users to ensure they can make full use of the site.

The feedback forms in the footer, hidden behind two links, make use of ARIA attributes to help screen reader users find the right form and fill them in correctly. The ‘No’ and ‘Is there anything wrong with this page?’ links have aria-controls and aria-expanded=”false” attributes to indicate that they control a nearby section of the page that is currently hidden.

The Accessibility tab of Chrome Developer Tools, showing that the 'Is there something wrong with this page?' link has an aria-controls attribute pointing to the 'something-is-wrong' element, and an aria-expanded attribute set to false.

When the feedback forms are opened, the first field in the form automatically receives keyboard focus. In this instance, a screen reader would normally read out the label for this field, but skip past the help text above it. 

To work around this, there is an aria-describedby property that points to this help text, directing the screen reader to read out the help text at the same time it reads out the form label.

The Accessibility tab of Chrome Developer Tools, showing that the 'feedback_explanation' element has been correctly associated with the first input field of the form.

It’s also worth noting that the ‘Close’ button shown in the above screenshot has aria-controls and aria-expanded=”true” attributes, which indicates to a screen reader user that this is the mechanism to close the feedback form they have just opened.

Some article pages on the GOV.UK website have ‘Related content’ navigation menus in the sidebar section of the page. Screen readers like VoiceOver will compile a list of all the navigation menus on a given page so users can find them easily, but this is only useful if the navigation menus have descriptive names. 

As such, the ‘Related content’ navigation element has an aria-labelledby attribute pointing to the adjacent H2 heading.

The Accessibility tab of Chrome Developer tools, showing that the 'Related content' heading has been correctly associated with the adjacent H2 heading.
Using VoiceOver’s Web Rotor, we can see that the ‘Related content’ menu is correctly described when accessing the list of navigation menus on the page, thanks to the aria-labelledby property:

The Landmarks panel of the macOS VoiceOver Web Rotor, with the 'Related content navigation' item highlighted. The Related content navigation menu itself is highlighted on the page with a black border.

Another enhancement that benefits screen reader users, among others, is alternative formats for numerical data and statistics. Typically, this information is presented in a chart format, often with colour coding.

 

a colour-coded bar chart showing various metrics relating to business support provided by the government. Dark blue bars show data for 2013-14, while teal bars show data for 2012-13.

However this representation of the data may not be structured in a way that screen readers can easily interpret, so users can switch to a table view of the same data.

 

The same business support data represented in a linear table, with a column for 2013-14 data next to a column for 2012-13 data.
The use of inline alternate views for data ensures that a wider group of users can easily access this information, without having to hunt for it or make any special requests.

Overall, the GOV.UK website is a great example of accessibility and inclusive design. The accessibility statement and design system documentation demonstrates a commitment to equal access, and informs users how the site was tested, as well as identifying any deficiencies they’ve identified and are in the process of resolving. 

Design system documentation also warns potential adopters that implementing the design system doesn’t automatically guarantee WCAG 2.1 AA compliance, and that each government service must do the necessary research to ensure their implementation is accessible in context.

5. Monzo


Web accessibility isn’t something you’d necessarily assume is a focus for a lean challenger brand like Monzo. But despite its drive for rapid progress and customer acquisition, the popular, mobile-only bank is striving to make accessibility front and centre as part of its commitment to providing a great customer experience for everyone.

In a Monzo blog post that discusses the brand’s commitment to building a culture of accessibility across the organisation, Monzo shares some of the incremental changes it’s making to make its services work better for customers with accessibility needs, from reviewing and revising image alt text descriptions, to rebuilding the blog, and building out component libraries for consistency.

Why have we included a site with notable accessibility issues? Because no site is perfect (ours included!), and we love the fact that the team is sharing their learnings and experiences as they begin their accessibility journey. And with a web accessibility audit planned for this year, we’re sure they’ll have lots more to share in the coming months.

Wrapping up

As these five web accessibility examples demonstrate, you don’t have to sacrifice attractive web design to make life easier for site users with accessibility needs. As these and countless other examples demonstrate, focusing on accessibility actually delivers universal usability improvements that benefit all your customers alike.

If you’re unsure where to begin your own accessibility journey, do familiarise yourself with our web accessibility checklist and consider a web accessibility audit – an ideal first step for figuring out where and how to make accessibility improvements to your site.