# [CSE 340](/courses/cse340/23wi/schedule.html) Lab 4 Winter 23 ## Week 4: Accessibility .title-slide-logo[  ] --- # Assignment Timeline Layout: - Everything due: Thur 26-Jan --> **TODAY!!** Accessibility: - Out: Wed 25-Jan - Due: Thur 2-Feb --- # Section 4 Objectives - Assistive Technology/Medical and Social Models - Assessing and Writing Good Alt Text - Accessibility Scanner, Talkback, A3 Prep - Improving the Calculator App --- # Accessibility in Research Why does lack of representation in research hurt the community? --- # Accessibility in Research (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 # Think to yourself: What does inclusion mean to you? --- # Accessibility and 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 --- # Section Exercise: Assistive Technologies and Models - Work on Question 1 on Worksheet/Ed. Submit on Ed - List some examples of assistive technology and briefly state what each technology you listed assists with. - Any thoughts? --- exclude: true # Accessibility in Tech: Legal Implications - Americans with Disabilities Act (1990) - Example: UW is a public entity receiving federal funding - Must abide by accessibility laws in the ADA and Rehab Act (1973) - 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. - But actual enforcement of these laws not always sufficient... - Other relevant 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)! --- # Section Exercise: Harmful Technologies UW CSE ASL Translating Gloves .left-column60[ ] .right-column40[ - SignAloud gloves developed by former UW sophomores attempts to translate American Sign Language into speech and text. - Why are technologies like this harmful? Give your reflection in the Question 2 response area on Ed ] --- # UW CSE ASL Translating Gloves .left-column60[  ] .right-column40[ - Any ideas? ] -- .right-column40[ - 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/) - You could build bias into technology if you are not careful ] --- # 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 - **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. --- # 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 Make your images accessible! Add alternative text so screen readers can read the description. What makes good alt text? <br><br>✓ Concise and Objective <br><br>✓ Always consider the context/surrounding information <br><br>✓ Do not say "image of" <br><br>✓ Do not include state information like "Button Pressed" --- # Alt Text: Section Exercise 3/4 .left-column60[] .right-column40[ - Write a good and bad alt text for this image - What points do your alt texts consider/miss that make them good/bad? - Share responses ] --- # Alt Text: Section Exercise 5 .left-column60[] .right-column40[ The picture on the left is inside a web article titled: **"Fun Things for Kids to Experience at the Chihuly Glass Gardens!"** Considering the context, rate the following alt text ] --- # Alt Text: Section Exercise 5, Rate the Alt Text .left-column60[] .right-column40[ 1. "A picture of flowers taken at the Chihuly Glass Gardens." 2. "Purple flowers with a fuzzy center surrounded by green leaves." 3. No alt text needed. ] --- # Alt Text: Rate the Alt Text! 1. Bad: "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" 2. **Better: "Purple flowers with a fuzzy center surrounded by green leaves."** 3. Bad: No alt text needed. - This image is not decorative. - Image serves as an example of what kids can interact with. --- # Wrapping Alt Text - Alt Text: Who can it help? - Not only visually impaired/blind individuals! - Think to yourself: Are the captions we used in the lectures/Panopto good enough? - Why or why not? --- # AS3 - Accessibility prep - Please read the [spec](https://courses.cs.washington.edu/courses/cse340/23wi/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 demo this now --- # Accessiblity Scanner - Install Accessibility [Scanner](https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en_US&gl=US) and [TalkBack](https://play.google.com/store/apps/details?id=com.google.android.marvin.talkback&hl=en_US&gl=US) 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? --- # TalkBack - 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 6/7: Fixing Spot the Heron App - [Clone this repo](https://gitlab.cs.washington.edu/cse340/exercises/cse340-spot-the-heron) (Spot the Heron, you might already have this cloned) - Switch to the `accessibility` branch. - This version of Spot the Heron has new accessibility issues! - How can you **improve the app's accessibility**? Screen reader experience? --- # Section Exercise 6/7 6. List all the accessibility changes you made to the Spot the Heron Repo. You must have at least 2 changes made. Upload your changes. 7. Take a Screenshot of your Spot the Heron app with accessibility improvements and TalkBack captions ON. --- # Any Questions? - Help on Layout? - Help Installing Scanner and Talkback?
