User Testing for Web Accessibility

Apr 3 2013 by Toby Biddle | 12 Comments

User Testing for Web Accessibility

If you live in a major city, chances are, your buses, trains, and trams are accessible to people with physical disabilities and special needs. Your elevators and sidewalks, too. What about your website?

According to Forbes Magazine, people with disabilities represent the largest minority group there is — a $1 trillion market worldwide.

To provide a comparative perspective, consider that the total market for cloud services in 2011 is only $91 billion according to Gartner. The overall market for consumer packaged goods (CPG) in the US, according to McKinsey, is only twice Forbes’ estimate, at $2 trillion; that’s every CPG in the entire country — mouthwash, paper towels, Tide, everything.

People with disabilities use the Web in ways I call "smarter than the average bear." There are myriad assistive technologies out there that help solve this challenge.

Before we look at usability testing for web accessibility, let’s first discuss how user testing is normally done so that you can have a better view of how user testing for accessibility is unique.

Usability Testing 101

If you have no experience in usability testing, I’ll give you a crash course now.

In a usability test, the researchers watch as a user interacts with a product or website in order to find areas that aren’t user friendly.

What you’re trying to understand in a basic usability test is this: Given a task, how many participants can efficiently and successfully complete them?

For example, if a university wants to learn whether potential students can easily submit a request for a brochure on graduate programs, they might start by conducting usability tests to learn, quantitatively, how many potential students will be able to complete the task efficiently and successfully. Qualitatively, you can study the results for things you can do to optimize the potential student’s experience of finding a way on the website to accomplish this task.

Types of Usability Testing

There are several different types of usability testing.

Remote User Testing

Remote user testing is a form of usability testing where the tester moderates the test via phone, webcam, or an online tool, rather than being on-site with the user.

This is often done with the users scattered across the country (or the world), and budget constraints dictate that the tester find alternatives to conducting in-person tests.

Moderated or Unmoderated User Testing

Moderated user testing refers to research studies where there’s a live moderator spelling out the tasks the visitors needs to complete. In a face-to-face, moderated test scenario, the tester is typically monitored by a webcam or by live observers.

Unmoderated user testing usually gives the user a simple prompt, leaving it up to them to figure out how to do what is prompted.

Online User Testing

Online user testing describes the use of a web-based tool (as compared to test participants sitting in a room that’s set up just for the test).

Example of a Usability Test

Say you’re a usability tester. You might see a screen like the one below. This interface is specific to Loop11, my own user testing SaaS company.

What a usability test being conducted in a browser might look like.

In this case, the usability testers were given three distinct tasks to complete:

  • Freely surf Apple’s site for information
  • Buy an iPad case
  • Get information about iPad’s battery life

Say you’re conducting this usability test. Here’s the data you’re ultimately looking for:

Data of a usability test presented in a web page.

You can read more about this experiment here.

The Unique Challenges of User Testing for Web Accessibility

Now that you know the basics on how user testing works, you’ll have a better appreciation of the unique set of barriers people with physical disabilities face when they are browsing the Web — a set of difficulties most of us probably haven’t thought much about.

Examples of Disabilities That Can Affect a Website’s Accessibility

Below are some disabilities that can affect a person from experiencing the Web the way most people do.

  • Motor disabilities: Like what an amputee might experience when he or she can’t use a traditional mouse, keyboard or touchscreen to interact with a web page.
  • Visual impairments: This includes varying degrees and onset of the visual impairment, such as color blindness, low vision, and complete vision blindness.
  • Cognitive impairments: E.g., traumatic brain injury, brain disease, and so forth.
  • Hearing impairments: This includes varying degrees and onset of the impairment, such as complete deafness from birth or lower hearing capabilities developed as we age.

Example of an Assistive Technology

For children and adults with autism, one familiar tool is TalkingTILES. It’s a touch-based application — what’s called an "Augmentative & Alternative Communication" (AAC) app — that runs on any major platform and any computer.

A screenshot of what the TalkingTILES application looks like.

The idea is to empower people with speech or language disorders to communicate with the world around them, and with computers, using symbols and visual words.

