Accessible Design – Interfaces for Everyone

Have you ever wondered how it feels to live with a disability? No? Well, you are not the only one. However, approximately 15% of the globe’s population live with some form of impairment and yet the world quite often does not accommodate their needs. Truth be told, disabled people face much more difficulties during everyday life than the rest of us and that must change.

Luckily, there are many ways to lessen their struggles, like ramps, elevators, tactile pavings, or audio announcements on buses. From design to functionality, in the physical world, various disabilities are already considered long before the start of a new project.

But in the digital world, things are a tiny bit different, So, today we decided to dive into how accessible design can better the online experience for everyone. Yes, that’s right, for everyone, as Donald Arthur Norman captures this perfectly in one of his quotes.

“[…] invariably, when we design something that can be used by those with disabilities, we often make it better for everyone.”

– Donald Arthur Norman, professor and author

So what is accessible design anyway?

Accessible design takes into consideration all people, their needs, abilities, age, education, technological education, spoken language and so on. As the name says, this practice makes things we use every day, accessible to everyone. Think of the tactile pavement but for websites and applications. Although it is called accessible design, this is not the responsibility of the designer only. In fact, just like in the real world, it requires the efforts of the entire team, from project managers to designers to developers and back.

Inclusivity
http://ixd.prattsi.org/2017/10/universal-design-an-accessibility-solution-for-digital-humanities/

Should my company think about accessible design?

Yes! Companies should always think accessible design before the need is actually there. Why should we let our users down with a website or an app they can’t use or don’t understand? We shouldn’t. What we should do is think about those we might exclude and then create a truly inclusive solution.

Nowadays, we constantly use websites and apps as they ease our work and personal life. But sometimes they are also a great source of frustration and stress. Have you ever experienced an app that doesn’t work properly or you are just not sure how to use it? I bet you did, and you remember the frustration well. Now, imagine how irritating it is for people who experience this every day.  

frustrated gif
https://media.giphy.com/media/l0Iy88cWKqBeBN92o/giphy.gif

Not to mention that being inclusive not only gives existing users a better experience but also attracts users you didn’t even think about yet. However, that is easier said than done, especially since we wouldn’t know where to begin.

So before creating a truly inclusive design for a digital solution, let’s first take a look at the different types of disabilities we should keep in mind.

Different types of disabilities

Of course there are various types of disabilities people live with every day, but in general, they are classified into 4 categories:

  • Physical disabilities affect people’s physical functioning, mobility, dexterity and stamina either temporarily or permanently.
  • Hearing disabilities also known as hearing loss or hearing impairment and includes either partial or total inability to hear.
  • Visual disabilities refer to partly decreased ability to see, total blindness or colour blindness.
  • Cognitive disabilities are connected with intellectual activities (thinking, reasoning, perceiving) and conscious mental processes. Such as Down Syndrome, Dementia and Autism or learning disabilities such as dyslexia, dyscalculia and dysgraphia.

Each disability requires different adjustments, therefore, there are different aspects that demand our attention. In short, every digital product should be easy to interact with, easy to read, easy to hear and easy to understand.

How can we be truly inclusive?

Accessibility for everyone
https://www.pexels.com/photo/grayscale-photography-of-people-doing-team-hand-cheers-1457685/

Be empathetic. Empathy allows us to put ourselves in someone else’s shoes. It helps us understand people, their desires, needs and feelings. Only then we can create a truly inclusive digital solution. Therefore our teams need to embrace diversity and avoid creating digital projects that suit only one target group.

In simple terms, perceptions through sight, sound and touch are essential in understanding a website or app. So, if you are still unsure that you truly understand the needs of different groups of people, just ask them! There is no better source of information than an actual feedback from people who are affected by the impairments listed above.

The essentials of an accessible digital solution

For mobile development, both Android and iOS offer accessibility guides, encouraging companies to become more inclusive. For website design, the World Wide Web Consortium developed a series of accessibility standards called WCAG (Web Content Accessibility Guidelines). Basically, there are 3 main standards we need to follow that will ensure that our design is actually “accessible”.

Simplicity & Understandability

Digital projects need to be simple, easy to understand and navigate. The less effort a user has to make, the better. So, the less complicated your platform is, the fewer barriers there are between a service and a user, disabilities or not, the better.

Perceivability

Depending on the platform, users navigate around through sight, sound and haptics. Starting with the visuals, there are multiple principles that designers should follow for a friendly environment within their app/website.

Contrast and fonts

Contrast and fonts affect both people with low vision and colour blind people. The higher the colour contrast ratio, the better. WCAG 2.1 states that the minimum required contrast ratio is 4.5:1 for a regular text and 3:1 for a large text (18 to 14 point bold or font size). However, they recommend striving for enhanced contrast ratio which is 7:1 for a regular text and 4.5:1 for large text. Feel lost in all those numbers? No worries, there are platforms, such as Contrast Ratio, that help you assess the visual contrast.

Low vs. high colour contrast combination:

High contrast ratio

Low vs. high colour contrast combination viewed in black and white:

Contrast ratio in black and white

From the pictures above it is clear that high colour contrast for colour blind people is crucial. The “how to use” text is almost invisible in the low contrast, black and white version. Thus contrast ratio is a vital element when improving the legibility of the website/app.

