28
© 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Accessibility Testing – Technology, Human Touch and Value Srini & Shalini, PayPal / @PayPalInclusive

Accessibility testing technology, human touch and value

Embed Size (px)

DESCRIPTION

Presentation made by Shalini Subramanian and myself at STeP-IN Summit 2014.

Citation preview

  • 1. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Accessibility Testing Technology, Human Touch and Value Srini & Shalini, PayPal / @PayPalInclusive

2. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 2 About Speakers Srinivasu An accessibility evangelist, technologist, believes in inclusion . Shalini - An enthusiastic and ambitious tester who loves testing and is passionate about accessibility. 3. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 3 Overview of Contents 5W1H on accessibility Web Accessibility Standards Common Myths about Accessibility Frequent Accessibility Errors Need of a Customized Accessibility Evaluation Tool Conclusion 4. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 5W1H On Accessibility 5W1H What is it? Accessibility defines to term ensuring a product / service is equally functional to all users regardless of abilities or limitations. 5. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 5W1H On Accessibility 5W1H - Why do we need it? Making a product available to wide range of users. Did you know? Around 650 million people with disabilities across the world. Around 70 million people with disabilities in India alone. Increased number of elderly people who also rely on technology. Large number of users rely on mobile devices 6. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 5W1H On Accessibility 5W1H Who should test? A designer during design. An engineer during development. A Quality Analyst during testing. An end user. 7. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 5W1H On Accessibility 5W1H When to test? During Product Requirement Analysis. During Design. During Engineering. During Quality Cycle. During User Acceptance Testing. 8. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 5W1H On Accessibility 5W1H Who benefits? Users who affected with temporary disability. Users who run into situational disability i.e. broken mouse. People with disabilities. Users rely on mobile devices. 9. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 5W1H On Accessibility 5W1H How to plan? Include Accessibility as part of product road map. Have checklists available handy. Provide orientation and technical related training to engineers & QA. Include users with disabilities for testing. 10. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Web Accessibility Standards Web Content Accessibility Guidelines (2.0) ADA and Section 508 (USA) European Accessibility Act 2012 Guidelines for Indian Government Websites Australia Disability Discrimination Act UN Convention on Rights of Persons with Disabilities Article 9 (http://www.un.org/disabilities/default.asp?id=2 69) 11. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Common Myths About Accessibility An Accessible web page is boring An expensive effort Hard to achieve Who needs it? Time consuming Not on product priority list Only for screen reader user Ref: http://www.icdri.org/Kynn/common_myths_about_ web_accessibi.html 12. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Frequently Seen Accessibility Issues Missing alt text for images Inappropriate / no Heading structure Missing labels for form fields Missing focus indication Lack of keyboard operability Confusing links (i.e Click here) Poor color contrast Inaccessible widgets Focus does not move to modal dialogs Inaccessible CAPTCHA Inaccessible media player 13. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Accessibility Testing Automated using tools like HTML Code Sniffer, WAVE, Color Contrast Analyzer. Manual testing using assistive technologies. Keep all users in mind. Test with passion: Put your shoes into different users. Testing with keyboard Only (For sighted users who are unable to use a mouse). 14. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Accessibility Frameworks The PayPal Accessibility team is actively contributing to the development community with various open- source accessibility-related projects. Bootstrap Accessibility Plugin - an extension for the Bootstrap 3 web development framework that makes many of the components of this library accessible for keyboard and screen reader users. 15. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Accessibility Frameworks Skip-To widget - creates a dropdown menu consisting of links to the important places on a given web page making it easier for keyboard users and screen reader users to quickly jump to the desired location. 16. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Accessibility Testing Automated- Men should think ; Machines should work There are many automation tools available. Few of them are: Wave Web Developer Kit Color Contrast Analyzer HTML Code Sniffer 17. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. NEED of a Customized Accessibility Evaluation tool There are several tools available for testing accessibility: But each tool tests a set of scenarios Has the inability to test internal pages Does not have all the relevant information at one place etc., 18. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. NEED of a Customized Accessibility Evaluation tool When we saw HTML Code sniffer book marklet, we felt it's rather difficult for people to use specially for viewing the results and filing bugs. That said Code Sniffer has a great set of rules defined and have an option to evaluate against different guidelines such as WCAG 2.0 A, AA and AAA levels, Section 508 etc., 19. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. NEED of a Customized Accessibility Evaluation tool So we wanted an easy interface and created a node app with phantom.js and we have also customized the rule set to show only WCAG 2.0 AA for now. Reason for this is we would want to encourage our co-workers to start with ease and then we can introduce other levels. 20. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. NEED of a Customized Accessibility Evaluation tool After customizing, the interface will show results in a table format that includes Priority level, issue, code snippet, and principle from WCAG 2.0 and a link to technique. Instead complicating efforts, for now we have decided to prioritize based on the principle and reason we are showing code snippet instead line number is in the era of dynamic code build, line numbers can get vary pretty quickly. 21. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. PAET Automation Tool Architecture This image displays the architecture model in which the PAET Tool has been designed. 22. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. How did we automate? A maven plug-in was created. Accessibility Report Maven Plugin is used to generate accessibility error reports for all the PayPal pages and is available as a consolidated error report at /target/surefire- eeports/RuntimeReporter/AccessibilityErrorReport. html. This plugin leverages the internal Accessibility server for doing the evaluation. 23. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. MAVEN Configurations enablePlugin - true or false - To enable or disable the plugin. Default is true. accessibilityServer - The accessibility server which should be used to evaluate the pages for error. testOutputFolder - The full path of the test output folder which holds the test execution report (Runtime Reporter data). This can be used if you want to override the default location of test output folder, which is target/surefire-reports. 24. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. How it Works? In this agile world, the changes are so frequent which has led to the evolution of Continuous integration. By adding the plugin in our pom.xml file, we can integrate testing the accessibility related issues as a part of our Continuous Integration. The plugin is invoked post the test phase during the maven build. 25. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. How it Works? We integrated it with an automation framework developed using Selenium Web Driver called Bluefin. The page source created from the automation execution reports is sent as input to the PAET Maven plugin which in return sends this to the PAET Server. 26. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. How it Works? The PAET Server evaluates and validates the reports and sends it back in the form of a html. This HTML is taken as input to the PAET Maven plug in and it generates the Accessibility Error Report. The accessibility error reports are created along with the html reports which gets generated from Selenium as a result of execution. 27. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. Conclusion With too many things in focus like speed, adaptive and responsive, Accessibility takes a backseat before it is released to the public. Inaccessible components are repeatedly incorporated into every new project which leaves behind many inaccessible websites. It becomes every individuals responsibility to contribute their efforts in empowering the people with disabilities and creating an inclusive society that does not discriminate against people with disabilities. 28. 2014 PayPal Inc. All rights reserved. Confidential and proprietary. 28 Thank You! Contact PayPal Accessibility Follow us on Twitter / @PayPalInclusive