A guide to accessible user experience

An introduction to building better websites for users

When it comes to the web, user experience and digital accessibility have surprising overlap. At their core, both disciplines are about building interfaces that people can easily understand and use. Usable, intuitive interfaces reach wider audiences and remove subtle obstacles between users and the interactions organizations on the web are trying to promote — purchases, subscriptions, likes, reads, etc.

What is User Experience?

User experience is the quality of a person’s interaction with things in the world. When it comes to websites, you can judge user experience by how easy to use a digital tool or platform is. We call this usability. Here are Jakob Neilsen’s five components to determine how useable a given platform is:

  • Learnability & discoverability. Can users easily find things & learn how things work?
  • Efficiency. How quickly can users do things?
  • Memorability. Can users easily remember how to use things when they return?
  • Errors. Can users identify and fix their mistakes?
  • Satisfaction. How pleasant is the design to use?

What is Digital Accessibility?

Digital or web accessibility is the degree to which websites, apps, and digital technologies are designed so that people with disabilities can use them. Building accessible websites means that we consider the following users:

  • Blind or visually impaired. Non sighted, peripheral blindness, or color blindness.
  • Deaf or hard of hearing. Non hearing or hearing impaired.
  • Those with cognitive impairments. ADHD, Down Syndrome, seizures, age.
  • Physical limitations. MD, arthritis, shaking, broken arm or other temporary injuries, age.
  • Perceivable. Users must be able to perceive the website’s content, which means providing text for those who cannot hear, and audio for those who cannot see.
  • Operable. Users must be able to operate the website with a variety of tools, which means keyboard navigation and screen readers must be available.
  • Understandable. Website content and functionality should be clear, concise, and easy to understand.
  • Robust. Websites should work properly across all devices and browsers.

Usability is accessibility

Traditionally, usability and accessibility have been treated as two separate disciplines with a small region of overlap. Upon close inspection, however, it’s clear that they aim towards the very same goals: delivering better experiences for users.

Don’t hide content

Users will not absorb a lot of content at one time — and they don’t want to hunt for pertinent information. Interface designers sometimes try to “cheat” these principles by cramming important information into hidden elements or forcing users to learn novel interactions that expose additional content. When important content isn’t readily available, users can become confused and frustrated. Worse still is the potentially disastrous effect on keyboard navigation, screen readers, and other assistive technologies. Here are some of the worst offenders:

  • Image carousels. Carousels are essentially mystery navigation. The user must click through or wait as images auto-advance to find out whether the content is relevant to them — most won’t do either.
  • Tooltips. Placing important information behind an interaction (click, hover) is a great way to make sure users don’t see it.
  • Form labels inside form elements. This may seem streamlined, but their disappearance can confuse and frustrate users.
  • Tabbed product or service comparisons. It is difficult to compare one body of content with another if we can’t see them at the same time.
Left: example of form labels inside of form elements; Right: example of form labels outside of form elements

Design consistent menus

Menus are the backbone of a website. They shouldn’t rely on subtle visual cues, complex controls, or novel interactions to send users on their way — and they need to be consistent across devices. In a consumer study led by Google that investigated media consumption, 90% of digital media users reported beginning a task on one device and resuming that task on a different device.

Graphic displaying 90% of Americans use more than 1 device per task.
  • Different device, different menu. Navigation on mobile should mirror desktop navigation as closely as possible both in interaction style and structure. Otherwise you can bet you’re frustrating multi-device users.
  • Hover menus. These can be annoying for the most nimble fingered among us, and since there is no hovering on mobile they imply inconsistent navigation across devices.
  • Split buttons / dual purpose buttons. Does the About Us navigation item drop down a submenu and serve as a link to the About Us page? You can bet plenty of your users don’t know that.
  • Ambiguous interactions. Will clicking Men’s Clothing expand a submenu? Or load the Men’s Clothing page? Menu interactions and links to content should be visually distinct.

Avoid overly architected experiences

Here’s Jakob Nielsen’s #1 Law of UX: Users spend most of their time on other sites. This means that users prefer your site to work the same way as all the other sites they already know. Translation: Don’t reinvent the wheel.

  • Overly complex interactions. Animations or visual effects (sliding, fading, etc) may look cool the first time you see them, but they quickly become irritating obstacles between users and their interactions.
  • Rigid user flows. Forcing users into pre-architected experiences (consumers vs. distributors, national vs. international clients) frustrates anyone who doesn’t easily identify with one of your categories.
  • Novelty for its own sake. Introducing novel styles for standard elements like links and bulleted lists — or using fonts and patterns meant above all to create an impression — often just annoys and slows down your users.
  • Multiple architectures. When links to the same page exist in two or more menu locations, it’s likely your site is poorly organized or organized along multiple schemas, both of which can confuse and frustrate users.

More on the accessible user experience

Every overly complex interaction, counterintuitive navigation, or extra hurdle between users and their goals is exponentially compounded for disabled persons who rely on assistive technologies. Designing to accessibility standards and around the POUR principles grounds your website on solid usability fundamentals, and better connects all of your users with high value interactions.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aten Design Group

Aten Design Group

Team of strategists, designers, and developers helping organizations build digital products to advance their work across the globe. www.atendesigngroup.com