JBi’s 5 favourite examples of accessible and inaccessible websites
JBi’s Favourite Accessible Websites
Contrary to common perceptions, accessible websites don’t have to have flat User Interfaces. The websites we have chosen, though in some cases very simple, are nonetheless illustrative of how you can provide visually interesting and accessible designs.
1. Scope
Disability equality charity Scope practices what it preaches. Its website is an excellent example of how to consider digital accessibility.
The link to the Accessibility page is always visible above the mega menu, and when you tab into the site, you are given options to go straight to ‘main content’, ‘search’ or ‘navigation’. A great start as it means users accessing the site with a screen reader can go directly to their desired content instead of having to skip through more of the website.
Scope is easily the most colourful example on our list. By choosing bright colours with lots of contrast, they manage to bring their upbeat and optimistic personality to the website without compromising on accessibility.
2. The Met Office
As a public sector body, The Met Office is legally obliged to maintain an accessible website. This must have been tricky given the abundance of weather images, icons, and videos featured on the site.
Nevertheless, using alt text, overlays, and closed captions has allowed them to maximise the use of visuals without removing context for users who are blind or have visual impairments. Everyone can see, hear, or listen to the weather near them.
3. LinkedIn (H3)
Considering the volume of content and functionality on LinkedIn’s website, we have been pleasantly surprised by how accessible it is.
Though, as true of any site with user-generated content, some imagery has confusing alt-text descriptions and includes non-compliant colour contrasts and text over imagery, LinkedIn does give users the opportunity to make their content accessible, and the majority of its UI meets WCAG Guidelines.
We’re not saying this one is perfect, but we were impressed by the logical focus order and the option they give users to move on from the news feed after each post, as realistically, who’s reading to the bottom?
4. Barclays
Bold and blue. Barclays manages to get plenty of personality into its website while meeting accessibility success criteria.
Tailored support across key touchpoints. Helpful skip points, constructive form feedback, and useful alt text are all features that make the website more accessible to users with disabilities.
5. BBC
The BBC’s commitment to providing an accessible experience is evident throughout its website.
As well as a ‘Skip to content’ option, they provide users with the opportunity to go straight to their ‘Accessibility Help’ page which has useful links and resources to help them get the most out of their visit.
On top of that, they have written text links and media descriptions to provide audio and video alternatives to ensure all users have access to the same content.
Inaccessible Websites
In contrast to the examples above, the following websites’ accessibility leaves much to be desired. Looking through the list will highlight common issues, so you know what to avoid. See where you run into issues.
1. Sketch
This one is pretty self-explanatory. But, in case you need a hint, you can’t even use your keyboard on the homepage. Have fun trying to view a menu.
2. Instagram
User-generated content in general creates issues with accessibility. Leaving users to input alt text and consider the colour contrast and legibility issues created by putting text over images in stories was always going to result in inaccessible content.
For similar reasons, Facebook and TikTok also rank less than perfect on the accessibility list.
3. SoundCloud
Barely perceivable focus states, questionable colour contrast and a missing ‘skip to content’ link are just some of the issues with this website, where getting stuck in keyboard loops is a more likely outcome than discovering new artists.
Seeing as SoundCloud is a company dedicated to sound and music, we would expect they would better consider those whose senses are limited to just sound.
4. Lings Cars Museum
Unlike the other examples on our ‘Could do better’ list, Lings Cars’ chose to be there.
When Ling founded her business in 2000, she deliberately designed a “bad” website as a marketing stunt to stand out in the saturated car rental market. And, with bright patterns, eye-catching animations and a karaoke section, she’s certainly achieved her goal.
She also, unintentionally, created an the perfeect example of an inaccessible website with undescriptive link text, automatically playing videos and colour contrast being just a few of the WCAG violations.
Ling recently updated her website to a much more conventional (and accessible) version. But the old site is still available as a museum to her vision and we encourage you to take a look around.
However, if you are going to click on this example, we should warn you it contains a lot of animation and flashing – far more than a website can have to be deemed accessible. (Fewer than 3 per second – preferably with the ability to disable them, in case you were wondering).
5. Smyths Toys
No keyboard access to the mega menu isn’t a great start, but it’s made worse by the white and light blue colour scheme and several buttons with the same, non-descriptive ‘shop now’ text. All of which add up to the fact that Smthys Toys is not a good accessibility introduction for the next generation.
We challenge you to try and use their gift finder with only your keyboard.
Some examples are a little extreme, but we hope this list gives you a clearer understanding of the most common accessibility pitfalls and their real-world impacts on usability.
If you want to ensure you aren’t falling into any of the pitfalls above, talk to our accessibility experts by emailing hello@jbidigital.co.uk or calling 0207 043 2510 to organise an audit of your website.
Digital transformation. Delivered securely.
Let’s discuss your objectives.