Accessibility is more than supporting screenreaders

After another powerful talk delivered by Seren Davies at Women in Tech this month, we couldn’t wait to share what we’d learnt. We highly recommend attending the Women in Tech events in Nottingham – they never fail to deliver fantastic speakers every month.

This blog explores accessibility in relation to websites, and reveals the simple changes businesses can implement to ensure exclusivity does not occur. Seren’s talk really opened up our eyes and made us reflect upon our brand new Clicky site – we promise to practice what we preach!

So, what does ‘accessibility’ refer to?

‘Information that is accessible to everyone, no matter if you have a disability or not you should be able to perceive, understand, navigate, interact and contribute equally without barriers’ (Web Accessibility initiative)

Accessibility can often be associated with the mindset of ‘if it doesn’t affect me, I don’t need to think about it.’ This is a damaging attitude to have and can lead to accessibility being vastly overlooked, and therefore hindering the user experience for many individuals online.

Accessibility struggles arise within many categories, such as:

  • Cognitive
  • Touch
  • Sight
  • Hearing

To emphasise the importance of making your website accessible for all, we have hypothetically assigned accessibility conditions to the 47 team members Clicky:

  • 1 in 10 people suffer with Dyslexia
  • 1 in 12 men have colour blindness
  • 1 in 6 people suffer with hearing loss

Cognitive

This refers to the things you can’t see, and explicitly relates to how hard it can be for a user to read and navigate around a website. Seren touched upon her own personal experience of being Dyslexic during this section of her talk.

Dyslexia is a learning difficulty that can cause problems with reading, writing and spelling. In light of this, Seren prompted some easy changes that can be made, specifically around the formatting of text online, to make your content easier to read:

  • Make your text bold
  • Never make text entirely uppercase – this can render it almost unreadable to the Dyslexic user
  • Adjust line spacing to 1.5 to aid readability
  • Where possible, bullet points or numbers should be used, rather than large chunks of text

These changes can immediately improve the online experience for a Dyslexic user. Make sure you check out the British Dyslexia Association style guide if you are interested in learning more.

Epilepsy is a condition which affects the brain and causes frequent seizures. Individuals who suffer with Epilepsy tend to be most affected when flashing imagery is shown to them. In order to aid the user experience for someone suffering with Epilepsy, animations need to be considered carefully. Animations are great for grabbing the attention of the user and making your site more visually engaging, however they pose a lot of difficulties in relation to accessibility.

Of course, animations can still be included, however we learnt the following useful tips:

  • Be cautious of the intensity and frequency of flashes used – they should be limited to less than 3 per second
  • If your animation includes flashes, reduce the colour contrast to make them seem less apparent
  • Discard any animations that involve moving text across the screen – these are often unreadable for Dyslexic users who may need to use their fingers to follow letters or words
  • Limit the number of animations used and how frequently they play as these can be  extremely distracting and potentially deter those who struggle with concentration, for example someone with ADHD

Touch & Movement

To be entirely honest, touch was a concept I had never considered in relation to accessibility before Seren’s talk. This point will precisely affect those who struggle with hand tremors i.e. Parkinson disease, or RSI (repetitive strain injury), for example.

If you are an e-Commerce business, this may me something you need to consider more than any other sector, due to the nature of your web pages being longer than most. To aid those who suffer with touch and movement issues you can:

  • Implement a ‘back to the top button’ – either situated half way down the page or prompted by the action of the user scrolling. This diminishes someone with RSI having to perform a continuous scrolling motion that may cause discomfort.
  • Remove small areas for links and buttons – these features are extremely difficult for users suffering with motor control. It is better to include a larger area where users can click with ease. Seren shared a contrast here, expressing that (in her opinion) Google can be bad for using small areas for links, whereas TU clothing have a great approach, whereby they highlight the entire box once the user’s cursor enters the designated area

Sight

It’s important to ensure that your site is accessible for those who are visually impaired. This covers a range of elements, however in this blog we will specifically focus on colour blindness and contrasting colours.

Colour blindness can be split into three separate categories; Protanopia (top right) , Deuteranopia (bottom left)  and Tritanopia (bottom right). In the following image you can see how individuals with these different colour blindness conditions would see colours made available to them.


As a business or organisation, you have the right to decide the company guidelines and the colours you use across the web. When deciding these, you may wish to bear in mind the effects they may have on those who are colorblind.

  • Generally, red and green should be steered away from
  • Contrasting colours should be limited, for example the use of white and yellow would be extremely difficult to view
  • Ensure that your website is still viewable in bright environments

High quality, beautiful photography

There is no problem with using high quality photography on your website as background imagery – this is great. However, you need to be careful and mindful of any text overlay colour being used, for example a stunning black and white image combined with white text, as this omits both the best and worst colour contrast at the same time.

Hearing loss

Many individuals would assume that their webpage is suitable for those who have hearing difficulties, due to their visual nature. However, this is not the case if your website contains videos. During Seren’s talk, she expressed that if your videos don’t relay subtitles, you will have excluded those who are hard of hearing. We therefore advise being mindful of implementing subtitles on all videos.

Clicky site accessibility review

We built our new Clicky website with speed in mind. It now measures above 90 on Google Pagespeed – which we are over the moon about. Yet, just how accessible is our new site? We have put it to the test:

  • Clicky make good use of bold text – all our headings / subheadings exist in this form
  • None of our text is presented in a complete uppercase format
  • We actively try to keep all our content as digestible as possible, by incorporating bullet points and numbers as necessary
  • Our link areas within our site are large, with all buttons appearing highlighted when the cursor enters the appropriate area
  • Colour contrast are approached effectively throughout the Clicky site with most pages consisting of a white background and black text

We challenge you to be reflective of your own business website and brand guidelines. Are they accessible for all?

If you require any support with your website, don’t hesitate to get in touch with our digital experts. Our experienced web development team https://www.clicky.co.uk/enquiry – are more than happy to discuss how to make your website more accessible for users.

 

Written by Sascha Richards

Marketing and Research Assistant