Before I talk you through my top 10 website accessibility examples, it’s worth going through why website accessibility should be at the top of every designer and web dev’s priority lists.
Making your website accessible offers equal access and equal opportunity to all to all potential users, including people with disabilities so they have the best user experience and are able to easily access all areas of your website.
One way to check how accessible your website is by checking your Google Lighthouse score.
Lighthouse is a handy open-source tool designed to help improve the quality of web pages. It highlights various issues on your webpage including performance and accessibility issues giving it a score out of 100 and suggesting improvements based on your score to improve the accessibility features of a website.
So, let’s go through our top 10 website accessibility examples from some of the most well-known websites leading the way in online accessibility.:
1. Eventbrite
Lighthouse accessibility check – 99
The Eventbrite website consists of clean layouts, with easy-to-process elements for both sighted users and users with low vision. Tabbing through content without the need for a mouse is also easy with a handy ‘skip to the content’ feature.
The site is fully optimised for screen readers so people with visual impairments, as well as those with cognitive and motor disabilities, can fully understand what’s going on on the page.
For example, buttons have been given accessible names; instead of a screen reader simply announcing a button on a product page it will read ‘check out for £9.97’.
Forms are also equipped with associated labels so form controls are announced properly by assistive technologies.
Their lists are correctly structured with ‘li’ tags so that screen readers can inform the listener that they are listening to items with a list.
2. Barclays
Lighthouse accessibility check – 96
The Barclays website is clean and easy to navigate with or without a mouse, providing a helpful menu of visible skip links when you tab across a landing page.
The design is clear and bold with contrasting background and foreground colours and all of the images have ALT attributions.
The back end of the site is also set up to support assistive technologies like screen readers.
3. 1% for the Planet
Lighthouse accessibility check – 88
True to their motto “Putting people and the planet over profit,” the 1% for the Planet website is proof of their commitment to accessibility.
Page layouts are simple in structure and present content with highly contrasting text in a fully responsive design.
ARIA (“Accessible Rich Internet Applications”) tags in the HTML help to communicate the roles, states and properties of UI elements to assistive technologies like screen readers.
One thing we noticed they are missing is closed captions on their embedded video content. This would help users including those who are deaf or hard of hearing have full access to the video content.
Another thing they could work on is making their FAQ sections TAB-able.
4. Patagonia
Lighthouse accessibility check – 89
The pages on the Patagonia website are well-structured with clean layouts and easy-to-identify categories for both sighted users and users with low vision.
Product pages are free of distractions with large images and bold product descriptions making the page easy to take in.
From a technical perspective, the code has plenty of ARIA tags, forms have associated labels, the copy is high-contrasting, and all the images have alternative text.
5. BBC
Lighthouse accessibility check – 100
The BBC website has plenty of accessibility enhancements. Their site is fully responsive and easy to navigate with a keyboard. There’s even hidden text to give screen reader users extra context.
An ‘Accessibility Help’ link that helps new users and screen readers get assistance quickly without having to scroll through the rest of the site.
The zoom function allows users to set a zoom level that suits them and maintain the layout and proportions of the page.
All of the iPlayer programmes have subtitles available and users can find audio-described and signed programmes easily via the category navigation.
6. World wildlife fund
Lighthouse accessibility check – 96
The WWF website shares plenty of helpful information in an accessible and easy-to-navigate layout without overloading its pages with content. The copy is big and bold with plenty of contrast to make it easy to read and each page has a clean layout with minimal distractions.
The on-page navigation is also designed to be bold and clear, making it easy to identify the page you’re looking for and know exactly where your clicking on the site.
The site is also chock full of accessibility HTML tags and the relevant UI elements that work with assistive technologies like screen readers.
7. Lonely Planet
Lighthouse accessibility check – 94
Much like the WWF website, the Lonely Planet website has been designed to eliminate any distractions allowing visitors to focus on specific elements without feeling overwhelmed.
The easy-to-identify sections and clean landing page layouts help users with ADHD and neurodevelopmental disorders navigate around the site, read through the content, and get to where they want to be and achieve conversion goals.
8. Scope
Lighthouse accessibility check – 100
Scope.org.uk is an excellent example of keyboard accessibility done well. When you tab through the page there is the option to ‘Skip to the main content’ so you avoid tabbing through the whole page.
The transition styles have been designed with thick borders making it super easy to track where you’re tabbing.
The site itself is designed with large, high-res images and contrasting colours, making it easy on the eye. Combined with large font sizing, line spacing and well-designed buttons, the whole website is super easy to digest and navigate around.
9. John Lewis
Lighthouse accessibility check – 94
From a technical perspective, the John Lewis Website HTML structure is nice and clean with all the necessary ALT and ARIA elements.
Form elements have associated labels and skip links are added in the header for keyboard navigation, making it easy for assistive tech.
Taking into consideration the vast amount of products on the John Lewis website, they do a good job of creating easily identifiable elements on the page, with high res images and highly contrasting colour copy.
The transition styling is also bold and high contrast to make tracking your tabs super easy.
The zoom functionality is great too so users can set their preferred zoom level and maintain the layout and proportions of the page.
10. GOV.UK
Lighthouse accessibility check – 100
GOV.UK is another great example of how to make a website experience as inclusive as possible.
The site has well-structured HTML, with all the extra enhancements for screen reader and keyboard users so they can make full use of the whole site.
For the GOV.UK site, ARIA attributes on form elements are particularly important. There are lots of form fields on the site and these will ensure screen reader users can navigate their way to the right forms and fill them in correctly.
One thing all of these websites have in common 9aprt from being excellent website accessibility examples) is that they adhere to the Web Content Accessibility Guidelines (WCAG). An international standard, including WCAG 2.0, WCAG 2.1, and WCAG 2.2. WCAG documents which explain how to make web content more accessible to people with disabilities.
Their goal is to provide a single shared standard for web content accessibility that meets the needs of individuals, organizations, and governments internationally.
So, if you’re not sure how accessible your website is, use the Lighthouse checker or you can speak to our team at Factory Pattern and we will be happy to help with a UX audit.