How do I make a website for disabled users?

When using the web, we often engage in a shared consumption experience, be that information, provision or entertainment. But for many users, that shared experience isn’t equitable due to disability and society’s lack of consideration when it comes to disabled users. 

Disability Stats

In 2020, the Office of National Statistics reported that, in the UK alone, almost 11 million disabled adults were active or recent internet users.  

That equates to roughly 81% of disabled adults in the UK and 1/4 of the UK’s adult population.

That’s too large of a number to overlook, and yet, as a society and an industry, we still treat it as an afterthought. If ¼ of your audience were obstructed from engaging with your business, you’d change something fairly urgently, right? Well, it turns out, that’s already the case.

Disability Examples

When we think of disability, we typically think of the more obvious physical ailments that limit movement or severe learning difficulties that limit communication and social integration. And whilst these can affect how a user engages with the web, there are also less obvious ailments that have a similar impact.

Some common examples of these include:

  • Dyslexia
  • Colour-blindness
  • Partial and full blindness
  • Partial or full loss of fine motor function

Solutions

Creating solutions or designing visual products with these disabilities in mind may seem daunting or restrictive, however there are simple things that we can bake into our default thinking to make our workflow subconsciously disability friendly.

Colour

A very common accessibility issue is contrast. High contrast levels between backgrounds and text make things easy for both dyslexic and colour-blind users. However, the extreme contrast of pure white and pure black is actually a bad choice for ALL users. It puts a lot of strain on the eyes and also makes reading difficult for dyslexic users. Consider an off-white pale grey to replace white and a charcoal grey to replace black. In the grand scheme of things, it won’t affect the visual for the majority of users, but will make a difference to the overall viewing health of your audience. Also, consider a golden ratio of 5:1 contrast as a bare minimum.

Text

Sans-serif fonts are a lot easier for dyslexic people to read, with Arial, Comic Sans and Verdana standing out as common options. Fonts should also be a minimum of 16px for body text as a basic readability standard.

Code and navigation

Writing semantically-rich (read: correct-by-the-book) code is important for people who are unable to use a touchscreen or a mouse with the relative ease of your typical user. These members of your audience are likely to use third-party peripherals or keyboard-only navigation to path through your site and by writing code correctly, you can make it much easier for these users and their tools to parse your content effectively. Semantic-rich code is also essential for the correct functionality of screen readers. This means using the correct tags and elements, rather than just relying on styling to create layouts and experiences. Whilst a <section>, a <div> and an <aside> tag can all be used to separate content and can be functionally similar, for a screen reader, they’re different with specific purposes. In the same way, you could style H1-H6, body text and <code> text to all look exactly the same, but again, a screen reader treats each of them in the originally intended manner.  Without the code being written correctly, this can present a sub-par experience for those of your consumers with poor eyesight.

Overarching Point

Web and digital products are key tools in connecting us, our products and our services with our clients and communities, and there are simple but important steps we can take to make sure that everyone can engage with us, not just those without disability.

Source: Internet users, UK: 2020 – ONS

My website is slow, how do I speed it up?

A slow website is one of the most frustrating things on the internet for users, site owners and search engines alike. For users, a slow site causes delay in a world where content is usually served in an instant. For search engines, a slow site is a marker of low quality, so search engines rarely push slow sites to the top of search rankings. And as a site owner, a slow site means that you’re making a poor impression on your visitors and most likely not getting the results you’d want from your site. So, how do we speed up your slow website, or stop it from being slow in the first place?

What is slowing down my website?

The key to speeding up a slow website is first understanding what make a website slow in the first place. Website speed, as most users will experience it, is the time it takes for the browser to display the necessary content. So, naturally, the more content on a page, the more time (in theory) it’ll take to load.

Web files (e.g .html, .css, .js) themselves are individually very small and don’t take much time to load in (although some of their actions and requests may take some time, but the main culprits on a slow site tend to be images, videos and other embedded elements.

How do I speed things up?

Of course, we don’t want you to build sites without images and videos, far from it. In fact, you can have all the visual content you like, simply by optimising it.

Images

With images, priming them for web is often simpler than people realise. A lot of images, especially photos, are naturally designed to look nice for print. These have far more detail than you’d ever be able to render on a screen, and as a result, the files are huge and take ages to load. However, you can use multiple online tools to reduce the pixel count to 72, lower the files size whilst keeping the image quality good enough for web.

Also, for things like icons, or vector based images, web browsers are perfectly capable of displaying vectors as SVGs, either as the data or the file. Either way, these files use mathematical data to generate the images, which is much quicker for a computer than loading and drawing an image, resulting in a faster web page.

Video

When it comes to video, hosting them on your server and rendering them raw is usually not a great idea. Video files are huge, even in compressed formats like .mp4, so it’s not advised for you to do that on a server that’s usually designed to handle basic web files. You’ll also use your bandwidth pretty quickly.

Instead, host your videos on YouTube or Vimeo and allow them to cleverly compress and deliver your content to your viewers with no strain on your site. Also, because it’s hosted elsewhere and you’re embedding it, rather than rendering it, it has no effect on the load time of your webpage.

Javascript

Javascript files, whilst small, are a series of instructions and actions for a website to carry out under different circumstances. Some of this needs to happen as the page is loading and can block the render of the rest of the page until it completes its task. Minifying your code and ensuring that your js functions are written in a way that minimises blocking is incredibly beneficial in speeding up your slow web page.

On top of that, only loading scripts where they need to be used is a great way to eliminate wasted resources.

Caching

Enabling caching means that the browser can save a website’s resources in its current state, meaning that repeat viewers of the website won’t have to load CSS or JS from scratch every single time until those resources change or a certain amount of time has passed.

In conclusion…

Your slow website isn’t a death sentence by any means and some simple changes can be implemented to speed it up.

Need Help?

If you need help with a slow website, I’m on hand and happy to help you with your issue, please don’t hesitate to get in touch!

Get in Touch