When talking about accessible design, it is extremely important not to rely only on colours. We can see that without the text enforcing an error, a colour blind user wouldn’t be able to recognize that there is an actual issue. The same goes for the hyperlinks. We recognize hyperlinks mainly by its blue colour. However, if the user sees colours differently or just doesn’t understand them, he might not realize that that’s a clickable link. For that reason, it is a good idea to add a text window explaining the purpose when the user moves the cursor over that text.      

stop using only colours as a distinguisher

Another general rule to maximize legibility for people with low vision is to avoid small and thin fonts. We also encourage you to use filled in button shapes so the text contrast is high and the way forward in the app is clear.

use button shapes
http://osxdaily.com/2014/06/25/enable-button-shapes-ios/


Dynamic type

Dynamic type allows every person to customize their experience by increasing font size or the viewing distance. Hence, it eases the life of people with low vision as it enables them to tailor the design to their exact needs. In other words, make sure that your design has responsive layouts that handle even large font size. You can also enable refloating and restacking elements in your app to avoid cutting words. You should rather wrap your content while using the maximum of the screen width.

wrap content don't truncate it
https://developer.apple.com/videos/play/wwdc2017/806/

Dynamic type works more or less the same way as the responsiveness of a website on a desktop and phone.

Hierarchy

Hierarchy is the last principle within the legibility category. It is important that you display the most vital information first. Information such as frequently browsed topics, key features, functions and must-know information. Not only that but also the proper use of headlines and subheadlines is necessary. It both improves the user experience and your SEO.

Audibility and voice commands

Audio and voice control improve the user experience of people with vision impairment and motor disabilities tremendously. But, accessible design often makes the solution better for everyone. Think about how dangerous texting and driving is. With audio commands, you can keep your eyes on the road while dictating the text and asking your device to send it.

Another example would be screen readers while cooking. You found that perfect pie recipe, but because your hands are covered in flour, you can’t scroll through it. That is exactly when the screen reader comes handy as it reads the recipe out loud for you.

sound waves
https://www.videoblocks.com/video/sound-waves-moving-graphic-illustration-b6tvdppfgizdfmvjz
Screen readers and voice recognition

Every team should make sure that their website/app can be read by screen readers so even blind people can enjoy their content. VoiceOver is a screen reader for iOS apps, TalkBack for Android apps and ChromeVox for Google Chrome browser.

The user also needs to be able to navigate through the website/app with the use of his voice only. This is a great help for both blind people and for people with physical impairment. There are different voice control software used. Apple uses Siri, Android uses Voice Access and Google has Ok Google.

Dictation tool is another necessary assistive technology for disabled people. There are many dictation tools that can be used on different devices. To give you some examples, Voice Dictation can be used by users of Google Chrome and SpeechNotes by Android users. While Apple users can use Dictation or even Siri for some of the tasks.

However, all those helpful software and tools are useless if you don’t adjust your app/website to be read, navigated and dictated to by those tools. By adding alt-texts, legitimate descriptions to your images and by having a proper structure you can improve the experience of people relying on the screen readers. Also, don’t use pictures as the only means of forwarding information to your users as not everyone can see them.

Audible cues

Another great strategy for better customer experience is adding helpful sounds to your design. So that people with vision impairment are sure that they clicked the right button or did the correct action.

Captions and transcripts

Although videos, podcasts, audio tutorials etc. are very helpful for some, they are useless for people with hearing impairments. Therefore remember to add captions and transcripts to all sound content.

Haptics

Haptics allows people to explore the environment of an app through the sense of touch. Tactile features allow people to use their devices even if they have a vision and hearing impairment. Haptic feedback engages people physically through the sense of feel. Different types of vibrations and pulses can be used for different types of actions within your accessible design.

Operability

When you think about operability or the ease of navigation through an app or website, you must ask two main questions:

  1. Can users navigate through without using a mouse or touchpad?

A good example here is using the tab key to move from one section of the content to another or the use of the space key to stop or start a video. Furthermore, the order of features that the user will tab has to be reasonable and intuitive. Also, when the user selects a certain feature, make sure that the feature is highlighted – to add clarity to your design.

  1. Can the website/app function without confusing the users and giving them enough time to read and use the content?

Think about reviews in a carousel. If your carousel moves automatically, some readers might need more time to process the content than your carousel allows, that will break the UX. Hence, you need to make sure that your timing is perfected to accommodate slow reading time.

Furthermore, you should provide ways to help users navigate, find content and determine their location at your site. That can be done with for example the help of breadcrumbs.

Additionally, don’t forget to grant the keyboard-only user the possibility of both entering and exiting any interface element. So they are not “trapped” at your website. Thus, be careful with page layovers, pop-ups, Java-script widgets and plugins as all those can be troublesome for them.

A final wish

Accessible design, like many other things, isn’t a one-man fight. For a society to become truly inclusive, it is not about one company or one person trying to change the world. It is about uniting and fighting for the same goal. So our big wish is,  think about others, about their desires and wishes. Don’t choose the easy or mainstream way of designing digital solutions. Be the example, lead the way to a friendlier and more inclusive digital future for everyone!

your wish is my command gif
https://giphy.com/gifs/youngertv-tv-land-younger-miriam-shor-l3V0beSOVgOeddJSg

Do you have an interesting digital project in mind and aren’t sure how to move forward with it? Then don’t hesitate to contact us! We are always happy to help with all things digital. Also, every two weeks, we post an article on our blog. It’s always filled with facts and interesting information. So don’t miss out!

Recent Comments