“The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect. “
– Tim Berners-Lee
A useful concept in UX (and in life) is empathy, and there is an important distinction between sympathy and empathy.
Sympathy is feeling sorry for somebody else’s situation. If your friend were to break their leg you might sympathise by thinking that sucks for them. Empathy is putting yourself in somebody else’s shoes and attempting to understand what they are experiencing from their perspective. In the same scenario, you might empathise by imagining if it were you who broke your leg, and how that might feel.
Being able to empathise with your users is an important concept just for the general user experience of your application, but it is especially important when considering accessibility issues. Empathy makes issues more personal. It would be easy to sympathise with users who have some form of disability that may make interacting with an application more difficult, but it is easy to ignore or dismiss issues that don’t impact you directly.
Most people would agree that making an application more accessible to those with disabilities is the right thing to do, but when deadlines are looming and budgets are tight, doing what is right can often fall to the wayside in favour of doing the minimum amount required to get the job done.
It may be useful to know then that designing for accessibility is not purely an altruistic pursuit – Android’s accessibility guides state that:
“According to The World Bank, 15% of the world’s population has some type of disability. People with disabilities depend on accessible apps and services to communicate, learn, and work. By making your app accessible, you can reach more users.”
If you need to make a case to upper management that accessibility issues are worth looking into, then this is a good point to bring up. Potentially 15% of your user base could have some form of disability, which makes making sure your application is accessible attractive purely from a business perspective.
This may seem like a scary field that is going to take a lot of time to consider. First of all, you would need to understand what the accessibility issues even are, and then it would require more development time to accommodate for those issues.
There are varying degrees to how accessible you can make your application, but fortunately, there are steps we can take that take very little effort to make the application more accessible at a basic level.
Types of Disabilities & Accessibility Tools
It is useful to consider the range of disabilities that may impact the way a user interacts with your application and the kinds of tools that they might use to help overcome general accessibility issues. Some disabilities you should consider are:
- Hearing Impairment – if your interface involves audio instructions with no text, it may be difficult to use for users with hearing impairments
- Colour blindness – there are different types of colour blindness which will cause some users to be unable to distinguish between particular colours. If you rely on colour to distinguish between elements it may be difficult to use for some people
- Visual Impairment – people with visual impairments may rely on screen readers, modifying text size, or magnification tools to assist in using an application
- Physical disabilities – if your application requires complex gestures or input (pinching, double tapping etc.) people with physical disabilities like Parkinson’s Disease or Arthritis may have more difficulty using these features
- Seizures – People who suffer from epilepsy may be susceptible to flickering or flashing content
This is, of course, not all encompassing – these are just a few examples of ways that a person’s disability may impact the experience they have in using your application.
Although different disabilities may require different types of specialised peripheral aids, a good way to gain a basic appreciation of some of the accessibility tools available are to use those available on your device. If you are using an iOS device you can go to Settings > General > Accessibility and view the different accessibility tools, which include:
- Voice Over – reads the content/elements on the screen and describes user interactions
- Zoom – magnifies the screen
- Display Accommodations – invert colours, colour filters
- Speech – speak selected text or content of the screen
- Larger Text – increases text size
- Bold Text – makes text bold
It is enlightening to just turn these different tools on yourself and see what it is like to use your own applications and others. Of course, this only provides a naive perspective of what it would really be like to need to rely on these tools, but it does help to gain an appreciation.
Designing for Accessibility
There is much to learn when it comes to creating accessible mobile applications, but we can make a good start by just understanding the basics. Most of the accessibility principles that apply to web design also apply to creating hybrid mobile applications, so a good place to start is with the W3C Web Accessibility Initiative.
At a basic level, we can greatly improve the accessibility of our applications just by using HTML properly. HTML has a rich semantic structure that allows us to describe the content and its structure. We should make sure to use heading tags for headings, provide alt attributes for images, structure tables correctly using the <thead> tag for table headers, and so on.
We can also take this further by adding aria attributes to elements. ARIA stands for Accessible Rich Internet Applications and allows us to better describe the role of elements in web applications like those we build with Ionic. These are not like normal websites and so can be more difficult for assistive technologies like screen readers to interpret. We might have a button that closes a modal, for example, and we could add an aria-label=”Close” attribute to that button to help describe the purpose of that button.
It is important to keep accessibility tools in mind and make sure that your application is not getting in the way of those tools working as intended. For example, the Voice Over tool in iOS will read elements on the screen out to the user. The user can scroll through each element on the screen by swiping left or right. If you had three buttons in your navigation bar, the user could start at the left most button and Voice Over would read out what that button is, if the user then swipes to the left it will proceed to the next button, and then the next button, and then the content area, and so on. You could easily make this experience frustrating if you had a lot of elements on the screen that weren’t necessary – perhaps you add a bunch of icon elements to the screen because it looks good from an aesthetic perspective without realising that now people using Voice Over get stuck scrolling through these elements one at a time.
The Voice Over tool also highlights the need to label your forms well. If you were to tap on the username and password fields in an application, Voice Over would read out something like:
“Username, text field” “Password, secure text field”
If instead of adding “Username” and “Password” labels to this field you instead opted to just have icons depicting that these are username and password fields, it may be difficult for people using Voice Over to determine that they are interacting with a login form.
Following general user experience best practices will also improve the accessibility of your application. If your application is simple and easy to use, it is immediately going to be more accessible to all users. A bad experience in your application to a user who does not have a disability could be many times worse to a user who does.
The following is a list of easy wins we can keep in mind when designing applications, all of these points require little to no extra effort to incorporate into an application, but they will go a long way to making your application more accessible
- Use semantic markup – for example, use heading tags for headers, don’t just style a <div> to have a larger font size
- Correctly label forms, and use appropriate input types
- Make sure buttons have large tap targets
- If it is not necessary, don’t rely on complicated input/gestures to achieve tasks
- Use ARIA attributes to help describe the purpose of elements
- Use text or symbols as well as colour to distinguish between elements
- Don’t display too much content on a single screen
- If your application uses audio to communicate with the user, you should also display text
- If you use multimedia like videos or animations to explain concepts, make sure that people who can not view those will also be able to understand what they need to do by providing text instructions as well
Although we may not always make our applications as accessible as they could be, we can try to get the basics right.
If you would like to learn more about various accessibility topics that I have mentioned in this article, these following resources are a good start: