# CSE 340 Lab 4 Winter 2022 ## Week 4: Accessibility .title-slide-logo[  ] --- # Assignment Timeline Layout: - Out: W 12-Jan, Checkpoint: Th 20-Jan, Due: Th 27-Jan, Lock: Sa 29-Jan Accessibility Code, Video, Reflection: - Out: W 26-Jan, Due: Th 3-Feb, Lock: Sa 5-Feb --- # Section 4 Objectives - [Accessibility Assignment prep](#4) - [Alt Text](#6) - [Accessibility in Tech](#9) - [Section Exercises](#16) - Q&A --- # Accessibility Assignment prep - Please read the [spec](https://courses.cs.washington.edu/courses/cse340/21wi/assignments/accessibility.html) - Install Accessibility Scanner on Emulator [through Google Play](https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en_US) - Settings > Accessibility > Turn TalkBack and Scanner on - We will do an exercise at the end to demonstrate using Scanner and TalkBack --- # Alt Text - What is alt text, and why is it important? - "Alternative text is a textual substitute for non-text content in web pages." - Alt text "principles also apply to multimedia and other non-text content." - Online Resources - Adding Accessibility Features to Apps for Blind and Visually-Impaired Users: https://youtu.be/1by5J7c5Vz4 - Introduction to Alternative Text: https://webaim.org/techniques/alttext/#intro --- # Alt Text: Exercise .left-column40[ ] .right-column50[ Make your images accessible! Add alternative text so screen readers can read the description. What makes good alt text? - Concise - Do not say "image of" - Describe what is in the image - Consider the context, for example if the flower picture is within an article titled: "Fun Things for Kids to Experience at the Chihuly Glass Gardens!" ] --- # Alt Text: Exercise ## Bad alt text: - "This picture of flowers was taken at the Chihuly Glass Gardens" - Contains unnecessary information - Doesn't describe the flowers' appearance (purpose of image is to describe an example of Garden activities) - Uses "Picture of" - (No alt text) - This image is not decorative, serves as an example of what kids can interact with --- # Alt Text: Exercise ## Better alt text: - Purple flowers with a fuzzy center surrounded by green leaves --- # Alt Text: Who can it help? - Not only visually impaired/blind individuals! # Are the captions we used in the lectures enough? - Why or why not? --- # Accessibility in Technology Technically, all technology is "assistive" (helps us perform functions).<br> <br> Examples of Assistive Technology: - Laptop, phone - Hearing aids - Screen reader - Wheelchair - Moving Walkway - Keyboard - Android [Switch Access](https://support.google.com/accessibility/android/answer/6122836?hl=en) --- # Accessibility and Disability There are various ways to [characterize disability](https://now.aapmr.org/conceptual-models-of-disability/). - **Medical Model** - Problem is the individual - Focuses on physicality, pathological, needs to be "fixed" - **Social Model** - Disability exists because of how society is structured - Focuses on barrier removal - Disability and Diversity = innate part of human experience - Various other forms of this model supported by disability rights activists around the world --- # Accessibility in Tech: Legal Implications - Americans with Disabilities Act (1990) - The UW is a public entity receiving federal funding - Must abide by accessibility laws in the ADA and Rehab Act (1973), applies to technology (actual enforcement with varying success...) - Harvard got [sued](https://casetext.com/case/natl-assn-of-the-deaf-v-harvard-univ-1) because of failure to provide captions on the videos hosted on their publicly accessible website. - Other related laws/articles: - [Twenty-First Century Communications and Video Accessibility Act](https://www.fcc.gov/sites/default/files/21st_century_communications_and_video_accessibility_act_cvaa.pdf) (2010) - [Accessibility](https://www.scope.org.uk/campaigns/research-policy/accessibility-in-gaming/#Summary-of-findings) in Video [Games](https://fast.wistia.net/embed/channel/5ao7h2j1uu?wchannelid=5ao7h2j1uu&wmediaid=rdng7g4b2l) - For further interest, take LSJ/CHID/DIS ST 434 (Disability Law)! --- # Accessibility in Technology: UW .left-column-half[ ## UW CSE ASL Gloves - Why are technologies like this harmful? - You could build bias into technology if you are not careful - Won MIT [Award](https://www.washington.edu/news/2016/04/12/uw-undergraduate-team-wins-10000-lemelson-mit-student-prize-for-gloves-that-translate-sign-language/)... but... - [Why Sign-Language Gloves Don't Help Deaf People](https://www.theatlantic.com/technology/archive/2017/11/why-sign-language-gloves-dont-help-deaf-people/545441/) ] .right-column-half[  ] --- # Accessibility in Technology Why does lack of representation in research hurt the community? - **Does more harm than good** - Inaccurate translation - Does not account for body cues/facial expressions key to deaf communication - Even speech to text isn’t that accurate right now - Very few datasets of people signing to train ML algos. --- # Accessibility in Technology (cont.) - **Burden on d/Deaf individual only** - Why does the glove look like that?? - Circuit board not encased, wires hanging out…? Will make individual stand out in public - Non-d/Deaf person does zero work to bridge communication - All communication should be a two-way effort --- # Accessibility in Technology (cont.) - **Cultural appropriation** - Non-disabled creators winning awards for technology based on a language/culture they don’t know or understand - “[Nothing about us without us](https://www.nytimes.com/2020/07/22/us/ada-disabilities-act-history.html)” - Target audience must be directly involved in creation - **Do not make assumptions about a population: doing research means including/involving/asking/understanding people** - The CSE researchers did not consult a single d/Deaf person - ASL Gloves were designed with hearing-centric population in mind only **How to be an ally: (“Don't say it's my job to fight. Fight with me if you consider yourself an ally”)** --- class: center, middle # What does inclusion mean to you? --- # Section Exercise 1: Scanner - Install Accessibility Scanner and TalkBack via Google Play (recommended method) - Alternative Method: If you wish to use a device or emulator that doesn’t have Google Play Store, download [Scanner](https://drive.google.com/file/d/1t_mbjcLjF0vZnqRlX43iKb9o4G7kMI29/view?usp=sharing) and [Suite](https://drive.google.com/file/d/1cujVzk9a6Y2DSI8m-u9mMcD48claCU9Y/view) APK files. - Open the above links, Click and drag to the emulator/physical phone to install. - Open up or download your favorite app and use the scanner on 1 screen - What do you see? --- # Section Exercise 2: Calculator App Revisited - Turn on Captions for TalkBack (helpful to double check what is being said at the bottom of your screen) - Android Settings > Accessibility > TalkBack > Settings > Advanced Settings > Developer Settings > Display speech output - Accessibility Shortcut - Android Settings > Accessibility > TalkBack > TalkBack shortcut (click the text, not the toggle switch) > Tap accessibility button --- # Section Exercise 2: Calculator App Revisited - Clone [this](https://gitlab.cs.washington.edu/cse340/exercises/mvc-calculator/-/tree/section4-accessibility) - Or if you already have the repo cloned, pull changes and switch to "section4-accessibility" branch - Now there is programmatic logic for the math calculation on the section4-accessibility branch - How can you **improve the app's accessibility**? Screen reader experience? --- # Section Exercise 2: Calculator App Revisited - [Kotlin is a cross-platform language](https://kotlinlang.org/) - Preferred language for Android developers (2019) - “Interoperability with Java” --> can use Kotlin along with the Java programming language in your applications without needing to migrate all your code to Kotlin. - Bunch of features like: [Kotlin/Native](https://kotlinlang.org/docs/native-overview.html) (write code in Kotlin and run the same app on iOS or Android), Kotlin/JS (compile to JavaScript)... etc - We will stick with Java for the HW, but this app is a reference just in case. --- # Section Exercise (Turn-In) - Answer examples 1-9 on https://webaim.org/techniques/alttext/#intro - Take a Screenshot of your Calculator app with accessibility improvements and TalkBack captions ON. - Submit answers to Ed (Section 4 Exercise)
