Today, I saw a Tweet that reminded me of how little we stop and think about the accessibility needs of people:
Reading this broke my heart. I can’t imagine how it must feel to struggle with not only day to day activities like navigating public transport or grocery shopping, but to also be excluded from many places on the internet, simply because no one took the time to keep your situation in mind. Or worse: they assumed you won’t want to use their website or app just because you are blind or otherwise disabled.
Accessibility needs are rarely considered
The internet is, theoretically, a place that can be adapted to suit people with different accessibility needs. That is, theoretically. The shocking truth is that, in the UK, 70% of websites don’t even comply with basic UK accessibility laws. Imagine trying to order food, pay bills, or read the news on a website that wasn’t designed with you in mind. Imagine an invisible submit button, unreadable text, or even an entire page that seems empty. How are you supposed to live your life?
Imagine an invisible submit button, unreadable text, or even an entire page that seems empty. How are you supposed to live your life?
There are still too many designers and developers who consider themselves, their colleagues, or their test participants to be sufficient in telling them what is necessary and what isn’t. But how often do you test with users who have accessibility needs? How often, as a designer or developer, do you even stop to think about accessibility? Do you know all the ways that your website can be used with accessibility tools? Do you make it a priority?
Who do we design for?
Most apps and websites are designed in a way that generally requires their users to have the following well-functioning abilities:
- Visual perception (text, color, shape, images)
- Auditory perception (music, speech, notification sounds)
- Tactile perception (vibration, tactile feedback, pressure sensitivity)
- Motor function (movement, touch manipulation, gestures)
As soon as one of these abilities is either less functional or absent, it becomes significantly difficult to navigate and understand websites. These people will rely on screen readers, closed captions, tab navigation, or other accessibility tools to help them understand what is on their screen. However, in order for these tools to be beneficial, the site or app has to be created with these tools in mind, and sadly, the overwhelming majority is not.
We are conditioned to design for “the average user”. Maybe it’s out of ease, or because we really believe it will work for most people. The problem is that the average user doesn’t exist. By designing for the average user, we leave out most of the population. However, if we design for people with disabilities, our solutions will be beneficial to our so-called average user as well.
Create design habits to help include people with accessibility needs
There are many things that make websites and apps highly inaccessible, most of which are easy to solve. I’ve outlined a few, and included ways in which you, as a designer, can contribute to making your products more accessible. Incorporating these design practices will help you become a better designer, and it will greatly help the people with accessibility needs that are using your products.
Rely on more than one ability
If you create a link style that is only different from body text by color, it will not be sufficient for colorblind users to navigate. Another example is a picture with no description, which will not be accessible to people with poor vision. A notification that relies on sound alone will not be accessible for a person with poor hearing.
Are you starting to see the pattern? You should never rely on only one ability for people to understand or be able to navigate your websites or apps. There should always be at least one back-up modality that you can use to bring the same point across. Using sound? Use a visual cue as well. Using color? Use a shape as well. These are just examples, but by relying on one modality, you are automatically excluding people who do not have the ability to observe or manipulate that modality.
Make it a standard part of your design practice to signal your users by using more than one modality. And keep in mind that your back-up modality could be the only one some people are able to observe, so it should be just as effective.
Design a focus style for both mobile and web
When you press the tab key on a website, you will usually see a blue box outlining the button or link that is selected. You can then keep pressing the tab button to navigate through links and other clickable objects. Some websites, however, have opted to remove this keyboard focus indicator because it doesn’t match their style or brand. This may seem small, but it is actually a devastating move that causes people who rely on tab navigation to be locked out of using the site.
To fix this issue, you can create a focus style that is more in line with the design of the rest of the website. For designers, this should be a part of your design systems — not just for web, but for mobile design as well. Make sure you create an outline that is clearly recognizable as a focus state. This focus state can be different for links and other clickable items like buttons or images, as long as it is clear that the item has focus. Developers can implement this new style easily by creating a new CSS focus style.
This method removes the need to hide the focus indicator, and gives your users with accessibility needs a nicely designed, on-brand navigation experience.
Use descriptive link text
People who use screen readers may navigate a page by having only the links read out to them. If you have ever designed a link that only says “Click here”, you may already realize how this causes accessibility issues. When a user only knows “Click here” is the description for a link, that link could lead to anything. Now, if they want to find a specific link, they will have to have the whole page read out to them in order to navigate your site.
This is an easy problem to fix. Instead of just linking the “Click here” bit, you can just as easily link the entire sentence for context. Or better yet, rewrite the link in a way that is descriptive of where the link leads. The same goes for buttons: you will want to use a descriptive text here as well.
Use sufficient color contrast and font size
People with reduced visual ability or colorblindness don’t always use assistive technology. Instead, they often rely on adequate text size and color contrast to be able to see and read information.
To ensure your color contrast and text size are adequate, you can use one of several plugins that are available for all types of design software. My plugin of choice is Stark, which has plenty of free options that will help you test your designs and will allow you to understand accessible design better.
Design flexibility into page time-outs
Many forms have time-outs set to prevent security issues. This in itself is not a problem, but it does become a problem when people take longer than the allotted time because of the assistive technologies they use.
When designing a form that will have a time-out, make sure you also design a clear indicator signaling how much time is left, as well as an option to extend before invalidating the form. Making these options clear will allow people with different abilities to complete your forms on the first try.
If this is your first introduction to web accessibility, I highly recommend you learn about the W3C Web Accessibility Initiative. It is the standard for web accessibility, and you will learn a lot by reading their materials. For an easy-to-digest manual on accessibility needs, I think none are as good as Microsoft’s Inclusive Design guidelines. It perfectly highlights not only what issues people with disabilities run into, but also how solving accessibility issues can extend to the wider population. Another great resource is this detailed article on how every design component should be considered for accessibility.
If you have little experience in designing or developing for accessibility, it can feel quite daunting at first. To make it more straightforward, you can make mental checks to see if what you’re designing will be accessible. You can do this by considering the four modalities of web accessibility (visual perception, auditory perception, tactile perception, and motor function) and imagining if your website or app would be accessible if you didn’t have all four of these abilities. Other than that, use accessibility plugins, test users with accessibility needs, and keep learning!