Design v function – making websites accessible

While every website we create is unique and tailored to that particular client and its specific goals, website design is often a juggle of design and function. While websites need to be engaging and eye-catching, they also need to be functional.

Over the years, we have begun to expect websites to offer certain features and for particular elements to be in similar places. As an analogy, most of us – assuming we can drive! - can climb into a car we are unfamiliar with and probably drive off in it with fairly few problems. We might search a while for the windscreen wipers, but the wheel and pedals will be in the same position as any other car. 

Websites are becoming like that. We generally know where the menu will be and the ‘contact us’ information and, while all website designers want to shake things up, potential customers will soon click away from a website which doesn’t work the way they think it should. Again, this doesn’t mean that we can’t introduce cutting edge design into a website - we can. This is why driving a Ferrari is a different experience to motoring in a typical family car. 

If you decide to reinvent the wheel at this point, then you’ll probably lose potential customers who don’t have the time to negotiate your reimagined idea of how a website should function. Website visitors will not have the time or the patience to hunt for things in places where they don’t expect them to be. 

The colours used on a website will also affect how engaging it can feel and there are also some colour choices which simply don’t work online. 

Generally speaking, most websites benefit from fewer colours and very bright colours will just be dazzling. That’s not to say that you can’t use them but perhaps use them to highlight certain aspects only.  

Engaging with customers is key and you want to get your message across as quickly and easily as possible – most website visitors typically give a website just 15 seconds, before potentially clicking away. For this reason, it’s important to consider how certain coloured fonts read when placed on particular colours. Does it then make the text harder – or hopefully – easier to read at a glance? For instance, pale light colours on a white background can be hard to see.

The use of colour and how accessible this makes a website was brought to the forefront of social media in the days following the death of Prince Philip. Network Rail and National Rail took the decision to change their websites to greyscale. However, this step left visually impaired people struggling. 

As Robin Spinks, the innovation lead for the Royal National Institute of Blind People explained in The Guardian: “As someone who is registered severely sight impaired, good colour contrast on a website is incredibly important. A lack of this makes it difficult for me to read the content and causes headaches and eye strain. It leaves me feeling unwelcome as a customer.

“Although I can understand why an organisation might make a change to its website in circumstances such as this, any change should be inclusive and accessible so that all customers can continue to use the site as normal.”

There are a set of guidelines for making websites accessible known as the Web Content Accessibility Guidelines (WCAG) which were developed by the World Wide Web Consortium and promotes four design principles, perceivable, operable, understandable and robust. 

By focusing on principles, not technology, they emphasise the need to think about the different ways that people interact with content. For example, users might use a keyboard instead of a mouse, use a screen reader to ‘read’ (speak) content out loud or use a screen magnifier to enlarge part or all of a screen.

There’s also a drive currently to add captions to video. This not only provides obvious assistance to people who are hard of hearing but it is useful for people scanning social media platforms and websites without their headphones.

One of our clients recently recorded a short video about a course they’d been on run by a local charity and the charity added captions before the video was shared. We then added it to our client’s website.

‍