UX and Accessibility
February 18, 2021 - 9 minutes read
User Experience and Accessibility share many of the same best practices, so incorporating accessibility into your design process does not mean creating new workflows or procedures. The main challenge for designers and developers is to stop building for the perfectly-abled user and realize that not all disabilities are permanent. We all have or will experience a temporary or situational disability at some point. The end result of applying accessibility principles to your projects will be a far more inclusive experience for everyone.
***
Introduction
As society becomes increasingly knowledge- and data-based, modern web technology has enabled content creators to share this wealth of information through interactive and immersive applications for consumers and business users.
The irony is that at a time when we have so much knowledge and data at our fingertips, a large segment of end users cannot consume it in a meaningful way, if at all.
According to the World Health Organization, approximately 1 billion people worldwide have a disability. In addition to this number, the W3C identifies an “extended market” composed of 2.3 billion people, or 30% of the world’s population, who may be affected by temporary or situational disabilities, such as age-related vision impairment or reduced motor ability because of an injury.
No one would knowingly design a website or mobile app that’s inaccessible to a significant portion of the population. Still, it happens because abled designers, more often than not, do not account for disabilities when making design decisions.
The process is not so much about designing accessible content as it’s about making the “abled” content accessible after the fact. Designing for an abled audience by default and then “accessibilizing” some content and features once the design has been implemented will result in a lesser experience for disabled users.
But what if the “abled” experience was not the default? What if the default was “disabled?”
Whether it’s a temporary impairment, like a broken arm with a cast, or a gradual slide into age-related issues such as poor eyesight and hearing loss, at some point, we will all experience a disability.
Starting from this perspective, that we are all or someday will be disabled, may seem challenging at first or even like an intrusion on your creative process, as it seems to dictate everything from color choices to writing style. But many of the best practices designers already follow for SEO and UX are similar, if not identical to the accessibility principles published by the W3C Web Accessibility Initiative (WAI).
Accessibility Principles
The WAI identifies four criteria that digital content must meet:
1. Perceivable, meaning the content can be consumed via sight, hearing or touch.
In terms of making content perceivable, visual communications, such as images, charts, and infographics will need text alternatives, and video content will need to be captioned. Relying on color to convey important information won’t work for those who are colorblind, and a small font size or low-contrast text color will frustrate people with poor eyesight.
2. Operable, meaning the content is navigable via accessible technologies such as keyboard navigation
This principle is critical to people with reduced ability to use hands and fingers (keyboard and mouse.) This includes everyone from a person with ALS to a work-at-home parent with only one hand available.
Support for keyboard navigation, as well as other technologies like voice recognition, will make your site physically operable for people with motor impairments, but as the WAI states, operability also includes “operable” design, i.e. how easy is it to use.
The first step in making your design operable is designing an interface that makes it easy for users to find content and orient themselves. Page titles, headings, breadcrumbs, clear differences between a visited and unvisited link are essential tactics, and they benefit all users.
The interface should also afford users time to comprehend the content. Do not refresh content automatically or end a user’s session because of a time limit. Do not flash, scroll or hide essential content, for example, in a content carousel. Avoid pop-up and pop-over windows.
Perhaps most critically, the interface should not cause seizures or any adverse physical reaction. Give users controls to start and stop animations. Avoid flashing content, especially at specific frame rates.
3. Understandable, meaning the content is presented in a clear, comprehensible way.
Content and design should not be confusing, frustrating, or overwhelming. This is especially true for people with cognitive disabilities. For example, moving text may be incomprehensible to a person with dyslexia. Animations or loud audio may upset or even trigger seizures in people with autism and epilepsy. Pop-ups may distract a person with ADHD. In other words, many people with cognitive disabilities do not respond well to surprises.
Therefore, a key element to making design understandable for the cognitively disabled is predictability. The actions users take that affect the content should be predictable, and when those actions result in a non-predictable result, be clear about why.
For example, if a user makes an error, use clear language to describe it and provide the information needed to correct it. Also, offer opportunities for content review and correction prior to any submission event, and present confirmation upon success.
Most importantly, functional elements, like buttons and global navigation, should function the same throughout the experience and, when applicable, always appear in the same place. Such predictability will benefit everyone, not just users with cognitive disabilities.
4. Robust, meaning that the content works across all technologies, including assistive technologies. This principle also applies to any future technologies.
Much of design’s robustness depends on the quality of the implementation and how well it enables assistive technologies to present content in a manner that’s perceivable, operable and understandable. In other words, it depends on the code’s robustness.
Writing robust code includes simple additions to existing elements. For example, form controls should have labels. Images should have alt text. Non-standard interface elements should have assigned roles.
But “robustness” also pertains to the structure of the code itself and how it accommodates the range of technologies users employ to access it. For example, the written order of the code should match the reading order (what the user sees on screen.) Screen readers read code. If it’s not in a meaningful order, it will not make sense.
Also, the WAI recommends making your site responsive so it can be accessed from devices of varying sizes. All core functionality must be accessible, no matter the size. The best way to achieve this is to use progressive enhancement, a design strategy where the presentation of content to the least-capable device takes priority over the “enhanced” version for devices that can support advanced features.
How to get started with accessibility
In addition to adopting the implementation tactics recommended by WCAG, designers and developers can take steps to advocate for the inclusion of accessibility principles in their work and their companies.
1. Bust through the “abled” bias
The best way to accomplish this task is to talk to people with disabilities. If your design process already involves user persona development and usability testing, nudge your team leader to expand the research to include people with disabilities. Discovering how disabled people will use your design ensures from the start that you will meet their needs. It will also help establish accessible design standards for your company.
2. Adopt and promote standards for projects
Don’t just apply accessibility principles to your own work. Work with your team leaders to develop standards and incorporate accessibility into the overall project timeline. It’s an easy case to make given how much best practices concerning UX and SEO overlap with accessibility best practices.
3. Test with assistive technologies
The same way you preview your work on various devices to ensure the experience is consistent, you should also evaluate it using assistive technologies and tools. If your computer has a screen reader built-in, activate it and try to navigate a website. You will soon learn the importance of meaningful labels and reading order versus page order.
Also, there are many free tools available to help you make good design decisions from the start. For example, The Colorblind Web Page Filter where you can input a URL and see how four different kinds of color blindness affect perception. Another great tool is whocanuse, where you can easily test out color combinations to ensure you’re meeting WCAG contrast and size guidelines.
4. Understand the laws
The Web Content Accessibility Guidelines (WCAG) from the World Wide Web Consortium have been adopted by many organizations and governments around the world, so if you use them are your standard, your chances of violating any laws are slim. But you should still familiarize yourself with the numerous laws regarding accessibility.
Worldwide, the laws and regulations that accessibility-minded governments have instituted are similar in that they mandate compliance for all public sector websites and apps, as well as those for essential commercial services.
But there are important differences, particularly in the U.S. at the state level. For example, in California, ADA plaintiffs can sue for three-times the damages if your content is inaccessible (two state violations, one federal.) Unscrupulous lawyers have been taking advantage of such loopholes in New York as well, where state legislators want to make the WCAG a legal standard for compliance to prevent lawsuits from reaching federal courts.
Needless to say, a compliance violation can become very costly for your company or client.
5. Take it one step further
Accessibility in UX goes far beyond picking the right colors and writing good code. Once abled designers adopt the mindset that we are all (or will be) disabled, they will hopefully begin to recognize how certain design choices exclude people and that they should strive to make their designs as inclusive as possible.
Microsoft has developed a methodology for Inclusive Design, and their site offers excellent resources and activities that help break through the abled mindset and produce more usable, inclusive designs.