Unexpected accessibility tips
8+1 unexpected but practical tips for testing accessibility and inclusive design.
Why inclusive design and accessibility
Inclusive design is about creating solutions that serve any possible needs of people.
Inclusivity —and accessibility— is not only about disabilities. Is about creating solutions accessible to everybody, either are disable or not. Is about caring for the usability in any circumstances people are facing. And to care about people’s environments, such as the devices that are using.
Inclusive design is about building and cultivate empathy for people.
Figures from Human Pictogram 2.0 designed by Da‐Yama from TopeconHeroes. Modified and animated by Chris Cid.How to create inclusive experiences
There are are plenty of design and development tools that we should always consider to use. Tools for the design stages, such as color contrast validators. And even more tools for the development stages.
In this article I will highlight some unexpected tips, that we can use in any stage. From early stages of UX design, to late stages of QA validations.
Test while riding the train
Our daily work at office is in an (almost) perfect environment. We need to consider that people most likely will be on the move when are using our apps or websites.
Since most of us also need to commute daily to work, we should take advantage of this time to test our works.
Even with only low‐fidelity prototypes, we can load them in our mobiles and test them in the train. I often use the POP app to load photos of prototypes and test them even for Apple watch!
Why train
People in a train are facing more distributions than most other use cases.
We need to consider if a journey that a user abandons, can be later recovered. People often need to pause a journey to check in which station they are, get off the car, and try to recover it much later. Meanwhile other distributions can occur on their mobiles, such as notifications.
We should always simulate these types of disruptions. And by commuting by train, we have plenty of chances to experience them.
On the development stage, to test on the move can provide us even more insights of an experience. Since we can test not only interactions, but also how an unstable network can affect the usage. When riding the subway, the network connection can often be very unstable. Such as, to dropped while on move and recover only when approaching a station.
What to investigate
There are plenty of areas that we can test in train. Some of them are:
- One‐hand mobile usage
- Portrait vs. landscape usage
- Clarity of information in wonky moments
- Missing action buttons, again while in wonky moments
- Motion sickness due to parallax effects or animated UIs
- Sight related sensory overload
Ask people when are in a hurry
People are switching to mobiles as their primary device. Because of that, they are more often disturbed, than when are using laptops or PCs.
Meanwhile —as designer or developers— we spent most of our time in front of a laptop. Often forgetting that the actual users of our products, are not able to focus for such long periods of time.
Mobile users are making decisions and taking actions in very short amounts of time.
From our side, we need to always simulate this way of decision making. A way to do that, is to ask people to check a prototype and make an action, when they don’t have time.
For example, 1 minute before an important meeting starts. Or even better, ask them in front of the WC entrance, when they rush to go inside!
On usability research and testing, is fundamental to set short periods of accomplishments. In fact, is the primary approach to gain valuable and accurate results.
What to investigate
This type of testing requires to analyze cognitive processes and biases, like:
- Assimilation of new information
- Rumination of causes and consequences
- Availability heuristic
- Functional fixedness
- ADHD (Attention Deficit Hyperactivity Disorder)
Hold your mobile with straight arms
For that one, let’s have some physical exercise!
Sometimes you might witness, people to hold their mobiles in awkward positions.
This might happened for variety of reasons. Such as for privacy, to avoid others taking a look at their screens. But also happens because of physical or motor abilities.
Arthritis, a disorder of joints, is the leading disability among adults in US. Accounting for more than 22% of the population.
By holding a mobile with straight arms, we can test variety of motor disabilities. And you will find that some tasks can become incredible difficult to accomplished. Such as, to succeed a CAPTCHA.
Hold your mobile as far as possible from your eyes. Where targeting action areas starts to become very challenging. Also you will discover that animation and motions starts to become annoying.
Tiredness because of the posture, can also provide us with very valuable outcomes.
What to investigate
Except the motor disabilities, we can also simulate mental symptoms, such as:
- Headaches
- Dizziness
- Nausea
- Vertigo
Review UIs with a projector
We often use MacBooks with monitors that are able to reproduce colors very accurate. When we also own iPhones, we see UIs through only high fidelity screens.
But people out there, might own devices with very low‐spec screen technologies.
Except the device specs, environment can play a critical role of how UIs are viewed.
In a very bright day, with the sunlight reflecting on the screen, colors can look very different. Even if people using the latest and greatest iPhones, they might cannot see what we designed for them.
To simulate and test UIs for these cases, try to see how UIs looks with a projector. Especially on low‐cost business projectors, where contrast ratios are low.
Make the room as bright as possible. And if you want to further challenge yourself, try to create UIs using only a projector!
What to investigate
Confirm the color hierarchies and possible informations that you communicate to people. With color contrast an obvious challenge.
Also, with a projector we can simulate symptoms or use cases, such as:
- Color blindness
- Low vision
- Cataract
- Devices with low contrast ratio screens
Take off your glasses
For us that we wear glasses, the oldest and most popular visual aid devices, there is a simple and easy tip.
Remove your glasses, take a extra distance from the screen, and enjoy! Try to scan the content, checking the information hierarchy, iconography, and so on.
Depending on what type of eye disorder we have, the outcomes —in some cases— might be very different. For that, it becomes more valuable to ask others to take the same challenge.
Are you wearing contact lenses, or you are “unlucky” to have perfect eyesight? No problem, there are ways to simulate this experience. Open your Sketch file, add blur on the UIs, and you are ready to go!
What to investigate
For this case, we check based on our personal eye disorder. But also we can check some types of mental disorders, such as:
- Dyslexia
- Anxiety
Wear gloves when using a mouse
I discover this tip by accident, some years ago, and became one of my favorite.
By wearing especially thick gloves, we can test in a short time various conditions; covering both usability and accessibility issues.
Movements can become difficult, simulating various motor and physical abilities. Pointing an action element, also becomes challenging. Even click or right‐click actions are not that easy as you might think.
For touch devices, the same tip works fine too. Thick, winter gloves that are working with touchscreens, are easy to find these days. It is also possible to make any type of gloves, touchscreen friendly.
What to investigate
We can simulate some environmental use cases, like: desks with narrow space. But primary we can simulate the following motor disabilities:
- Arthritis
- Parkinson’s disease
- Essential tremor
- Cerebral palsy
- Multiple sclerosis
Use only the keyboard
Moving to the next input device, the keyboard.
As developers we are working primary on our favorite text editor and terminal. Memorizing a large amount of key combinations, that enabling us to work faster.
When switching to a webpage, we should continue to avoid touching the mouse or trackpad. There are plenty of reasons that can create a usability disaster!
The most common issue that I am facing, is to remove with CSS the focus ring. The result is that we have no clue where we are, when navigating through keyboard only.
There are various ways to improve the keyboard experience through CSS. The easiest one is to assign always some styles both for :hover and :focus.
For designers, even if you might feel not comfortable with keyboard only navigation. I strongly recommend to try.
The order of elements and information structure, is primary an experience decision. By navigating through important user stories, we can gain very valuable outcomes.
What to investigate
As described above, the testing can focus on:
- Visibility of focus elements
- Navigation order
- Operation of interactive sections, such as carousels
Test on low‐spec device
As described above, people often are using devices that does not have cutting‐edge specs.
That is true especially for most developing countries. Where low‐cost, with outdated specs devices are often the majority. Through analytics it can become clear the percentage of the legacy devices.
More important is to understand how people are using these devices.
If you own a low‐spec device, use it as much as possible. If not, try to borrow or buy one. The cost is very affordable.
What to investigate
Depends if you are testing a web app or a native mobile app, some areas to focus on are:
-
Performance
- Loading speed
- Rendering speed
- Smooth animations or motion transitions
- Interactions
- Progressive enhancement structure, both for CSS and JS
- Features support, for native apps
Disable on browser rendering of JS, CSS, and images
Finally, a test for web development, that both designers and developers should try.
Any modern browser supports to disable rendering JS, CSS, and images. Resulting to render a page with only HTML markup.
Even in that case, people should be able to achieve —at least— primary interactions. Through progressive enhancement, should be able to walk through all major journeys.
Why to test this case?
― People does not turn off JS, CSS, or image rendering…
True, but that is not the case.
As described above too, there are cases that mobile networks are not always stable.
Such a case can be riding the subway. Where cellular connection can be “on” and “off” within seconds.
In some developing countries, or in rural areas, cellular connection can be very weak. Resulting often the timing‐out of loading external files.
For both cases, is not so rare as you may think, for large files to never load. If that happen for images, an alt description becomes a useful alternative. When happens for JS or CSS, we must consider not to block the usage of our web app.
Also, reviewing through HTML only, we focus on the bare information structure. Helping us to further optimize the IA and legibility of our apps.
Conclusion
Empathy is about understanding people, not only based on personas or other hypothesis. Is about trying to experience and understand their needs, situation, and environment.
To achieve that, we need sometimes to think out of the box. In the case of inclusive design and accessibility, we need to try some unexpected ways of using a product.