Accessible UI and inclusive design
Accessibility best practices aren’t just useful for people with disabilities — they create a better user experience for everyone.
Web accessibility standards have evolved exponentially in the past decade. Inclusivity in software design is becoming the new norm and along with it brings about some serious challenges for how companies develop their web sites and applications.
The question, “Is it compliant?” is more commonly asked during design ideation phases today than ever before. Instead of designing around accessibility or backlogging long lists of bugs that inevitably slow design sprints, why not incorporate accessibility best practices from the very beginning — during the MVP stages of a product’s design?
Businesses are figuring out that when they build applications for strictly sighted or non-disabled individuals, it inevitably comes back to bite them. Incorporating web accessibility standards early in application development will save companies time and resources and provide a better user experience.
Accessibility affects every user
Let’s say you are using the navigation on a web site or app. You see a dropdown in the main navigation menu and click on it with a mouse. It responds by opening a series of list items that you can interact with.
Have you ever had “sticky” dropdowns? Where the dropdowns won’t close if you click outside of it or if you hit the escape button it still persists on the page? Or, the dropdown is so small and the text is so tiny that it is hard to interact with it? This presents a whole new set of issues on mobile as well. This is one of many examples where a lack of accessibility affects everyone who interacts with non-compliant software, and it amounts to dismal user experiences.
Addressing needs in UX with accessibility
Drawing from the previous example, can you imagine how a blind user or a user with motor control issues would use a dropdown? When you think about it, the needs of the disabled viewer mirror the needs of a non-disabled user in some ways. For example, increasing the click area of a dropdown and making it easy to navigate and open and close with a keyboard would improve the UX for both disabled and non-disabled users.
If coding best practices are followed, the page should have a hierarchy from top to bottom, with the most important information first like the main header and navigation. Some ways to make site navigation more accessible are:
- Make it easy to tab through page elements with a keyboard.
- Give proper labels to navigation items so the screen reader can recognize them.
- Click areas are large enough to easily navigate to with a mouse (or finger if it is a touch screen).
- Dropdowns open and close using the Enter and ESC keys.
- There is a proper contrast between colors.
There are multiple solutions to the same problem
In many cases, there should be multiple indicators for interactive items on a web site or app. That means that instead of presenting information in one way, such as a color swatch, you can include labels for those particular colors. That way, a non-sighted user would immediately know what color it is. It may seem redundant to label everything, but it will improve the user experience greatly.
You don’t want people who use your software to get frustrated and give up just because there wasn’t a proper label on a button or the tab order is off. That’s why recognizing accessibility best practices is so essential in the early software development stages. Developers won’t unnecessarily waste valuable resources debugging accessibility issues after the fact.
Keeping Perspective and an Open Mind
When approaching usability issues in your own software projects, keep an open mind. There are many different ways to improve UX while still being accessible. Accessibility is one of the many ways we can make applications more inclusive and enjoyable for everyone, and in turn, even help improve lives.