Basic Suggestions for Minimum Website Accessibility

When it comes to user testing, there are a few simple steps we can take to ensure that our site is, at the minimum, able to hook up with assistive technologies. This, in turn, removes common issues from our websites and allows us to focus our tests on things that we would normally have a difficult time discovering without user testing.

Use Descriptive Label Elements for Input Elements in Web Forms

If a visitor is using a screen-reading assistive technology that interprets what’s being displayed on the computer screen (designed for visually impaired people), your web forms will be hard, if not impossible, for the person to interact with.

Below is an example of an <input> element with a good, descriptive <label>:

<label for="username">Name:</label>
<input id="username" type="text" name="textfield" />

Notice that the for attribute is important because it "links" the <label> element to the appropriate <input> element.

Test Site Navigation for Keyboard-Only Scenarios

Every component of your site must be navigable using only the keyboard. Some site visitors won’t have access to a mouse or touchpad, so your site should be accessible via keyboard-only navigation if needed.

A rudimentary test: Use the Tab key to see if you can get to all hyperlinks and interactive elements such as links in drop-down menus, <input> elements, buttons, and so forth.

Also, check to see if the currently active interactable element is highlighted and visible. Below is the Google search page showing how good Tab key navigation works.

The active/focused element is styled using CSS so that it is presented with a blue border.

Google search page showing Tab key navigation

When you press the Tab key, it goes to the next HTML element. The blue border is removed from the previously active element and is transferred in the currently active HTML element.

Google search page showing Tab key navigation

The styling and expected behavior is consistent.

Google search page showing Tab key navigation

Useful Alt Attributes for Images

Images on your website that are critical to understanding the content being presented must have a useful alt attribute value to assist people that can’t see images.

Of course, there’s always more you can do as a site owner and the above tips are only a few basic steps you can take to make your website more accessible for people.

Example of User Testing for Web Accessibility

When we talk about accessibility user testing, we refer to a set of usability studies focused on users who rely on assistive technologies to access web content.

The objective is usually to determine whether everyone, regardless of physical or cognitive impairments, can use a website.

For a recent project, Knowbility, a non-profit dedicated to increasing technology accessibility, ran an accessibility assessment using our software.

A screenshot of Knowbility.com home page.A screenshot of the Knowbility website home page.

Participants

They recruited participants with special needs for accessing websites so that the researchers can determine what barriers the participants might face in browsing a particular university’s website.

The participants consisted of:

  • People with visual impairments (spanning from low vision to legal blindness)
  • People with a cognitive disability (such as a traumatic brain injury)
  • People with a motor disability (e.g., an amputee)

Some participants used assistive technologies like screen readers, screen magnifiers, and adaptive technology for motor impairments.

Findings

Overall, the site tested could benefit from several improvements, though 6 of the 9 participants concluded the site was easy to use. Not a single participant thought it was difficult to keep track of their current location in the website. They all found navigation, on the whole, logical and well presented.

The three main accessibility problems encountered had to do with keyboard use and screen-reader-accessibility.

  1. Dropdown menus weren’t accessible via keyboard, making them inaccessible for visually and motor-impaired participants.
  2. Keyboard focus issues were discovered: some interactive elements lit up as intended, while others didn’t.
  3. A lack of headings (e.g., <h1>, <h2>, and <h3>) made navigation tedious and time-consuming for those with audio screen readers. Instead of being able to skip sections of content that weren’t relevant, the participants’ only choice was to listen through entire pages of content until they heard the relevant item come up on the screen reader.

These findings are often difficult to find without actual user testing. Because it’s one thing to know how to create accessible websites, but it’s another thing to actually witness how people with different abilities use a website.

Test Your Own Site Now for Accessibility

  • Can you navigate your site with a keyboard alone?
  • Does your site use headings that are broken up easily enough for a screen reader to scan effectively?
  • Are interactive elements adaptable to all audiences?
  • Are your links sufficiently distinguished for colorblind visitors?

There certainly are a lot of considerations in the world of accessibility testing, though this shouldn’t deter web designers and user experience professionals from ensuring websites are built with universal design in mind.

