background-image: url(img/people.png) .left-column50[ # Week 3: Testing for Accessibility CSE493e, Fall 2024 ] --- name: normal layout: true class: --- # Important Reminder .left-column[ ] ## Make sure zoom is running and recording!!! ## Check on zoom buddies ## Make sure captioning is turned on --- [//]: # (Outline Slide) # Learning Goals for Today - How can we use accessibility technology to assess accessibility - How do we use automated tools to assess accessibility - Get comfortable using existing freely available accessibility technology to manually support assessment - Some basic interaction modes for screen readers --- # How might access impact interfaces? Web browsing involves - Color - Text (shape and size) - Content (images, words, sounds, animation) - Typing (e.g. input to forms) - Mousing (e.g. clicking on links for navigation) - Comprehension (e.g. reading level) --- # How might access impact interfaces? Therefore… - Visual impairments - Differences understanding content - Differences hearing - Differences manipulating mouse or keyboard ....and more all affect accessibility --- # What is the goal? All users interact with the *same* website or app as anyone else Users may use browser features or a specialized accessibility tool to customize their experience -- **This is Key** Website or app designer **must provide the right structure and information** to support user tools --- # Most UIs are not Accessible - Over 60% of Android apps missing at least one button label (out of 5721 apps tested) ([Ross... 2020](https://dl.acm.org/doi/pdf/10.1145/3348797)) - Over 80% of Fortune 500 websites not accessible ([Loiacono... 2009](https://dl.acm.org/doi/pdf/10.1145/1562164.1562197)) - University websites partly to mostly inaccessible ([Campoverde-Molina.., 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)) --- # Is this changing? Progress here is slow. - Only about 50% of universities in the US teach accessibility at all ([Shinohara... 2018](https://dl.acm.org/doi/pdf/10.1145/3159450.3159484)). - You all will be among the most well trained soon! - Recent DOJ rule caused UW to hire a team of CSE undergrads to help remediate! --- # First step: Assess 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 scanners - [Google Accessibility Scanner](https://support.google.com/accessibility/android/answer/6376570?hl=en&ref_topic=6376582) - [iOS](https://developer.apple.com/library/archive/documentation/Accessibility/Conceptual/AccessibilityMacOSX/OSXAXTestingApps.html) requires source code! --- # Other assessment methods Proprietary: - [Evinced](https://www.evinced.com/) does iOS, web and more. - [Grackle](https://www.grackledocs.com/en/) does google docs - Lots of pay for help shops Design Guidelines (i.e. know WCAG and apply it heuristically) Simulation (Try it yourself using accessibility technologies or simulators such as [aDesigner](https://www.eclipse.org/actf/downloads/tools/aDesigner/)) User Testing --- # Simulation -- Next Assignment 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 --- # .red[Simulation Warning] Simulation tends to cause people to underestimate what is possible .right-column[ ![:youtube Apple advertisement titled The Greatest,8sX9IEHWRJ8] ] ??? Don't fall into the trap of assuming that your ineptitude is the standard disability experience] --- # Wednesday's [Assessment Homework](/courses/cse493e/24au/assignments/website.html) Identify 3 tasks (Install and) run an automated Accessibility Checker Also test it yourself with **two** accessibility technologies Capture problems using a Usability Assessment Report --- # Field Trip Try out [WebAIM for the UW Library](https://wave.webaim.org/report#/https://www.lib.washington.edu/) ??? Talk about how the type of errors found relates to the concepts we've discussed so far --- # Usability Assessment Report You may be familiar with this concept. Also called - Usability Problem Report (UIM Ch11) - Usability Aspect Report (CMU) - Bug/Issue Report (Bugzilla, JIRA, Rational) Audience: primarily developers Content should be - Specific and convincing - Accessible --- # Example from the UW Library - **Name** as "Missing Image ALT Text"; - **Evidence** Guideline violated: 1.1 ([Text Alternatives](https://www.w3.org/WAI/WCAG22/Understanding/text-alternatives)); - **Screen Shot** as the image and URL ([lib.washington.edu](https://www.lib.washington.edu/));  --- # Example from the UW Library - **Name** as "Missing Image ALT Text"; - **Evidence** Guideline violated: 1.1 ([Text Alternatives](https://www.w3.org/WAI/WCAG22/Understanding/text-alternatives)); - **Explanation** None of these images have ALT text -- - **Severity** Justify severity in terms of - *Frequency* Is Problem common or rare? For which types of users? - *Impact* Is it hard or easy to overcome this? - *Persistence* Is there a way to avoid this problem? What do you think? Discuss with your neighbor and post [on Ed](https://edstem.org/us/courses/67367/discussion/5426947) ??? - The frequency with which the problem occurs: Is it common or rare? - The impact of the problem if it occurs: Will it be easy or difficult for the users to overcome? - The persistence of the problem: Is it a one-time problem that users can overcome once they know about it or will users repeatedly be bothered by the problem? This is debatable, but frequency is low (it only occurs once on this site. If you are writing up all missing image alt text as a group, you might increase your estimate of frequency, but this site doesn't appear to have a lot of undescribed images); impact is low (it is possible to determine the purpose of this image by either clicking on it to see what it links to, or inferring some things from the external link and image file name (both unpleasant alternatives for a screen reader user); and persistence is high (it's not going to go away). --- # Example from the UW Library - **Name** as "Missing Image ALT Text"; - **Evidence** Guideline violated: 1.1 ([Text Alternatives](https://www.w3.org/WAI/WCAG22/Understanding/text-alternatives)); - **Explanation** A screen reader won't be able to describe this image - **Severity** 2. High persistence, middling frequency, impact is low (you can click through to learn more) - **Possible Solution** Add ALT text and improve practices to add better alt text consistently. A good example of correct ALT text for this would be something like "pictures of #vote buttons in the background fading to the text '2024 Election Guide'" - **Relationship to other problems** (TBD, probably other images with similar issues) --- # WebAIM is really about WCAG We'll be covering that in the next two classes It can be hard to understand the interface if you don't understand WCAG --- # QUICK BREAK Good time to stand and stretch --- # (On-desktop) screen reader interaction Three core interaction patterns: - Linear navigation through like objects - Hierarchical navigation through logically related objects - Switching between object types --- # (On-phone) screen reader interaction .left-column[  ] .right-column[ Three core interaction patterns: - Swipe to navigate linearly - Touch to navigate spatially - The first “hit” of an interface element will focus, double tap to select/activate that interface element ] --- # Now let's test with a screen reader We'll test the ["Give to UW" page for the library site](https://www.washington.edu/giving/make-a-gift/?source_typ=3&source=LBCOPA%20,LIBDIS,%20LSEEND#main_content) 1. First I'll tab through the page to check some basics 2. Next I'll turn on my screen reader. I'm in "quicknav" mode which lets me flip through headings. 3. Next we'll click on "add" and see what happens --- # Screen Readers: Other Typical Bugs .left-column40[  ] ??? - Reads the words on the screen - Keystroke to move to next area - Screen reader users, turn this on on your phone --- # Your turn Decide who will - use switch control - We'll simulate this today with tabs - use magnification - We'll simulate this with command-plus to 200% You should use the OS feature for both in your assignment 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 tasks you are evaluating is 1. Whether a student can easily learn about Seattle Public Schools 2. Whether a student 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. Post on [Ed](https://edstem.org/us/courses/67367/discussion/5427025)
