Woman using a laptop, smiling

5 things we’ve done to improve accessibility on the Scope website

In honour of our accreditation with Shaw Trust (yay!) and our website’s first birthday, Jonathan Ballinger, Scope’s Digital Developer has written for us about some of the things we did to improve the accessibility on our website that may not be obvious.

1. Green focus box

Snapshot of the Scope menu structure, with the Support and Information tab highlighted with a green border

Tabbing through a website can be an arduous task if the focus highlight is non-existent or hard to see. We picked a colour that you’ll rarely see on our site, and ensured that, when tab-focusing through the site, it’ll be crystal clear what you’re focusing on right now.

2. Rational heading structure throughout the content

Snapshot of the cerebral palsy page, showing two types of heading

Our fantastic content authors have gone through all the content from our old site, improving and tweaking it here and there. One of the important tweaks for accessibility was to ensure that headings in our support and information pages, such as this page for cerebral palsy, follow a rational, expected order. We have a single H1 for the title, and then go on to use H2s, H3s, and H4s on that page. This allows screen readers (and web browsers) to process the content effortlessly.

3. Responsive site

Snapshot of the Scope site menu while zoomed out, showing how it is laid out horizontally

However you view our site, 100% zoom or 300% zoom, on the desktop, we’ve got you covered. Our responsive design allows you to view the site on any device you have.

Snapshot of the Scope site menu while zoomed in, showing how it stacks

We paid careful thought to how pages looked when viewed on devices with smaller screens, adjusting where it was necessary.

Snapshot of the cerebral palsy contents block while zoomed out, showing how it is ordered in a grid layout

On smaller screens, we turned this into a responsive stack.

Snapshot of the cerebral palsy contents block while zoomed in, showing how it is a drop down

4. Accessible address lookup field

Due to the nature of our site, the ability to enter your address while filling out a form was one of the features we required. We investigated various services out there in order to try and find a fully accessible address lookup component we could drop in. We weren’t able to find one.

Animation of the automatic search functionality in the address lookup, showing how it can be controlled using the keyboard alone

So we made our own using the address matching API provided by Postcode Anywhere.

5. Keyboard-controllable tabs using ARIA

Animation of the ARIA-enabled tabs functionality on the donations page

We use tabs on occasion. They’re a good way to distinguish between two exclusive groups of information. However, we made sure they are accessible by ensuring that you can tab-navigate to them, and then switch between them using the arrow keys.

So there we have it, five of the many things we’ve done to improve the accessibility of our website. We’re constantly looking at how we can improve people’s experience of our site. If you’d like to find out more or have any suggestions, you can email us at digital@scope.org.uk.

3 thoughts on “5 things we’ve done to improve accessibility on the Scope website”

  1. This is really useful, thank you for making it public. We’re currently at the very beginning of a new website, and this sort of thing will be very helpful to us.

  2. Good job with the accessibility of the Scope website Jon. Great to see more people can access Scope’s content and services. Glad to have been a part of it.

Comments are closed.