When you're creating a digital experience for users - for example, a website - one of the key factors in the success of your product is that it is accessible for the people who need to use it.
In this article, I will talk about some of the key aspects of accessible design.
A very brief definition of "UX design"
Before we get started, it's time for some knowledge-sharing.
In this article, I will refer to something called "UX design"; to help you understand what I mean (if you don't already know), here's a very brief definition.
Simply put, UX design - or user experience design - is the process of designing an experience for a user. But this is a very mechanical interpretation. For me, good UX design is about creating an accessible, valuable and delightful experience for human beings. UX design is about making the experience of using a thing as easy and pleasing as possible.
As an anonymous Reddit user once said, "Simplicity is not about making complex things simple, but about making it simple to do complex things."
UX design is relevant for all forms of experience, whether that's the experience of navigating around a digital platform like a website, a physical object like a print brochure or a product, or a physical space like a shop.
Most commonly, the phrase "UX design" is used in relation to the design of digital products - websites, apps and user interfaces - so for the purposes of this article, I will focus on digital user experiences, specifically websites.
What do I mean by "accessible"?
In this article, I define "accessible" as meaning something that is easy to use by all human beings, regardless of their individual needs. I like this definition by Avinash Kaur:
"Accessibility allows users of all abilities to understand, use and enjoy the web. As designers, it is our responsibility to make sure we design in a way that is usable to all users irrespective of their situation, abilities or context.
"Accessibility is not confined to a group of users with some different abilities, for example, visual, motor, auditory, speech, or cognitive disabilities, rather it extends to anyone who is experiencing any permanent, temporary or situational disability, e.g., having only one arm is a permanent condition, having an injured arm is a temporary, and holding a baby in one arm is situational — in each case the user is able to complete tasks with only one hand."
Why practice accessible UX design?
Before I go any further, I want to make it clear: By definition, all good UX design is accessible UX design.
Why?
The paradox of specificity is a theory of product design that states that by designing a product with a very specific set of needs in mind, you are likely to accidentally design a product that is better for a much wider audience. A famous example is the wheeled suitcase. But another, more relevant example might be as follows:
You decide to design a website catered to the specific requirements of people who have limited movement in their hands. You know that such users will often favour using a keyboard over a mouse to navigate around websites. So one of the things you do is create a really great experience for users using keyboard navigation technology (more on this later). This is really useful for people with impaired hand movement - but it's also really useful for people who have no mobility issues who are browsing your website with one hand while they eat a sandwich with the other; or for people who's mouse has just run out of battery... In short, your consideration has made the website better for everyone.
By designing with accessibility in mind, we are not designing for "special cases"; we are designing for everyone.
An incomplete list of things to do
It's incomplete because a) society is really good at ignoring the needs of people who don't fit into a bracket of "normal" and therefore there are so many needs still not yet catered for in design; and b) the world of design and technology is constantly evolving better ways to make the web accessible and in a year's time there will probably be even better ways of achieving this.
All the same, this list is a good starting point.
Do some user research
The best and only way to do good UX design is to talk to the people who will be using the product to understand their problems and needs. UX research is a vast topic in its own right, so I won't go into it here. Suffice it to say; it's really important to talk directly with your users.
Use inclusive language
The words - or copy - used on your website are important. This component of UX design is often overlooked. Some UX designers will drop in some Lorem Ipsum as a placeholder and consider the job done. But any UX writer will tell you that creating website copy that is both inclusive and exciting to read is an artform in itself.
There are loads of guides out there on writing inclusive copy; here's a shortlist.
Write in clear, simple and short sentences
Be concise
Keep in mind that the average reading age is considered 8th grade in the US; in the UK that's year 9 (13-14 years old)
Don't use unnecessary jargon or complicated language; where you do have to use jargon, define it clearly
Use a tool like Hemingway Editor to check your written content
Don't assume the reader's gender or use gendered terms unless it's necessary
Avoid phrases or references to practices that are culturally exclusive
Don't assume your reader has English as a first language
Use images to explain the text where relevant
Be internally consistent. For example, don't use multiple terms to refer to the same thing
Follow good design principles
Here's a great guide to basic design principles. Many of these principles are rules to Make Things Look Good, but some are also useful for accessibility. Here's a summary of those.
Layout
Design for all devices and screen sizes
Make important information stand out. For example, choose a high contrast colour for buttons and hyperlinks
Include plenty of negative space. Negative space is space with no elements. A crowded layout is stressful and overwhelming to the viewer
Think about how the information is structured and ordered (also known as information architecture)
Colours
Make sure there is good colour contrast between background and foreground colours. This contrast checker is a great tool
Avoid true black and true white; off-black and off-white are much easier on the eye and make it easier to read if you have dyslexia (here's a great dyslexia-friendly style guide).
Avoid reds and greens as these are not colour-blind safe
Text
There is an optimimum line length for text - around 70 characters. Short lines cause the reader's eye to move around too much; long lines make it hard to find the start of the next line and interrupt the flow of reading
Use lists, paragraphs, headings, labels and graphics to make written content easier to read, and to signpost important information
Body text should be no smaller than 16px
Don't give your user too much information at once
(I am not ignorant of the irony of this considering the length and complexity of this article.)
Psychologists have defined things called cognitive load and working memory.
Cognitive load theory "suggests that our working memory is only able to hold a small amount of information at any one time and that instructional methods should avoid overloading it in order to maximise learning."
There are some design strategies we can use to help manage our users' cognitive load. For example, we can:
Only ask them to do one thing at a time
Reduce the number of decisions they need to make
Break information down into clear stages
Give them time and space to digest the information
Provide no distractions
Do what's expected
Here's another term: mental model. It refers to a person's understanding of How Things Work based on their previous experience of similar things. For example, most people who have used websites before will have learned that menus are usually at the top of the page, shopping carts are usually in the top right corner, and contact information is usually in the footer.
Don't challenge your users' mental model unless you have a really good reason to do so. The less time and effort your user has to spend finding important elements of your website, the more accessible your design will be.
Avoid things that make it difficult to use your website
I mean, it sounds so obvious.
But still so many websites offer users those awkward menus that require you to hover and slide over really tiny parts of the interface in order to open up sub-menus. There's a thing called steering law that proves this type of design is really hard for humans to use.
Other things to avoid include:
Unnecessary pop-ups that obscure the content
Unnecessary moving elements that distract the user
Animated buttons that are hard to click on
Prolific and intrusive adverts (e.g. video ads that autoplay)
Clickable elements that are tiny or hard to see
This list is endless...
Use assistive technology
There are some amazing bits of technology that will make your website more accessible if you set it up correctly. You will need to work with a developer to do this.
Screen readers
Screen readers convert visual information into audio information. You can help screen readers do a great job by:
Including alt text on all your images (this is text that allows the screen reader to describe the image)
Making sure buttons and links are well labelled (e.g. instead of "Read more", use "Read how to create an accessible user experience")
Using proper formatting for headings, body copy and lists. Screen readers are able to tell the difference between a header and a paragraph if you format them correctly
Thinking about the order that the screen reader will read the content - does it make sense? This is important when you have parallel elements, for example
Avoiding using hover states for important information. Hover states are things that are activated by hovering a mouse over an element. For example, if your hover state changes the colour of a button, this doesn't really matter for the user, it just looks nice. But if your hover state reveals an important tool tip, this vital information may be inaccessible to a user using a screen reader; so you need to find another way to deliver this info.
Making sure that the whole page is fully operable using a screen reader
Testing it yourself
Keyboard navigation
Keyboard navigation allows a user to navigate a website using a keyboard instead of a mouse. It involves tapping specific keys to browse and interact with the website content. You can help keyboard navigation do a great job by:
Thinking about the order of information as interpreted by a keyboard navigator - does it make sense?
Making sure the keyboard focus is perceivable. The keyboard focus is where the keyboard navigator currently is in the content. For example, you can make this perceivable by outlining the element in another colour. This is to help users understand where they are in the content
Making sure that no important content is skipped by the keyboard navigator
Making sure that the whole page is fully operable using a keyboard navigator
Testing it yourself
Don't despair if it's not perfect
So there are a lot of things to think about here, and as I said earlier, this is an incomplete list. Chances are, you won't get this right first time. The most important thing is that you're Doing Your Best to create a more accessible experience. Every step you take is making your website better than before. The best advice I can give is to talk openly about what you're trying to do, ask your users for their feedback, and action that feedback.
If you need help improving the accessibility of your website, we are here. Just get in touch to arrange a free 1-hour chat.
Need a new website?
