cft

Accessibility and usability: designing a more usable interface for everyone

How to create a more accessible and usable experience one small decision at a time


user

Brianna Koch

3 years ago | 7 min read

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)


2. Use high color contrast

Bad: Below a 4.5:1 ratio.
Good: A 4.5:1 ratio or greater.
WebAIM’s Color Contrast Checker Tool

How this improves accessibility:
People with varying degrees of low vision and/or low contrast sensitivity will have more difficulty reading or viewing content with a low color contrast ratio. With higher color contrast, it will be easier to understand the content of a page.

How this improves overall usability:
Greater color contrast will result in less eye strain and fatigue for everyone.


3. Don’t rely on color for meaning

Bad: Seeing color is the only way for a user to understand something.
Good: Color adds to the design, but the user can understand it without color.

How this improves accessibility:
We can’t assume that everyone has the ability to perceive color. Your users could be color blind, low vision, or totally blind. They might be using a screen reader to listen to an interface rather than perceive it visually. By using text and/or symbols with alternative text to convey information, the UI can be understood when you remove color from the design.

How this improves overall usability:
Color requires interpretation. It makes people think about what the color represents. There is no innate meaning to color. It can vary in different cultural and/or situational contexts. Making color supplementary and the UI more informative will reduce user uncertainty.


4. Write specific link and button text

Bad: Button or link text that cannot be understood without additional context on the page.
Good: Button or link text that plainly states to the user what it does.

How this improves accessibility:
Sighted users may scan a page for links and buttons to see what options are available to them. Likewise, screen reader users may pull up a list of page links or form controls to listen through. Non-descriptive links (“click here”) or buttons (“done”) require extra effort by the user to figure out its intent. They must go back and find the surrounding context to discern its meaning.

How this improves overall usability:
Everyone saves on time and effort spent when interactive elements clearly state their purpose. Links and buttons generally have visual prominence and stand out when scanning a page. People will notice a link or button, then must search to find out its purpose if it’s not descriptive enough. People will think less and search less when the link or button says exactly what it will do. (Ex: “Visit help center” or “Submit application”)


5. Create a meaningful heading structure

Bad: A page is full of information, but lacks structure.
Good: Page content is organized into sections that are easily understood by the user.

How this improves accessibility:
Similar to how screen readers users can browse through a list of page links, they may also browse through a list of page headings (<h1>, <h2>…). If the page is organized into meaningful groups with descriptive heading names, the user listening to them will be able to quickly decide whether or not the section is relevant to what they’re looking for. Navigating via headings prevents someone from having to listen to all the content on the page to find something. It’s only possible when the headings are ordered and named meaningfully.

(Note that headings must be hierarchical in order to be most useful to a screen reader user. A specific heading level should never be used purely for a size/style preference.)

How this improves overall usability:
Listening to headings through a screenreader is similar to how sighted users visually scan headings. If content is organized meaningfully and the headings are descriptive, everyone will find what they’re looking for faster because they can quickly disregard what sections are irrelevant and identify what is relevant.


6. Clearly label forms

Bad: Placeholder text as labels; once the user starts typing, they lose information about a form field.
Good: Persistent labels; user always knows what the purpose of a form field is.

How this improves accessibility:
Users with cognitive impairments or visual impairments can be significantly impacted when form fields aren’t labeled properly. Placeholder text is often used instead of label for a “clean” interface look. Other times, placeholder text will hold instructions about how to fill out a form. Placeholder text generally has low contrast, making it difficult for someone with a vision impairment to read it. Screen readers may not be configured to read aloud placeholder text, so these users may not know what to enter. When typing, the placeholder text disappears, and the user must remember what they’re entering as they type. This puts strain on the working memory, making it challenging for users with certain cognitive impairments to fill out a field correctly.

How this improves overall usability:
Not being able to view/access the purpose of a form field as you’re typing increases cognitive load (or strain on your working memory) for everyone. By having form fields that are clearly labeled with plain language and sufficient contrast, all users will know what they’re supposed to enter in a field before, during, and after they use it. This prevents errors.


7. Make error recovery easy

Bad: Errors aren’t noticeable or descriptive.
Good: Users can quickly find what went wrong and understand how to correct their mistakes.

How this improves accessibility:
While we should strive to creative experiences that prevent as many errors for users as possible, errors are still bound to happen. It’s important for users to be able to identify and fix any mistakes. For users with vision impairments, this means errors have good contrast so they can be located easily. For users with cognitive impairments, this means error messaging gives instructions on how to fix it, and it’s phrased simply, so people don’t struggle when trying to diagnose and solve the problem.

How this improves overall usability:
High contrast will enable everyone to locate issues quickly. Making error messaging simple and instructional eliminates guesswork and helps everyone to correct their mistakes quickly and successfully.


8. Have highly visible focus indicators

Bad: You cannot tell at a glance which page element has focus.
Good: The element with focus has enhanced contrast and visual prominence.

How this improves accessibility:
Not all users navigate a webpage with a mouse. Some users may be keyboard-only because of vision or motor impairments. When tabbing through an interface, a user viewing it needs to be able to see where their keyboard has focus on the page.

How this improves overall usability:
Many people prefer to tab through an interface for speed, a common example of this being filling out forms on a web page. It’s important for anyone to know what element they’re focusing on at any given time for them to interact with it quickly and accurately.

Upvote


user
Created by

Brianna Koch


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles