POINT OF view
Accessibility Is Not a Feature: How to Incorporate Accessibility in Your Project Methodology Phillip Golub, Associate Creative Director, SapientNitro
“There are a bunch of things that are not features. Performance is not a feature, internationalization is not a feature, and Accessibility is not a feature.” – Nicholas Zakas, Former Principal Front-End Engineer, Yahoo! The quote above speaks to Accessibility as a core component of any successful project methodology. It is not an afterthought. It is not an extra. It is an integral component of online experience design. The term “Accessibility” means that a product works if all people—regardless of ability or device— can navigate it, understand it, and complete the tasks they wanted to accomplish. Using a traditional architecture example, we cannot imagine constructing a building without wheelchair ramps, handicapped parking spaces, or Braille elevator signage. These requirements are known and acknowledged far before any construction actually takes place. With this in mind, take a look at the image in Figure 1. The architect clearly was aware of a legal requirement to factor in disabled people, but did not include it as part of the initial design process, and ultimately failed at the task. Figure 1: Post-Design “Accessibility”
Tacking on Accessibility after constructing a building simply does not work, not optimally at least. And the same holds true for web-based products. TYPES OF DISABILITIES In order to understand Accessibility, we first need to understand the types of disabilities and how they interact with computers. There are four categories: 1. Visual impairments (e.g., blindness, low vision, color blindness) 2. Hearing impairments (e.g., deafness, hard-of-hearing) 3. Motor skill impairments (e.g., multiple sclerosis, cerebral palsy) 4. Cognitive impairments (e.g., dyslexia, ADHD)
IDEA ENGINEERS
© Sapient Corporation 2012
POINT OF view
All of these categories, in any combination, can significantly impact one’s ability to interact with a web-based product, and can certainly apply to people as they age. Some disabilities can affect us temporarily, such as traumatic injury or illness, but can still impede normal usage behavior. THE PRESENTATION LAYER While there are back-end systems that feed into it, Accessibility is mostly about interaction elements that are on the presentation layer — things that people see, interact with, and consume: • Imagery: If someone is sight impaired and cannot see an image, there are mechanisms that must be in place to allow assistive technologies to “explain” to the user what he/she is looking at. These include ALT attributes, meta-tags, and accurate tab ordering. In addition, there are specific guidelines for optimal ratios between foreground and background colors. •Flash and Multimedia: Flash presents many inherent Accessibility issues. In fact, many Accessibility practitioners recommend strict avoidance of Flash as a front-end technology. However, it is possible to successfully implement an accessible Flash application, provided the right resources and ActionScript tactics are employed. There are also three primary rules one must adhere to for making multimedia/ video files accessible: o Closed-captioning, with the ability to turn captions on and off o Device-independent controls (i.e., keyboard operability) o Text transcripts of the recording • Code: There are set guidelines for front-end code as proscribed by the World Wide Web Consortium (W3C) that are too numerous to specify in this document. However, it is quite possible to provide rich interactive experiences that rely heavily on JavaScript, or that use layers and “lightboxes.” The W3C recommends using CSS and XHTML or HTML5 for this purpose. • Progressive Enhancement: There are ways to programmatically detect user dependencies to either enhance or gracefully degrade the experience based on the system technology being used. • Adaptive and Responsive Design: Ensure the user has a way to recognize when actions are occurring on screen when a disability does not allow normal viewing. BENEFITS OF ACCESSIBILITY When Accessibility is incorporated from the outset, it has immediate and long-term benefits on a site and the organization itself: 1. Usability: When done right, an accessible site is also a “more” site, not just for disabled customers, but for the non-disabled as well. 2. Scalability: When working with large, decentralized clients, internal development teams may very well have adopted some bad habits over time, such as copying and pasting old code across vast swaths of a corporate site. However, when the code is created according to W3C standards, this practice is far less risky, and the code base becomes much more reusable, scalable, and consistent. 3. Page Performance: The time it takes to load pages built with Accessibility in mind greatly decreases. 4. SEO: Accessibility also has immediate benefits on search engine optimization.
IDEA ENGINEERS
© Sapient Corporation 2012
POINT OF view
5. Multi-Channel: Accessibility leads to a mobile-ready site. Whether it’s the iPad, iPhone, Android, or other platform, we’ve found that companies that have built Accessibility into their web experience have a much easier time converting it later. ASSISTIVE TECHNOLOGIES How we code our websites and software affects the success of those with disabilities, who have different ways of using the computer and interacting with products. These are known as assistive technologies (AT). Screen Readers: The most common AT are screen readers (e.g., JAWS, VoiceOver). Screen readers do not literally read the visual screen but they allow the person using it to interact with the desktop or application by looking at and deciphering the front-end code. Screen Magnifiers: Screen magnifiers are useful to people with low vision or those who cannot read small text. Closed Captioning: Closed captioning provides real-time text translations of dialogue for those who cannot hear. Other Devices: One useful device is called Sip-and-Puff (SNP), which allows someone to control the computer using their breath rather than a physical mouse or keyboard. There is also voice recognition software, such as Dragon or Siri, which has recently come to prominence on the iOS platform. Many voice recognition applications for the Android and iPhone were first developed for the purpose of Accessibility. For people with motor control impairments, it allows them the ability to use the computer comfortably through voice commands. GLENDA’S STORY Glenda has cerebral palsy, which inhibits fine motor control. She can only use a keyboard with her left thumb and has slurred speech. But with her iPad and the Speak Auto-text feature (which reads the text aloud) enabled, she is able to type messages and communicate with people she otherwise would not have been able to. It was so cool, like another door had just opened for me! – Glenda Watson Hyatt, www.doitmyselfblog.com
Figure 2: Glenda, the “Left Thumb Blogger”
IDEA ENGINEERS
© Sapient Corporation 2012
POINT OF view
To see what Glenda sees, grab your iPad or iPhone. Go to your Settings and select “General.” You will notice there is an “Accessibility” option. Speak Auto-text is available here, but there are other Accessibility features available as well. For instance, White on Black is used by people with lower vision and can be easier to read due to optimal color contrast ratios. Mono Audio converts stereo audio files to mono, which is useful to people with deafness in one ear or otherwise only have the use of one ear. LAWS AND STANDARDS The legal environment today is quite confusing, but there is legal precedent for Accessibility as a requirement for both public and private entities. In the U.S., there is what is known as Section 508, but it only applies to federal government agencies and the products they procure. The Americans With Disabilities Act (ADA) is the broader disability law in the U.S. Since it was passed before the Internet was widely used, there have been some lawsuits resulting from companies (e.g., Target, Southwest Airlines) that did not cater to disabled users, resulting in lost revenue and negative brand reputations. As of this paper, one current pending regulation will require all airline websites and kiosks to be fully accessible. But the U.S. is not the only country with Accessibility laws. Both the UK (Equality Act 2010) and Australia (Disability Discrimination Act of 1992) have passed laws requiring Accessibility, as have other countries around the world. The World Wide Web Consortium (W3C) is an international body that sets standards and guidelines for the web. In 1995, they created the Web Accessibility Initiative (WAI), which released version 1.0 of the Web Content Accessibility Guidelines (WCAG). In December of 2009, the WCAG was updated to version 2.0, which has three levels of compliance: A is the minimum, AA is the target goal for private and government levels, and AAA is the height of compliance, but is incredibly difficult to meet, in part because some standards contradict each other. THE APPROACH The recommended approach to integrate Accessibility is a five-step process: 1. Accessibility Strategy: Understand what the clients’ Accessibility requirements are. If there is an existing product, assess it. Then, come up with a detailed plan and communicate it to the appropriate stakeholders. Some additional education may be required throughout this process to ensure the client understands what Accessibility means, why it is important, and how to measure success. 2. Implementation: Ensure the staff is trained on Accessibility and test for it while designing as opposed to waiting for the product to be completed. It will save time and money by catching problems early on, especially if industry best practices for Accessibility are employed throughout development. 3. QA and Validation: Decide what testing tools the QA team should use and determine what level of failure is allowed, since few products are completely accessible to all people in all contexts. Pursue the features or areas of the site that affect the greatest number of people in the greatest number of ways. After QA is completed, report any remaining barriers to the client with recommendations for further action. It is recommended to get approval, acceptance, and accreditation from an objective third party, of which there are several in the U.S. and internationally.
IDEA ENGINEERS
© Sapient Corporation 2012
POINT OF view 4. Deployment: Create a style and maintenance guide that includes tips for content creators and programmers when creating new content and web pages, as well as a policy statement. This will commit the company to a level of Accessibility compliance. 5. Maintenance: It is wise to recommend a governance model to centralize content creation, governance, and process where possible. A strong governance model will also have an audit structure in place to ensure that there is a timely schedule for future assessments as the site grows. Finally, hand off responsibility to the organization’s internal testing team so they can maintain the Accessibility that has been achieved. CASE STUDIES American Express: As a prominent financial institution, it was difficult to discern to what degree American Express was exposed to legal risk as a result of their known lack of Accessibility compliance. Based on high-level calculations, at a bare minimum over 235,000 of American Express’s U.S. card members were likely sufferers of visual impairment, with over 500 online account management enrollees receiving Braille statements. In 2009, legal action was threatened on behalf of a visually impaired lawyer in the UK and the Royal National Institute for the Blind. Before this threatened legal action, Accessibility was never a concern to technology, business, or marketing teams. In addition, they did not realize the percentage of the population that was disabled and how much revenue they were losing as a result. To solve the problem, process was integral. Since American Express already had an existing site and added new pages on a daily basis, it was necessary to tackle the problem along two paths. The first path was the uplift of existing pages. To establish the scope, Omniture reports were run to see where the majority of traffic was going and what percentage of pages were highly visible. Omniture found that over 90% of traffic was going to roughly only 700 U.S. pages of a site that exceeded 10,000 pages. A six-step uplift process was then employed that spanned roughly 16 months across over 10 development and marketing teams. The second path was the creation of a governance model. For American Express, which was a highly decentralized organization, development guidelines, training documents, and mandates were eventually put under the control of a central governing body in order to maintain and ensure Accessibility in the future.
PAGE COUNT
Establish total number of pages (omniture) and cut-off point for analysis
COMMUNICATION
Evangelize accessibility needs and establish business case
ENGAGEMENT
ANALYSIS
Formally engage impacted tech teams to begin workstreams
Set scope of uplift initiatives using industrystandard tools
BUILD
Redesigning impacted pages in compliance with agreedupon accessibility standards
GOVERNANCE
Ensuring ongoing compliance and adhereance to standards through process
Figure 3: American Express Strategic Approach
In the end, over 80% of domestic traffic and 70% of aggregate international traffic was uplifted in compliance with WCAG 2.0 levels A and AA. In addition, American Express received industry-standard accreditation by a third party vendor, Shaw Trust, as a fully accessible site. Finally, the Accessibility initiative yielded the necessary governance artifacts of both iGuide, which stipulated guidelines and standards in documented form, and iGovernance, the central governing body for all interactive projects, that together ensured and maintained standards and consistency across the organization.
IDEA ENGINEERS
© Sapient Corporation 2012
POINT OF view
Figure 4: AmEx OPEN Homepage
The NIH Curriculum Supplement Series: The National Institutes of Health wanted to teach middle school students how hearing works — including students with hearing or visual impairments. They solved the problem though an accessible, interactive Flash animation. Users could tab through the pages with the keyboard or toggle the closed captioning on or off. The site also used visual representations of sound waves and the sound spectrum, which allowed those hard-of-hearing to have a visual understanding of what sound is and how hearing works. The site was extensively tested, but as the Flash player was updated over the years and screen readers developed, some elements had to be updated. Even with those issues, the project was a success and the client was very satisfied. Macromedia, who owned Flash at the time, was also impressed and used the series as a case study for successful implementation of accessible Flash.
Figure 5: NIH Curriculum Supplement Series — How Hearing Works
THE BOTTOM LINE Web Accessibility has become a hot topic in recent years due to legal actions, greater awareness, and the increased number of people living with disabilities. According to census surveys, 18 to 25 percent of the population has a disability that impairs their use of the web. Clients should make sure that Accessibility is a priority, not only because it will have profound impacts on day-to-day activities, but also because they stand to lose brand affinity by ignoring such a significant percentage of their customer base. Your clients have more users with disabilities than you probably realize, and those disabled users have great purchasing power. Accessibility does not limit innovativation or interactivity, but not planning for Accessibility can have a very limiting effect on profitability. With proper planning and a little forethought, your projects, your clients, and their users can all reap the benefits of Accessibility.
IDEA ENGINEERS
© Sapient Corporation 2012
POINT OF view
ABOUT THE Author Phillip Golub is an Associate Creative Director in SapientNitro’s Arlington, Virginia office. Over the course of his career, he has consulted with various clients on the benefits, tactics, and strategic value of web Accessibility. Prior to joining SapientNitro, he led an enterprise-wide program for American Express to retrofit the most frequently trafficked pages of americanexpress.com across the globe. In that effort, he led training efforts for over 1,000 American Express employees across technology, marketing, and product management groups in three different countries.
IDEA ENGINEERS
Š Sapient Corporation 2012