Accessibility and usability: designing a more usable interface for everyone
By: Brianna Koch
Tags: User Experience, Design, UX, Accessibility, UI

When I began advocating for accessible web design and development four years ago, I was met with a lot of hesitancy. People I worked with felt that accessibility was aspirational, but not practical to achieve. They assumed dedicating time and resources to improving accessibility was in direct conflict with the engineering desire to deliver value to customers quickly and the business desire to grow revenue.

I’ve found that this belief often stems from a common misconception that creating accessible software means building advanced, accessibility-specific features. Many people don’t know what accessibility means in a digital context and how it can be achieved.

Fortunately, the path to accessibility can begin with small and sensible design decisions.

Small decisions, big impact

UX/Product Designers make small decisions every day about how the UI should look and behave. These small decisions combined have a big impact on accessibility; put together, they can create huge barriers that inhibit someone’s ability to use your app or website.

Fortunately, this also means that the same small choices can result in a more accessible digital experience when we’re making informed design decisions. And often, these choices can elevate usability for all users.

This is because many accessibility issues are usability issues. They impact everyone’s ability to use a product, but have significantly more impact on users with physical and/or cognitive impairments. A minor inconvenience for one person can be a huge impediment for another.

Making the right choices

I compiled a list of 8 design guidelines to help myself and my colleagues make better, more informed design decisions. Each guideline impacts not only accessibility, but overall usability as well.

This list is by no means exhaustive. W3C’s Web Content Accessibility Guidelines provide much more detailed documentation on how to create an accessible web experience.

My list is just a starting point, with an emphasis on starting. Nobody should have to wait to feel like an expert in this space in order to start making positive changes. The longer we wait, the more barriers we unintentionally create.

My 8 accessible design guidelines

1. Provide large target areas

Bad: Small target areas; no hover effects.

Good: Large target areas; obvious hover effects.

How this improves accessibility:

Moving the cursor on a computer often requires the use of fine motor skills to accurately target the element you desire to hover, which can be a significant challenge for those with limited motor control. By providing larger target areas, there’s less reliance on fine motor skills to target a page element. With obvious hover affects, these users will know when they’re able to interact with their intended target.

How this improves overall usability:

It’s common for everyone, regardless of ability, to overshoot or undershoot the element they mean to click on when moving their cursor across the screen. This isn’t often noticed because it’s often immediately followed by quick micro-corrections to hit the intended target. By making target areas larger, we’re making it easier for everyone to target something without needing corrections. With clear hover effects, we’re making it known to all users that their cursors are in the intended area of the interface, reducing uncertainty. These changes enable everyone to interact with your interface more quickly, confidently, and accurately.

(Related: Fitt’s Law)