What is Digital Accessibility
The web is like a massive library full of information. It's a great resource that should be available for everyone. Making a physical library accessible by stairs only, denies wheelchair users access to a library's contents; but if you think that accessibility issues only exist in the offline / ‘real world’ then you are sadly mistaken. Digital Accessibility is the insurance that digital products (from web pages through the apps) are accessible to all regardless of a person’s disability.
Accessibility in digital products like websites is a practice undertaken by UI and UX designers, web developers, copywriters, and content creators to ensure that those websites are easily available for everyone. When building a site one should keep in mind all disabilities. We are aware that there are a vast scope of disabilities, but here are the 4 most commonly encountered categories as a UX designer:
- Visual - Colour blindness, Visual impairment, Epilepsy etc.
- Auditory - Deaf or Partially Deaf etc.
- Motor - Paralysed, Amputees etc.
- Cognitive - Dyslexia, Alzheimers, Downs Syndrome etc.
Why is Digital Accessibility Important
It's easy to think that accessibility is just a nice-to-have feature. This couldn't be further from the truth. There are about 1 billion people living in the world with some sort of disability, and neglecting accessibility on your website means that potentially 1 billion people (~10-15% of the world's population) would not be able to access your store. Would you want to pass on this much business? We sure wouldn't. On top of that, it's a case of simply being inclusive.
Improving the accessibility of a site also improves the experience of non-disabled people, like smartphone users, people with limited or expensive internet access, people with temporary disabilities like a broken arm.
Most common WCAG failures. Image Source
Some people say that making a website accessible is a long, difficult, and expensive process. That is simply not the case. Fixing an inaccessible website can require some effort, but most of the time it really isn't that hard. And when designing a site from scratch you don't have to add any features in order to be able to build an accessible product.
How to Improve Digital Accessibility
Measurement
The World Wide Web Consortium created a set of accessibility standards to address the concern about accessible website design. The Web Content Accessibility Guidelines 2.0 (WCAG 2.0) is a document created in 2008 that divides accessibility into four main principles and is used as a standard in most countries.
- Perceiving - Can the information on your site be consumed by everyone? eg. Can a deaf person access a podcast or a video via transcripts?
- Operating - Can the site be accessed and used by everyone? eg. Can a motored disabled person use a sire without a mouse?
- Understanding - Can a user understand everything on the site? eg. Can a red/green colour blind person understand the difference between a green and red pole in a graph?
- Robust - Can a user access the site from an unconventional device or not an ideal environment? eg. Can a person who doesn't own a desktop PC access a site via mobile? Can they access it via their smart TV if their phone is in repair?
That's the only FOUR standards we accept at Blend Commerce.
As you can already tell, there are a fair amount of things to consider.
We understand that it can be overwhelming and the amount of work that would be required may seem like a challenge. However, before you give up, have a look at this list of a few very easy things that can help you boost your accessibility.
That is a great way to start if you haven't already.
Colour contrast
The contrast between content (text, icons, etc.) and its background should be high, otherwise, people with low-quality screens or low vision can struggle to read something. It's an issue very often overlooked by less experienced UI designers. According to WCAG, we recognise 3 types of colour contrast standards. A - your text is considered accessible, AA - your text is considered very accessible, and AAA - the gold standard everyone should strive towards. However, sometimes AAA (or triple-A) is more of an ideal scenario rather than actually an achievable result.
In order to ensure that your text is accessible, you can use chrome extensions, like WCAG Colour contrast checker.
Small text on a white background needs to have a colour value of at least #323232 to be AAA compliant.
Use of colour
Colour is a powerful tool that when used correctly can help people distinguish between different collections, graph elements, states, etc. When we start thinking about colourblind people, though, we will quickly notice that relying solely on colour can not be an ideal solution for those who struggle to distinguish certain colour groups.
Improving on that is actually extremely easy. The minimum you can do is combine your colour with text labels supporting a given section, like the name of a collection. If you want to take it a step further, the use of patterns or icons can enhance the experience even further.
Trello uses patterns to help colour blind people distinguish between different labels.
Alt tags
Users who are blind or heavily visually impaired often use screen readers in order to navigate websites. The way tools like that work is by creating a content map of the site called the "Accessibility Tree". That tree is then used to help users navigate the site by reading it to them.
Alt tags are pieces of text that are supporting images in the code of any website and should be used as short descriptions. Including those descriptions will allow blind people or those who simply can't load a page to still know what is on a given image. Another benefit of taking full advantage of alt tags is that they boost the SEO value of the site and help it appear higher in search engines like Google.
Usually adding those is a role of a developer, but if you'd like to learn how to best use alt tags, we recommend this Google documentation. To further improve the Accessibility Tree of your site you should also look into ARIA labels.
Keyboard support
One of the most important aspects of web accessibility is keyboard accessibility. People with motor disabilities, blind people who use screen readers, people with poor muscle control, and even power users rely on a keyboard to navigate content.
Text field labels
A rookie mistake made by inexperienced UI designers is not including labels in fields. There are 2 main reasons why you should always keep the labels. Firstly, going back to the text reader's example, those readers do not read the fields' placeholder text, so people who use them will not be able to know what the form is. Secondly, even if you have perfect sight, you might have cognitive issues like short memory loss, which a lot of people with ADHD struggle with. That might cause you to simply forget what the field is asking you as you type.
Jigsaw Exchange (one of our clients) makes the placeholder appear as a label as soon as you start typing in the text field.
Content
The King, as they call it. In the end, the most important thing on your site is information; content. Believe us or not, but when creating copy for your website you should be thinking about accessibility, too. When a copywriter starts their creative juices flowing it's easy to get carried away and come up with sentences that sometimes sound much more complicated than there is a need for. That can become an issue for users with cognitive disabilities like dyslexia, young people who can't comprehend the vocabulary yet, or old people who maybe aren't as sharp as they used to be.
Using a tool like Hemingway can help simplify and make your content easier to consume for everyone.
Nike’s about statement could use some improvements to put the message across more clearly. We checked that in 5 seconds using HemingwayApp.
Should You Make Your Site Digitally Accessible?
You should always endeavour to make your site digitally accessible. Designing a website with accessibility in mind is not a difficult process. One great idea is to hire an auditor or select someone from your in-house design and development team to create an accessibility audit. This will ensure that you are working to a predefined list of criteria that define your approach to digital accessibility.
If you are looking for support in extending the reach and audience that can access your website get in touch and we can assist you in this process. If you want to learn more about meeting User Expectations with UX visit our latest blog here.
