How to make your website more accessible through IA

Katie Davidson

A UX designer with roots in digital marketing.

This was originally a presentation for World IA Day 2020. You can download a PDF of the presentation here.

How to get started with accessibility

It can be difficult to know where to start when it comes to accessibility. We all see the real world accommodations for disabled people such as extra-wide parking spots, access ramps, and automatic doors, but how do you design for accessibility on the web?
The same way you design anything else, you start by understanding your user.

Often when talking about accessibility I find that people focus on blind users, but when you think of accessibility needs in the broader spectrum, it’s a lot more empowering as a designer or developer.

Microsoft has this great graphic of different types of accessibility personas to design for. It allows you to consider, blind users, and senior users who maybe don’t use assistive technology, but have vision impairments. Or we can consider dexterity issues such as paralysis, or simply a mom holding her baby, and trying to get things done.

Microsoft's Persona Spectrum showing a range of user types with accessibility needs on the web
Microsoft’s Persona Spectrum

 

One group I often see left out, including on this graphic is cognitive needs. This is an area where information architects can make a huge impact, but because the conversation around how to accommodate this need is much more nebulous, they’re often left out of the conversation.

How you can help people with cognitive needs through information architecture

One of the best ways to help users with cognitive needs is by making sure the language you’re using on the site matches their mental model.

Find ways to reduce jargon.

If you have a series of steps a user needs to make, make sure you’re matching the user’s expectations.

For example what issues can you see with this very Dribbble worthy login screen? What would make it difficult for users with extra cognitive needs?

Visually appealing login screen with username, password, forgot password, and sign up button

This may feel like a trick question, but it’s such a common heuristic nowadays to see an option to create a new account through the login screen that by leaving it out you’re deviating from a common mental model.

It’s a delicate balance, but when considering users with extra cognitive needs, redundant elements can be helpful. Often their mental model is less flexible, and so accommodating users where they expect to be able to make a decision is crucial.

We’re not in the web’s 90’s Wild Wild West design era anymore, but there are still a lot of ways websites implement distracting elements.

The site Arngren which hasn't changed much from the 90's. Truly horrible user experience.
Medium is the new Myspace, where you’re bombarded with all the distractions you don’t need. Be careful when adding animations to your website. What might be a cute element for some, could decrease the usability for certain users with cognitive accessibility needs. When animations are unavoidable, using information architecture to allow users to make decisions in less distracting areas of the site can help those users without sacrificing creativity or other goals of animation.

Last but not least, be consistent. I’m happy to pick on Medium again here. If it feels like a new website every time you jump from page to page – this makes it extremely difficult for users to understand the “Language” of your site. If you look at Medium, not only do the menu options change between pages, the “Home Button” changes as well as the account section over in the upper right-hand corner.

4 different menu styles found on Medium

How to think about IA through an accessibility lens

I’m going to take a really broad approach to Information architecture, which at its heart answers the question “Where am I and where am I going?”

We often use visual means to communicate this, such as wizards, filters, and breadcrumbs, but how do we offer the same experience to our users who have additional needs?

Using popular ecommerce sites to show how accessible IA should be built

Take a journey with me as we explore two shoe ecommerce sites.

Nike will be our whipping boy because they have made no effort to make their site accessible, and I think a little public shaming is in order.

From an IA perspective, the biggest issue on this website is that they do not have any skip links. Every page you visit,  you must navigate through the entire menu, or in the case of their product listing pages, you must navigate through the entire filter menu (I counted 192 items) in order to get to the first result.

Zappos, on the other hand, has done a fabulous job of making its website more accessible through IA. They use skip links to not only give you a way to bypass the main menu and skip to the main content. On the product listing page, I am given options to experience the page in a similar way to sighted users, I can:

  • Skip to search results
  • Skip to filters
  • Skip to selected filters
  • Skip to pagination
  • Skip to sort

This is such a simple fix from a development standpoint, and it makes a huge difference to users on adaptive technologies. It should be standard, but it’s something I rarely see in the wild.

If we head on over to the giant in ecommerce, let’s see how our keyboard users would experience this website.

Amazon's Product listing page showing how many clicks it takes for users on assistive technology. The page is cluttered, and looks frustrating.

