What is the Difference Between Web Usability and Accessibility?

A young girl on a stool using a telescope

Usability and Accessibility are two very important parts of web design that share some common principles, but they do have some key differences too.  It is common for designers to confuse the two terms, or to use them interchangeably, and while there is often a lot of overlap in the best practices that are encouraged for web site usability and web site accessibility, there are areas where they diverge as well. Let’s take a moment to understand what each field focuses on.

What is Usability?

Usability is something that has been around since the 1980s, so before the World Wide Web as we know it was really a thing.  Usability, back then, referred to a set of vague characteristics that made the product in question ‘ user-friendly’.  In the early days, a lot of usability assessments were subjective. There were no common standards for computer software and interacting with a machine or a program was something that had to be learned rather than done intuitively.

Over time, standards were developed. ISO9241, for example, defines usability as the effectiveness, efficiency, and satisfaction that users enjoy when attempting to achieve a specific goal.  There are other definitions laid out by other organisations, which take into account things such as how easy it is to remember how to perform a task, or how error-prone achieving a goal is.

With usability, the emphasis is on effectiveness, satisfaction, and efficiency. The idea is to make it as easy as possible for your target audience to do the things that they need to do, and also to ensure that they find it pleasant as well.  Think about the incredible success of Apple with their iPods and iPhones. Apple was not the first to market with either device and nor were they always the highest-specification of the device, but because they made their devices very easy to use, to the point that they “just worked”, they became the market leader quite quickly.

What is Accessibility?

Where usability focuses on making things easy to use for all, accessibility focuses on making sure that anyone can use the product in question ( this including users who suffer from any cognitive issues or visual impairments, are deaf or have auditory/hearing impairments, or perhaps are simply among the growing group of older persons using the web today), hence removing this unwanted  barrier.

In the case of websites, accessibility involves issues such as being easy to view a website with a text to speech reader (which entails for instance using the alt tag on all images), having stylesheets which still work well if the user wants to change the colour contrast  ratio of the text or its size, and that has an interface which will work well even if a person is colour blind or has movement problems which might make it hard for them to click on a small button or tap a small area of the screen.

One good example of designing a website / make your web pages easier to use and to make them more accessible at the same time, is to add captions (subtitles) to any video content as well as adding transcripts. This will allow the page/video to convey to all (using an audio description in the case of users using a screen reader so that the contents are read aloud) the full information that it contains, and as an aside boost SEO at the same time.

The World Wide Web Consortium published a collection of web accessibility standards, that describes what features an accessible website should have. The good thing about the emphasis on accessibility is that when you focus on making a website more accessible it encourages you to follow best practices that will also benefit usability.

The Crossover Between Web Site Usability and Accessibility

It can be tempting for some webmasters to dismiss accessibility. If you are the developer of first-person action video games you might think that the community website for your game does not need to be accessible to people who use screen readers because nobody who is severely visually impaired is going to play your game. If you are in a band, you might think that it’s fine to have audio on your website as an important part of interacting with it, because music fans can hear.  These views, while reasonable from one point, miss a key consideration.

Making your website accessible benefits everyone, not just people who have a disability.

When a website is stripped down to keep it as simple as possible for people who have disabilities, (whether they be cognitive disabilities, like colour blindness, or physical ones) you create a website that is easy for everyone to use and that will load quickly even on slower computers. You cannot call a web site usable if it is not accessible.

That’s not to say that all websites need to be boring. It is, however, a good idea to make sure that when JavaScript is turned off and your site is using a very simplified CSS (cascading style sheet) stylesheet, with images disabled, people can still navigate from page to page. If, at that level, the site is at least moderately usable, then you have a good foundation.  From there you can add more bells and whistles as long as the lack of those features will not make the core of the site harder to use.

Remember that usability and accessibility are similar but different. A site that scores highly for usability is probably fairly accessible, but a site that is accessible can be difficult to use if the ‘accessibility’ is from a technical standpoint only.  A site with obscurely named links and features hidden in options pages that require you to drill down through multiple sections could well be accessible but is not easy to use.

Assessing Web Usability and Web Accessibility

If you are not sure whether a website is usable, then the best thing to do is to test it using ‘real users’, rather than people who are a part of your company or development team. Someone who has worked on a website is likely to already know how to use it, what icons and menu options mean, and where features are hidden so they are not a good choice for evaluating the product.

Try to do usability testing in a ‘natural environment’.  Rather than sitting next to a user while they try to get certain tasks done, sit them down and get them to do a few tasks while you record the screen. Give them a few simple tasks that you aren’t worried about, then get them to do some other tasks that are the real test. This will get them relaxed and into the flow of using the computer. Watch what they do and where they go.  If you notice that several users are clicking on a screen element that is not actually hotlinked, or looking for a feature in a menu other than what they were supposed to use, then consider making changes to make the site easier to use in that respect.  Consider using Wireframe and Heatmaps in order to get an idea of what your users are doing on the live site.

Accessibility Testing and Ensuring Your Site Meets the Current Accessibility Standards

Testing a website for accessibility can be harder if you do not have access to ready-made focus groups.  The W3C’s Website Content Accessibility Guidelines contain several pages of recommendations for the use of colour and audio, text size, contrast, images (and image descriptions), content spacing, and how content should behave on hover-over or focus. They also describe recommendations for giving users the ability to navigate with and without a keyboard, and how long users should be given to complete tasks on the website.  If you have a website that is intended to be used by a large group of people, including some who may have disabilities, then it is a good idea to read the guidelines and work through them point by point to ensure that you are in compliance with all of them.

Be sure to test your website with as many desktop and mobile browsers as possible. At a minimum, you should test it with Chrome, Edge, Firefox, Opera and Safari, because that will cover most of the major frameworks. Check the site with modern smartphones and with some older ‘feature phones’. There are online, browser-based emulators that will let you view a website in simulated phone environments so that you can see how the site performs.

You may also find it useful to check out a recent blog on our site: see Web Accessibility Standards and Why They Are Important as that covers this area in even greater depth.

It may also be worth your while to have a look at our post about how to choose a WordPress development agency that is well versed in producing websites using the WordPress CMS (content management system).

In both cases, Rouge Media are ready and waiting to assist so when you are ready please do contact us.

Oops! Please rotate your device for the best experience