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.

My children and I have a condition that makes words move on the page – #100days100stories

Sinéad and her children have Irlen syndrome, a condition that affects the way the brain processes visual information. It’s a common condition – many people don’t realise they have it.  Sinéad has shared her story as part of our 100 days, 100 stories campaign

My two children and I have a condition that makes words move on the page. When I sit in front of a computer the screen seems to shakSinead, with dark hair and glassese in front of me. My son says the whole world is like a plate of wobbly jelly.

The most common name for this condition is Irlen syndrome but it also goes by Meares-Irlen syndrome, visual stress and scotopic sensitivity. It can exist as a condition by itself or alongside dyslexia.

Common difficulties include problems with reading and writing, over-sensitivity to light, problems differentiating between background and foreground in the environment, and a range of different physical effects caused by dealing with this, such as headaches, nausea, exhaustion.

Our experience of Irlen syndrome

My two children and myself all have Irlen symptoms. They affect us to different extents and in different ways.

My 10-year-old daughter finds the contrast between text and page the most difficult to manage.When she started using a coloured plastic sheet over the pages of her books, she went up three reading levels at school within a term. She also has coloured workbooks provided by the school, which she uses for her schoolwork.

Things that help upload

My eight-year-old son reads very well but likes to use a coloured sheet when there are harsh lighting conditions. He also finds writing on coloured workbooks much more comfortable.

The children respond differently to environmental conditions as well. My son says he has no problems with the class smartboard (a large interactive ‘board’ projected onto the wall of the classroom). However, he howls with pain if the general lighting conditions are too bright.

My daughter doesn’t seem to be too bothered by light, but he needs the background of the board changed so it isn’t white. This is easily done, and most of the children prefer the jollier colour.

I have terrible handwriting; not many people know this. I experience environmental symptoms the most – sensitivity to light, and movement in my vision between the foreground and background.

This means that for me, my tinted Irlen glasses provide the best relief. However, the lenses are a dark turquoise colour and I don’t like to use them too much in the office as my colleagues cannot see my eyes.glasses

On most occasions I actually use a green computer filter over my screen. This reduces headaches and makes it much easier for me to concentrate.

What can be done to help?

There are lots of adaptations that can be made, and many of them are free or readily available. For example:

  • Changing the background colour of the interactive whiteboard in the classroom
  • Using the minimum amount of artificial light in the classroom or workplace
  • Using computers and social media  to communicate instead of handwriting
  • Coloured or tinted exercise books, overlays, reading rulers and tinted wipe-boards

None of these adaptations are that expensive – many could be implemented in every school in the UK tomorrow at no additional cost.

Changing the background of the interactive whiteboard is as simple as changing the colour of a Word document. If budget allowed, they could even have a stack of coloured paper for the children who chose to use it.

I would ask every teacher parent, school governor, MP and councillor reading this article to go into your local school tomorrow and ask them to do at least two of these three things.

It’s likely to improve academic performance – and it could just save the school life of many undiagnosed children sitting and suffering in silence.

Have you experienced any of these symptoms yourself? Are there any other ideas you would recommend? Talk about it on Scope’s online community.

Find out more about 100 days, 100 stories, and read the rest of the stories so far.