Tutorial Details

Download: Schedule of Events (PDF) subject to change
By Day - Selected
By Presenter
By Track
View My Agenda

How to Test for Web Accessibility and Universal Usability

Hands-on, applied, working session for experienced UX and UI practitioners who want learn more about testing Web pages and applications for universal usability

As the population ages, technology changes, laws change, our users becomes more diverse, and optimizing for search engines and language switchers becomes increasingly critical, understanding accessibility - or rather universal usability - also becomes an increasingly important skill for UX/UI practitioners. This is a hands-on tutorial on testing for universal usability.

Tutorial by Ann Chadwick-Dias (Fidelity Investments), Marguerite Bergel (Fidelity Investments)
Usability Fundamentals (UF)
9:00am to 5:15pm on Monday, June 04, 2012

About the Tutorial

Session Goals:

Participants in this tutorial will:

· Learn about the accessibility – and universal usability – of their own web site, widget, or interaction

· Understand the key principles of accessibility (that 508 and WCAG 2.0 support)

· Learn how to independently conduct accessibility assessments.

· Learn about the tools available (both free and for purchase) to aid in accessibility evaluations.

· Understand how to test for authentic, functional universal usability (versus standards compliance).

· Get a checklist that highlights a basic approach to testing for accessibility (based on Section 508, and added to from there).

Participant Knowledge or Experience Expected

· Participants are expected to have moderate experience in UX and UI design issues. At least a basic understanding of HTML and JavaScript will be helpful, but not required.

· This will not be a class on evaluating web sites against any particular set of standards, like Section 508 or WCAG. Specific standards will be referenced, but only in so far as they support the main focus - testing for functional universal usability.

· This tutorial will focus primarily on how to test for HTML, AJAX, and Flash/Flex accessibility. Presenters will conduct the tutorial using Windows machines with different browsers, an Apple iPhone, iPad, and a Droid. Attendees are encouraged to bring their own laptops and devices.

Audience Participation This tutorial will be almost entirely interactive, with roughly 30% of the time dedicated to the presenters actually presenting content. The tutorial will systematically review the Web pages (etc) that participants pre-submitted as a group. Instructors will demonstrate tools available and discuss testing strategies with the class. We will also encourage participants to simultaneously troubleshoot each issue on their own laptops.

When you are asked to provide an accessibility review, it means being able to conduct the review, make informed decisions about what is an equivalent, and deliver feasible design and/or development recommendations. This tutorial will teach participants how to do this drawing upon their existing expertise as UX/UI professionals.

Participants are encouraged to bring their laptops to test these pages, widgets, and interactions along with the group. Participants will gain practical knowledge about the level of accessibility of their own Web sites and leave with skills necessary to conduct their own accessibility reviews.

Tutorial Description

After presenting at various venues over the years, we have often been asked to consider providing an applied, hands-on tutorial on how to conduct accessibility testing. We decided to develop this content specifically for UPA, as we believe that this audience may have both an increased interest in – and understanding of – accessibility. Lastly, given recent proposed changes to the ADA in the US, which could mandate Web accessibility for all Web sites, we think this tutorial might be perfectly timed for this audience.

Our past history includes being two UX/UI design practitioners who were asked to evaluate pages for accessibility 7+ yrs ago without understanding much about how to test. At that time, we searched far and wide for exactly this kind of content – but could not find it. So, in some ways, this is the tutorial we wished we had 7 yrs ago when we first entered the accessibility arena.

Our rationale in offering it now is that these issues are becoming increasingly important as the worldwide population ages and both private and public institutions become increasingly aware of universal usability issues. Our goal is to provide participants with a new set of tools that they can offer to their firms, thereby increasing their value and their ability to advocate for all users – independent of their technology, age, or ability.

8:30-8:45 – Introduction and Overview

We will introduce ourselves, our roles within our organization, and what we do every day at our company in these roles. Participants will also introduce themselves.

8:45-9:15 – Understanding Universal Usability and Accessibility

We will discuss some case studies that demonstrate how universal usability (a single solution for all users) has succeeded at our company. We will show some video clips of user sessions demonstrating these points. We will also briefly discuss accessibility standards, including our own internal ones. Basic standards will (mostly) be covered in the process of testing Web pages throughout the day. But rather than considering standards in detail, we will focus on the high-level principles of accessibility to help participants remember the key things to test for when evaluating different types of web content, functionality, and technologies.

9:15-10:00 – Understanding the Tools of the Trade

We will demo and discuss the following tools (subject to change, as new tools are being developed continuously). We will use most of these tools during the course of the day.

· Paciello’s Web Accessibility Toolbar (WAT)

· WebAim’s WAVE Toolbar

· Other Firefox extensions/toolbars (web developer, juicy studio, web accessibility).

· Screen Readers (JAWS, System Access to Go, NDVA)

· Mobile Device Simulator

· Our Custom Grown Tool (CAT)

· Enterprise-level Commercial Software packages (from HiSoftware, Deque, Parasoft, IBM)

10:00-4:45 – Testing Web Pages

Our basic approach for most of the day will be as follows:

· Each participant will write down 1-3 publicly accessible URLs (must be from a single site) that s/he wants evaluation on an index card. These should have been submitted prior to the tutorial so that the instructors can ensure an adequate representation of pages and designs.

· We will randomly draw from the pile all day to begin evaluating sites. Depending on timing and number of participants, we will attempt to evaluate at least 1 page for every participant.

· When a participants site is drawn, s/he must be prepared to briefly (2-5mins) describe the site and its users and what s/he hopes to learn from our group evaluation.

· The trick will be to have a rich, representative set of pages to test against.

· If what the participants provide does not adequately cover each of the topics lists below, we be ready to present our own examples to ensure we cover every testing topic.

Evaluation Process

We will vary the approach and tools we use to test each page. We will strictly monitor time and discussion to ensure we get through a good representation of pages. The key for time management in this tutorial will be to cover at least 1 Web page for every participant AND ensure that we have covered all the critical topics for testing (in these representative pages).

A “basic” testing approach for each page will include testing for:

  1. Basic keyboard testing (logical tab order, focus management, etc.). This gets tricky with Ajax and Flash/Flex.

  2. Adequate contrast and proper use of color.

  3. Legibility, including text size and rendering.

  4. Search engine friendliness - page titles, meta data, descriptive links.

  5. Equivalent alt text on images.

  6. Equivalence for complex graphics.

  7. Proper semantic structure – headings, list markup, data and layout table markup.

  8. Logical code order.

  9. Links that open new windows and layers.

  10. Labeling of form controls, if applicable.

  11. Frame titles, if applicable (including iframes).

  12. Timed responses, if applicable.

  13. Audio/video content, if applicable.

  14. Other file formats (PDF, Flash, Flex).

  15. Additional Issues (equivalence versus technically accessibility, for example