--- layout: presentation title: Assessment --Week 3-- description: Assessment of how Accessible Apps and Websites are class: middle, center, inverse --- background-image: url(img/people.png) .left-column50[ # Week 3: Assessment {{site.classnum}}, {{site.quarter}} ] --- name: normal layout: true class: --- # Important Reminder ## This is an important reminder ## Make sure zoom is running and recording!!! --- [//]: # (Outline Slide) # Learning Goals for Today - **What are the current accessibility standards** (1 and 2) - How to make media accessible (Diagrams; GUIs; videos) - How do we use automated tools --- # Introduction to Accessibility Standards In this class we will structure our learning around the Web Accessibility Initiative ([WAI](http://www.w3.org/wai/)), a service of the World Wide Web Consortium (W3) - WAI sets worldwide recommendations for Web authors, browsers and servers: Web Content Accessibility Guidelines (WCAG) - WCAG is "live" (regularly being worked on and updated, with input from the disability community). - There is no equivalent for non-web programming, but even though it is web focused, it can easily be applied to apps as well - Lots of great info available about how to use WCAG (e.g. this [certificate program](https://de.torontomu.ca/wa/); this [textbook](https://pressbooks.library.torontomu.ca/pwaa/); and [WebAIM](webaim.org) ??? We could spend a whole quarter on this... but we're going to limit it to one or two weeks --- # The [POUR](https://webaim.org/articles/pour/) standard Perceivable: Web content is made available to the senses - sight, hearing, and/or touch Operable: Interface forms, controls, and navigation are operable Understandable: Information and the operation of user interface must be understandable. Robust: Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies This is appropriate for *all* disabilities -- don't think access is only an issue for blind and low vision (BLV) people .footnote[Note: There is a 5th thing, Conformance, which we are not covering today] ??? Obviously there is some overlap between these, and they build on each other --- # Three levels of compliance Some users with disabilities to be able to access and use web content (A) Overall accessibility and removal of significant barriers to accessing content (AA) Improvements and enhancements to web accessibility for more users with disabilities (AAA) The studies just cited were assessing whether things achieved *part* of (A) level compliance! --- # POUR: Perceivable: Guidelines 1.1-1.4 .left-column[ ## Guideline 1.1 Text Alternatives: Provide *electronic text* alternatives for any non-text content ] .right-column[ ] ??? Why non text? - Can be rendered visually, auditorially, tactilely, or by any combination. - Can also be easily enlarged --- # Different Types of Non-Text Content .left-column50[ - [Decorative and branding](https://dl.acm.org/doi/pdf/10.1145/3308558.3313605) - Formatting and text styling - Images as links - [Diagrams]([Torres & Barwaldt, 2019](https://ieeexplore.ieee.org/stamp/stamp.jsp?arnumber=9028522&casa_token=zZw_rYBgu1AAAAAA:eozpbJ-vvMZjQNt8p6WU91X4uFumPs-yVuMn4PTPRjyMhtsVrprdIEe1JfYOCUdv8SFP_TGd9s965Q&tag=1) - [Visualizations](https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=9555469) - [Memes](https://dl.acm.org/doi/10.1145/3308561.3353792) - [GUIS](https://dl.acm.org/doi/10.1145/3411764.3445040) - Animations/Videos (we'll talk more about this later today) - AR/VR ([Accessibility, Disabilities, and VR](https://educatorsinvr.com/2019/05/31/accessibility-disabilities-and-virtual-reality-solutions/)) - Progress Bars (briefly described in [Cooper et al](https://d1wqtxts1xzle7.cloudfront.net/77917701/PEARL_20Paper_20for_20eLearning_202002_20submitted-libre.pdf)) - ... ] -- .right-column50[ All of these require different strategies to describe them well. Read up on some of these links when you are faced with specific description needs ] --- # Small Group Activity Break into small groups and show each other the inaccessible content you found. Pick one and work on a description for it. Do more if you have time [post](TBD) --- # Diagrams (1 of 2) .left-column40[ ![:img stateDiagram-v2: * --> Still; Still --> *; Still --> Moving; Moving --> Still; Moving --> Crash; Crash --> *: https://mermaid-js.github.io/mermaid-live-editor/edit#pako:eNpdj7sKwzAMRX_FaCzx0tFDl3btlLHuIGKRGPwojhwIIf9e16a0RNPh6EpIGwzRECiYGZluFseEXi5nHUSpx-kppLyInq1zTVWssjSP6h4XG8ZmGx_H_-w14Tw1W_G7FDrwlDxaU87aPgENPJEnDapgoMwJnQYd9hLFzLFfwwCKU6YO8sv8HmlyfwPe-kcg, 120%, width](img/assessment/mermaid.png) ] .right-column60[ When direct exploration isn't possible, consider descriptions that are *language based* ] --- # Diagrams (2 of 2) stateDiagram-v2
   [*] --> Still
   Still --> [*]
   Still --> Moving
   Moving --> Still
   Moving --> Crash
   Crash --> [*]
--- # Math standard for accessibility is MathML Math has a hierarchy just like other systems (i.e. fractions, parantheses) Can support with MathML Can generate MathML using pandoc; MS Word; etc Capturing an image of an equation and describing it much worse for screen reader users --- # Image Description: GUIs .left-column40[ ![:img Two screens of the Uber Eats app. The home page to the left and a map view to the right,120%, width](img/assessment/gui.png) ] .right-column60[ [Investigating Visual Semantic Understanding of Blind and Low-Vision Technology Users](https://dl.acm.org/doi/abs/10.1145/3411764.3445040) - Visual attributes that convey aesthetics and usability of user interfaces. - Desktop and smartphone screen readers provide control type and other semantic information excluding any visual semantics. - Smartphones allow for some degree of spatial exploration. ] --- # Study How do BLV technology users understand and access visual semantics? ![:img P9 reconstructing the Google mobile web homepage. The participant is placing Wikki Stix and playdough on the canvas which is shown next to their smartphone., 60%, width](img/assessment/reconstruction.jpg) ??? Interviews; Screen reader tasks; Reconstruction --- # Results .left-column50[ .quote[ The way I think about this is on the top is my email, to the right is my phone number. Below that [is] essentially a 2 by 2 kind of thing, which has my social profile. ] ] .right-column50[ Participants were aware of the overall structure of *phone apps* - They developed this understanding using screen readers - Associated size and location and function - Layouts were understood in terms of absolute, relative, and corner positions ] --- # My description of the leftmost GUI .left-column[ ![:img Two screens of the Uber Eats app. The home page to the left and a map view to the right,120%, width](img/assessment/gui.png) ] .right-column[ This is very hard to describe without knowing what is accessible; and whether the user is more interested in content or layout. - App has two tabs at top center: Delivery and Pickup. - Below is a seach bar with address and time menu - Below that is an advertisement for The Burger Joint (25% of screen) with a details button - Next is a scrolling set of tabs for Pickup; Grocery; Prescription; Top Sites; the rest is not visible off screen - The bottom 30% of the screen shows the title Hidden Gems (Up and coming spots you'd like) with a list of restaurants. Each row in the list shows an image, restaurant name, rating, and more. The list requires 2D scrolling to see everything. The top two are visible: Tsuki Ramen and Chocolate Co. ] --- # Describing GUIs is rarely necessary GUI description best supported dynamically through exploration. Critical needs for this - Accessibility information available for interface - Touch screen phone interaction techniques Don't describe GUIs, explore them. --- .left-column40[ ![:img A picture of facebook with a like button visible at bottom left (a thumbs up followed by the word like),80%, width](img/assessment/facebook1.png) ] .right-column60[ ## Developer Responsibility Expose GUI structure Provide good ALT text - What is a good name for the "Like" Button? - Enable the user to understand the name of the control they have navigated to, what type of control it is, what value it has, what state it has. ] --- .left-column40[ ![:img A picture of facebook with a like button visible at bottom left (a thumbs up followed by the word like),80%, width](img/assessment/facebook1.png) ] .right-column60[ ## Proper ALT text Screen reader will read out name, role, and state. Don't repeat these. Good alt text: Name ("Like") API knows: Role ("Button") API knows: State ("Not selected") ] --- .left-column40[ ![:img A picture of facebook with a like button visible at bottom left (a thumbs up followed by the word like),80%, width](img/assessment/facebook1.png) ] .right-column60[ ## Exception: Your UARs My alt text for the like button (assuming it's the subject of my UAR, slide or etc) A picture of facebook with a like button visible at bottom left (a thumbs up followed by the word like) ] --- # POUR: Perceivable: Guidelines 1.1-1.4 .left-column[ ## Guideline 1.1 Text Alternatives: Provide *electronic text* alternatives for any non-text content ] .right-column[ Make these perceivable - Image - Controls, Input - Time-Based Media - Visual Test or Exercise - Sensory Experience - CAPTCHA Make this ignorable - Decoration, Formatting, Invisible ] --- # POUR: Perceivable: Guidelines 1.1-1.4 .left-column50[ Make these perceivable - Controls, Input - Time-Based Media - Visual Test or Exercise - Sensory Experience - CAPTCHA ] .right-column50[ Example Best Practices: - Alternative Text for Images that Convey Content - Visible Text labels *associated with* Form inputs - Proper titles for Frames and iFrames - Captions, Transcripts, and Descriptions of media - Don't use color alone for information (e.g. an error) ] --- # POUR: Perceivable: Guidelines 1.1-1.4 .left-column[ ## Guideline 1.2 Provide perceivable alternatives for time-based media ] .right-column[ Includes: audio-only; video-only; audio-video; audio and/or video combined with interaction Best practices vary depending on whether it is recorded or live, and the type of media, and include: - Video Description - Captions - Transcripts - ASL interpretation ] ??? Kind of in 1.1 but also complicated so it gets its own guideline. --- # Making Video/Animation/Audio Accessible Relevant for slides; web; anywhere Understandable live & recorded video for people who are not able to hear audio Understandable live & recorded video for people who are not able to see the screen Other factors such as avoiding seizures & so on --- # Captioning Videos Auto captioning getting better, but still makes many errors - Does not easily support multilingual settings - Errors for people with accents - Errors for proper nouns and names Best practice is manual captioning and/or ASL live, or pre-recorded Easy to apply and then correct auto captioning with existing tools (e.g. YouTube has an interface) - You will be expected to do this if you use video in any homeworks --- # Audio Describing Videos May requiring pausing video, but skillful description usually possible without that More commonly available today than ever Let's try it: Form groups and open [YouDescribe](https://youdescribe.org/); ([post a link to your video](TBD)) If you want to know more: [describing educational videos](https://dcmp.org/learn/descriptionkey) --- # POUR: Perceivable: Guidelines 1.1-1.4 .left-column[ ## Guideline 1.3 Adaptable ] .right-column[ Ensure that all information is available in a form that can be perceived by accessibility tools (and thus spoken aloud, simplified, etc) This includes information that is not encoded in text such as - page organization - relationships - cross-site or cross-app organization - other structural information ] ??? Example: spoken aloud, or presented in a simpler visual Structure and information should be able to be programmatically determined by assistive technology, so it can be rendered in other formats as needed by the user. --- # POUR: Perceivable: Guidelines 1.1-1.4 .left-column[ ## Guideline 1.3 Adaptable ] .right-column[ Examples/subcategories of guideline: - Make it possible to get information about relationships, footnotes, etc in multiple modalities - Sequence things correctly (e.g. linear reading order is meaningful in a multi-column document) - Make sure instructions rely on multiple senses (i.e. not just color, size, location, etc) - Support multiple display sizes and orientations - Clearly identify input and field purposes in forms ] ??? Also in 1.1 but complicated enough to get it's own guideline Many of these should/can be supported programmatically --- # POUR: Perceivable: Guidelines 1.1-1.4 .left-column[ ## Guideline 1.4 Distinguishable ] .right-column[ - Make the default presentation as easy to perceive as possible to people with disabilities. - Example: separate visual foreground information from the background - color contrast - volume contrast ] --- # POUR: Perceivable: Guidelines 1.1-1.4 .left-column[ ## Guideline 1.4 Distinguishable ] .right-column[ - Use of color is not the only way information is conveyed - Don't force screen reader users to listen to audio longer than 3s without providing easily found controls; ideally use low or no background audio - Support text resizing (& therefore don't use images of text). Ideally (AAA) also support selection of color; justification, spacing, etc - Support users who need a 1 column view of content (AAA) - If you must have tooltips and popups, make sure they are: dismissable; hoverable; and persistent - Make sure you meet contrast expectations (minimum 4.5:1, ideally 7:1) in color (e.g. text and background; diagrams; controls; etc) ] --- # More on Color contrast Choose colors that provide enough contrast between content and the background so that anyone with low-vision impairments and color deficiencies can perceive the content. .left-column50[ WCAG Level AAA requires a contrast ratio of at least - .contrast71[7:1 for normal text] - .contrast41[4.5:1 for large text (14t pt bold or larger)] - .badcontrast[Avoid anything else!] ] .right-column50[ - [Colorzilla](https://chrome.google.com/webstore/detail/colorzilla/bhlhnicpbhignbdhedgjhgdocnmhomnp?hl=en) is an excellent tool for extracting the color value from any page element; - WebAIM has a [contrast checker](https://webaim.org/resources/contrastchecker/#:~:text=WCAG%20Level%20AAA%20requires%20a,value%20from%20any%20page%20element) ] --- # 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 --- # [Website/App Accessibility Report Homework](assignments/website.html) Pick a website/app (we have some community submitted ones) (Install and) run an Accessibility Checker Test it yourself (we'll talk more about this) Capture problems using a Usability Assessment Report --- # 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 --- # 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/)); ![Screenshot of an image without alt text in WebAIM's automated accessibility checker showing an image that is missing alt text, marked with a red picture of a mountain with a link above it and an x in its bottom right corner,50%, width]({{site.baseurl}}/assignments/img/library_evaluation.png) --- # 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. Justification in terms of *Frequency*, *Impact* and *Persistence* - **Possible Solution** Add ALT text: "December Update in a white circle surrounded by wintry trees. Around it are the words 'Hours Update', 'New Exhibits', 'Workshops' and 'Finals Help'" - **Relationship to other problems** (TBD) ??? 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). --- # Small Group Activity Try it yourself [WebAIM for Seattle Public Schools](https://wave.webaim.org/report#/https://www.seattleschools.org/) The task you are evaluating is whether a disabled family can "Report a Concern" about how accessible the website is [Post your UAR on Ed](https://edstem.org/us/courses/31170/discussion/2349808)