Learn More About Web Accessibility User Testing

In 2012, I ran a joint webinar with the good people at Knowbility. You can view the webinar on YouTube and it’s embedded here below.

To learn more about broader questions usability testers face, you can also check out my 7-series video called:  Online Usability Testing 101. It’s free, but you’ll need to enter your email address.

Some other resources and articles on the Web to read:

Related Content

About the Author

Toby Biddle is a website usability expert and CEO of Loop11, a tool for unmoderated online usability testing.

12 Comments

Jarod

April 4th, 2013

Honestly, user testing for web accessibility is something we’ve never looked at. I imagine it would make sense to hire a professional to go through the site rather than for a business owner to try and do it him/her self…

Edesigner

April 5th, 2013

Obvious to us who fight or rejoice with accessibility/usability issues every time we go on line, and yes, worry if the Webvisum extension doesn’t work with latest Firefox for a few days…grins.
Seriously, this needs to be said. I don’t like Apple, but I think the fact that their considering accessibility not only gave their product better usability for many, but got them a disproportionally large share of the smart phone market among blind-users.
Regards,

John Piechnick

April 6th, 2013

It is just a matter of being able to know what would work best for your target audience. Most web designers make some really good designs, but don’t put user factors into consideration.

Ricca Groupiest

April 9th, 2013

This article is very informative and I’ve learned quite a few things while reading. Web accessibility is an important issue that appears to be taking a back seat in this fast paced world of modern technology. Companies that are able to immediately address this matter will be able to provide access to a wider audience.

Laurent Asfaux

April 9th, 2013

Accessibility is more a consequence of the inner structure and semantics of a web site than a matter of target audience.

Any website can be reduced to a single piece of text if we remove all the surrounding markup. Then we can see the overall readability by checking this text is in the right order as we read it inline from start to end.

Then we can check the structural markup cut this text into more digest parts for the human brain : headers, footers, navigation, summary, detail…

The next level is the semantic markup : here we find headers, paragraphs, bulleted/numbered lists, hyphens, quotes, form elements, images, videos, canvas… any markup which adds a meaning to the enclosed text (or textual description for images,videos,canvas and form elements).

The last level is interactivity : here we have links, anchors, and Ecmascript (also called Javascript). Those markups react to user-driven events and can override any other markup by modifying the Document Object Model (DOM) tree.

Forget about styling and display on the docum

Laurent Asfaux

April 9th, 2013

Forget about styling and display of the document : it is the job of the CSS file(s) to adapt your HTML to be nicely rendered on any device, even a printer, a speech synthesis or a smartphone.

Michael Lysiak

April 11th, 2013

I really found your article interesting to read, because I think it is an issue many of us don’t consider when designing a website. I am certainly going to test my own site. Thanks

Jared Armstrong

April 19th, 2013

You outlined some very good information related to usability. The biggest issue I have had is tools to assist in testing the sites to verify they are as accessible as they can be, without losing other features.

@Edesigner thank you for pointing out Webvisum also.

Ayaz

April 20th, 2013

i always believed in a/b testing, helped me tons getting an idea what users can easily access and how it can be improved.

Alen

April 27th, 2013

It is important provide best information for your targeted audience or age group, suppose your website is related to wedding dresses so its important that you can offer 18 -40 age group dresses because its a age of wedding so that your targeted audience will like your design and don’t forget to make your website more attractive and take care of your page speed also.Anyways article is really interesting

Sally

May 30th, 2013

It’s kind of crazy to argue that it’s difficult as a designer to sacrifice some of the beauty of our work for usability, because that’s really what we’re always doing. But I think that is the mindset we get into when we’re thinking about accessible websites. Thanks Toby for highlighting this important issue.

Phil Barnes

June 13th, 2013

Great article, thanks for sharing. I agree user testing for accessibility is just as important as testing for usability or confirming the user experience. In my work I work with a lot of rich internet applications, where people are doing there work. Accessibility is a major consideration to ensure that everyone can do there job and complete it safely.

Leave a Comment

Subscribe to the comments on this article.