Above is a product listing page for Amazon.

As you saw on Zappos, I was able to skip the menu, but that is the only skip I am given on this page.
I’ve numbered each tab after the skip menu option. The buy now button is the 12th link on this page, and the product details start at the 27th click. The order feels completely random, as I am required to go through the social share options before I can interact with any product information. 

If you’re familiar with screen readers, you may think I’m being too harsh, so let’s take a look at how this page is structured using two popular navigation methods for screen reader users. 

Nonsensical headers found via the rotor for VoiceOver

This is the rotor menu for header navigation. It shows the headers in the order they appear on the page. You may notice that the headers are not in order,  H5 comes before the H1 – This is something you shouldn’t do… but it’s not the end of the world. The most important thing is for you to have meaningful headers (not just decorative) and you should be intentional about what order they appear for screen reader users – they may be different from what your sighted users experience.

You’ll notice here that while Amazon does have some descriptive titles, there is very little rhyme or reason to their order.

Landmarks on amazon via VoiceOver Rotor

Another way I would be able to skip to a desired area on the page is by using landmarks. This should give me a very low fidelity “Wireframe” view of how the page is structured. You’ll notice here that this does not feel tailored to a product description page, instead, it feels generic to the entire site. There’s no way for me to navigate to the purchase section of the page just using the rotor.

Using the same skip links found on Zappos, and without changing anything else about the structure of the page, we could improve the user experience for adaptive technology users simply by letting them skip to sections of the page, in the same way, we let sighted users visually break up information. As an MVP we could add after the “Skip Main Menu” option we could allow users to “Skip to Product Description” and “Skip to Buying Options.”

Amazon Product Listing Page showing how you could change the break up the information to help people using assistive technology

Let’s say we have a determined user, who has the patience to struggle through the product listing page, eventually, they will land on the purchase confirmation page.

Amazon purchase confirmation page showing how confusing it is for assistive technology users

Now let’s take a look at this page. It takes a minimum of 14 tabs to get to the place your order button. This is quite frustrating. As a sighted user, the first thing I notice is the place your order button. I’m also able to easily scan through my information and click place order. How can we use IA to create an equivalent experience?

Amazon purchase confirmation page showing how you could break up the information to make it easier for assistive technology users.

This is what I came up with, it allows non-sighted users and assistive technology users to experience the site in a similar way to me. I’ve broken the page into a “Confirm details” section, a “Legal disclaimer” section, and a “Place your order” section. This is a much closer approximation to how sighted users experience this page. 

You already know how to do this – Use your mobile brain

Have you already had the “Aha” moment? I already do these things when I’m creating mobile screens. As a savvy information architect, you already have to think about how you order and consolidate information to offer better user experiences on smaller screens. I suggest noting the structural changes you make between desktop and mobile – those should be considered for your accessible information architecture!

In fact, that’s what Amazon has done. Amazon’s “Accessible” website does just that. If you go to their description of their accessibility page it says that it is a paired down version of their mobile website that screen reader users often find easier to use.

Amazon's Accessible product listing page, showing that it is still a surprisingly frustrating experience

Is this a better user experience for people with accessibility needs? Yes…

Is it a good solution? It’s still not great. For example, users no longer have the option to skip the menu and the anatomy still isn’t logical.

It’s never ideal to have separate sites for different technology. How would our senior user with cataracts even know about amazon.com/access? It’s not a default option, and I only found it through a heated argument in a forum for low vision users.

Takeaways

Hopefully, by this point, you’re thinking about how you can approach information architecture through an accessibility lens. Next time you’re thinking about accessible IA, take a step back and think about what’s really happening on the screen. I suggest:

  • Trying to describe the page aloud to someone else
  • Look at your mobile screen and see what your priorities are
  • Am I offering the same “Scannability” to non-sighted users

More to explorer

How to pick the right hosting for your wordpress website image
Articles
Katie Davidson

How to pick the right hosting for your WordPress website

If you’re just getting started with WordPress, or if you’re looking for the right website hosting for your business right now – I’ve got the guide for you. This no-nonsense guide will tell you who the best website hosting options are, and who to avoid (you might be surprised!).

Read More »

Leave a Reply