--- layout: presentation title: Testing for Accessibility --Week 3-- description: Accessibility class: middle, center, inverse --- background-image: url(img/people.png) .left-column50[ # Week 3: Testing for Accessibility {{site.classnum}}, {{site.quarter}} ] --- name: normal layout: true class: --- # Important Reminder ## This is an important reminder ## Make sure zoom is running and recording!!! ## Make sure captioning is turned on --- [//]: # (Outline Slide) # Learning Goals for Today - **Get comfortable using existing freely available accessibility technology to manually support assessment** - How do we use automated tools? --- # Example Disabilities To Consider .left-column50[ Web browsing involves - Color - Text of different shapes and sizes - Content (images, words, sounds, animat.) - Typing (e.g. input to forms) - Mousing (e.g. clicking on links for navigation) - Comprehension (e.g. reading level) ] .right-column50[ Therefore… - Visual impairments - Difficulty understanding content - Difficulty hearing - Difficulty manipulating mouse our keyboard all affect accessibility ] --- # What is the goal? End users interact with the *same* website or app as anyone else End users may use browser features or a specialist accessibility tool to customize their experience **This is Key** Website or app designer provides the right structure and information to support this --- background-image: url(img/assessment/gmail.png) <audio controls="controls"><source src="img/assessment/gmail-normal.wav" type="audio/x-wav" /></audio> ??? But, lets back up a little to see why the web can be difficult for blind people to use. To interact with their computers, blind people use software programs called screen readers. Here’s a screen reader reading the GMail inbox. --- background-image: url(img/assessment/gmail-blackedout.png) ??? Although it may have felt longer, that was only 20 seconds. In 20 seconds, most of us would have found the message we wanted, and many of us not only would have found that message, but also read it and, possibly replied At this point, a blind user new to this site still has no idea that an inbox even exists. --- # But it gets much better Accessibly design pages, combined with user expertise, work very well  --- # But it gets much better Accessibly design pages, combined with user expertise, work very well  --- # But it gets much better Accessibly design pages, combined with user expertise, work very well  --- # But it gets much better Accessibly design pages, combined with user expertise, work very well  --- # But it gets much better Accessibly design pages, combined with user expertise, work very well  --- # Most Websites and Apps not Accessible - Over 60% of Android apps missing at least one label on a clickable element (out of 5721 apps tested) ([Ross et al, 2020](https://dl.acm.org/doi/pdf/10.1145/3348797)) - Over 80% of fortune 500 websites not accessible ([Loiacono et al, 2009](https://dl.acm.org/doi/pdf/10.1145/1562164.1562197)) - University websites are also partly to mostly inaccessible ([Campoverde-Molina et al, 2021](https://link.springer.com/content/pdf/10.1007/s10209-021-00825-z.pdf)) - Less than 1% of Twitter images had ALT text in 2019 ([Gleason et al, 2019](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605)) More study is needed, but overall, progress here is slow. Perhaps this is not surprising since only about 50% of universities in the US teach accessibility at all ([Shinohara et al, 2018](https://dl.acm.org/doi/pdf/10.1145/3159450.3159484)). --- # Best Practices for Testing Accessibility? .left-column50[ Automated Tools - [Review of many options](https://medium.com/@OPTASY.com/what-are-some-of-the-best-web-accessibility-testing-tools-to-evaluate-your-website-with-69def25a386) - Web: WebAIM's [WAVE](https://wave.webaim.org/); - Browser Extensions ([Comparison Article](https://medium.com/@OPTASY.com/what-are-some-of-the-best-web-accessibility-testing-tools-to-evaluate-your-website-with-69def25a386)): [WAVE](https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US); [Axe](https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US); [Lighthouse](https://developer.chrome.com/docs/lighthouse/overview/); [Siteimprove](https://chrome.google.com/webstore/detail/siteimprove-accessibility/efcfolpjihicnikpmhnmphjhhpiclljc/related); & other browser extensions - Phone apps: [Google Accessibility Scanner](https://support.google.com/accessibility/android/answer/6376570?hl=en&ref_topic=6376582) and [iOS.](https://developer.apple.com/library/archive/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html) ] .right-column50[ Design Guidelines (i.e. know them and apply them heuristically) Simulation (Try it yourself using accessibility technologies or simulators such as [aDesigner](https://www.eclipse.org/actf/downloads/tools/aDesigner/)) User Testing ] --- # Simulation In this assignment we will use off-the-shelf, freely available accessibility technology for simulation - Screen Readers - Switch Control - Magnification - Anything else you want to try --- # Screen Readers: Typical Bugs .left-column40[  ] .right-column60[ <BR> ![:youtube Banking failure, b-R5r_aKmKo] ] ??? - Reads the words on the screen - Keystroke to move to next area - Screen reader users, turn this on on your phone --- # Introduction to Screen Readers ![:youtube Screen Reader Demo, dEbl5jvLKGQ] ??? Demo also shows an example of a screen reader finding a problem such as lack of alt text or a badly labeled table --- # Switch Control ![:youtube Explanation of how to set up switch control, GQKEE9nI1lk] ??? - Switch users, turn this on, on your phone --- # Simulation Warning .left-column[ Simulation tends to cause people to underestimate what is possible ] .right-column[ ![:youtube One thumb to rule them all: video of gaming with switch control,2BhHwk9qSvI] ] ??? Remind them about drone video Don't fall into the trap of assuming that your ineptitude is the standard disability experience] --- # Magnification ![:youtube How to magnify your phone's screen, yHqJOSZN1zA] ??? - Magnification users, turn this on, on your phone --- # Break up into groups Decide who will - use a screen reader - use switch control - use magnification Open your phone's web browser and load [seattleschools.org](https://www.seattleschools.org/) --- # In your groups Visit [Seattle Public Schools](https://www.seattleschools.org/) The task you are evaluating is whether a disabled family can "Report a Concern" about how accessible the website is What are some problems you found? Try to separate out what is difficult for you as a beginner from what is a flaw in the website itself. [Share your findings](TBD)