background-image: url(img/inclusive-design/people.png) # Accessibility CSE 340, Spring 2022 .left-column40[ Thanks to [Tracy Tran](https://www.microsoft.com/en-us/research/people/tracyt/) for much of the text and imagery in this slide deck!] --- name: normal layout: true class: --- [//]: # (Outline Slide) # Today's goals - Administrivia - Layout part 3-4 & Reflection due Thursday 10pm - No Practice Quiz 3 Review in lecture - Please review the quiz results and ask questions on Ed. - Agenda - **Quick review of Gots and Needs** - Complete [Security](/courses/cse340/22sp/slides/wk03/security.html#22) - Inclusive Design - Define: disability and accessibility - Discuss three principles of Inclusive Design - Connect how assistive design can help people - Apply inclusive design to create accessible mobile interfaces --- .left-column30[ ![:img Gots in a pretty font,100%, width](img/inclusive-design/got.jpg) ] .right-column70[ * Android Development * Creating new Android apps * ImageView, Canvas, Animation, Layout * Using XML in an application * Being creative in assignments * Reading documentation and parsing through existing code bases * Help in learning * OH, Discussion board (fast responses) * Using Ed lessons * Study groups * Encouragement to learn independently * Grading feedback & resubmission system ] --- .left-column30[ ![:img Needs in a pretty font,100%, width](img/inclusive-design/need.jpg) ] .right-column70[ * Personal goals * To start assignments earlier/less procrastination * Attend OH * Android programming knowledge * How to style apps * More principles for designing good interfaces * Bigger picture of software development (final project) * Wish list for the class * More practice reading APIs and documentation * More exposure to the tools we need * More guided activities * Updates to confusing TO DO items * Ability to search through course resources. * Wider variety of problem difficulty in practice quizzes ] --- [//]: # (Outline Slide) # Today's goals - Administrivia - Layout part 3-4 & Reflection due Thursday 10pm - No Practice Quiz 3 Review in lecture - Please review the quiz results and ask questions on Ed. - Agenda - Quick review of Gots and Needs - **Complete [Security](/courses/cse340/22sp/slides/wk03/security.html#22)** - Inclusive Design - Define: disability and accessibility - Discuss three principles of Inclusive Design - Connect how assistive design can help people - Apply inclusive design to create accessible mobile interfaces --- [//]: # (Outline Slide) # Today's goals - Administrivia - Layout part 3-4 & Reflection due Thursday 10pm - No Practice Quiz 3 Review in lecture - Please review the quiz results and ask questions on Ed. - Agenda - Quick review of Gots and Needs - Complete [Security](/courses/cse340/22sp/slides/wk03/security.html#22) - **Inclusive Design** - Define: disability and accessibility - Discuss three principles of Inclusive Design - Connect how assistive design can help people - Apply inclusive design to create accessible mobile interfaces --- # Before we begin Answer the question on [Ed](https://edstem.org/us/courses/21053/lessons/28893/slides/189141) --- ![:img What is disability? Text is surrounded by diverse people,100%, width](img/inclusive-design/what-is-disability.png) --- .left-column[ ## Disability a context dependent .red[mismatched interaction] ] .left-column40[ ## 1980 ![:img picture of a person,60%, width](img/inclusive-design/1980.png) .font-medium[**Disability as a personal attribute** "restriction or lack of ability ... within the range considered normal for a human being" (medical model) ] ] .left-column40[ ## Today ![:img picture of a network of people,60%, width](img/inclusive-design/today.png) .font-medium[**Disability as context-dependent** "the interaction between features of a person's body and features of the society in which they live" (social model) ] ] --- # Disability is a spectrum .left-column50[ Accessible design is good design] .right-column40[ | | Permanent | Temporary | Situational | --- | --- | --- | --- | | Touch | ![:img A person with one arm ,40%, width](img/inclusive-design/onearm.png) | ![:img A person with an arm injury ,40%, width](img/inclusive-design/arminjury.png) | ![:img A person holdin a baby ,40%, width](img/inclusive-design/newparent.png) | | See | ![:img A Blind person ,40%, width](img/inclusive-design/blind.png) | ![:img A elderly person with cataracts ,40%, width](img/inclusive-design/cataract.png) | ![:img A dsitracted driver ,40%, width](img/inclusive-design/driver.png) | | Hear | ![:img A Deaf person ,40%, width](img/inclusive-design/deaf.png) | ![:img A person with an ear infection ,40%, width](img/inclusive-design/ear.png) | ![:img A bartender in a noise environment ,40%, width](img/inclusive-design/bartender.png) | | Speak | ![:img A non-verbal person ,40%, width](img/inclusive-design/nonverbal.png) | ![:img A person with laryngitis ,40%, width](img/inclusive-design/laryngitis.png) | ![:img A person with a heavy accent ,40%, width](img/inclusive-design/accent.png) | ] --- # Worldwide Stats 1 Billion (~15%) of population needs 1 or more assistive products - Global need for assistive technology - 2.2 B people have near or distance vision impairment. 1 B of these have moderate or severe impairment - 75 M people who need a wheelchair - 466 M people have hearing loss. - Rates of disability are increasing - Aging population - Situational Impairment - Accessible Technology (AT) benefits ~25% of users - Only 1 in 10 people have access to AT they need .footnote[[World Health Organization](https://www.who.int/news-room/fact-sheets/detail/assistive-technology) 2018] --- # Accessibility .row[ .column[**Disability** is a mismatched interaction between someone and their context] .column[**Accessibility** is a broad term for tools that help people navigate mismatched interactions and provides options for people of all ability] .column[**Inclusive design** is a framework that helps us design more accessible products] ] .row[ ![:img line of animated iconic representations of people,100%, width](img/inclusive-design/longpeople.png) ] --- .left-column60[ ## Accessibility is not a given Originated in the disability rights movement History of protest Collaboration with Black Panther movement - [Crip camp](https://cripcamp.com/) - [Ted Talk](https://www.ted.com/talks/judith_heumann_our_fight_for_disability_rights_and_why_we_re_not_done_yet): Our Fight for disability rights - and why we're not done yet - Judith Heumann ] .right-column40[![:img A picture of protestors ,100%, width](img/inclusive-design/rights-narrow.png)] --- # Legal Basis for Accessibility Rehab Act (1976) - Equal access to government services Americans with Disabilities Act (1990) - Equal access to all goods/services UN Convention on Rights of PWD (2006) - 147 countries ratified convention --- # Human Rights Basis for Accessibility .right-column50[ .row[ ![:img online education by shashank singh from the Noun Project,20%, width](img/inclusive-design/education.png) .centerv[Education]] .row[ ![:img employment by Tee Yang from the Noun Project,20%, width](img/inclusive-design/employment.png) .centerv[Employment]] .row[ ![:img zoom icon,20%, width](img/inclusive-design/ZoomIcon.jpg) .centerv[Pandemic everything!]] ] .left-column50[ .row[ ![:img shopping cart by LINDA WATI from the Noun Project ,20%, width](img/inclusive-design/shop.png) .centerv[Shop From Home]] .row[ ![:img audiobook by mikicon from the Noun Project,20%, width](img/inclusive-design/audiobook.png) .centerv[Blind People Read
7x as Many Books]] ] --- # Example: Banking .left-column40[ ![:img Picture of Wells Fargo mobile app. The audio of this page is the video at right,100%, width](img/inclusive-design/banking0.png) ] .right-column60[ What do you notice when this is read by a screen reader? ![:youtube Banking failure, b-R5r_aKmKo] ] --- # Example: Banking .left-column40[ ![:img Same picture highlighting the hamburger menu (which has the alt text "hamburger menu") and an image (which has no alt tex and just plays an unintelligible name). The audio of this page is the video at right,100%, width](img/inclusive-design/banking.png) ] .right-column60[ What do you notice when this is read by a screen reader? ![:youtube Banking failure, b-R5r_aKmKo] ] --- # Practical Basis for Accessibility .column[ .centerh[ ![:img A typewriter,40%, width](img/inclusive-design/typewriter.png) ] In 1808, Pellegrino Turri built the first typewriter, so that his blind lover, could write letters more legibly. ] .column[ .centerh[ ![:img email,40%, width](img/inclusive-design/email.png) ] In 1972, Vint Cerf programmed the first email protocols because electronic messaging was the only seamless way to communicate with his deaf wife while he was at work. ] .column[ .centerh[ ![:img A straw,40%, width](img/inclusive-design/straw.png) ] In 1937, Joseph Friedman created the first bendy straw to help his young daughter drink from a cup on a counter that was too high for her. ] --- background-image: url(img/inclusive-design/people.png) .column[ # How do we do inclusive design? ] --- # Failure to Include Excludes .row[ .left-column50[![:img A picture of faces from many races ,90%, width](img/inclusive-design/manyraces.png)] .left-column50[Motion tracking technology that only works for users of a certain race because initial training set excluded other skin tones
] ] .row[ .left-column50[![:img A picture of crash test dummies ,90%, width](img/inclusive-design/crashtest.png)] .left-column50[The standard crash test dummy is a 50th percentile male. Female drivers are 47% more likely to be injured in a car crash.
]] .row[ .left-column50[![:img A picture of scissors ,90%, width](img/inclusive-design/scissors.png)] .left-column50[Being left handed in a right handed world: scissors, lecture hall fold out desks….] ] --- # Intuition alone fails .left-column[ ![:img focus group by Anatolii Babii from the Noun Project ,100%, width](img/inclusive-design/focusgroup.png)] .right-column[ The user is not like you Build empathy. Learning how people adapt to the world around them means spending time understanding their experience from their perspective. ] --- ![:youtube Video assigned before class, 94swlF55tVc?t=45] --- .left-column50[ ## Solve for one, then extend Designing for the most extreme case results in designs that benefit many people ] .right-column50[ ![:img one arm relates to arm injury and parent holding child; hard of hearing relates to noisy environment and teaching reading ,100%, width](img/inclusive-design/one2many.png)] --- # Principles of inclusive design
.column[ .centerh[ ![:img A venn diagram,50%, width](img/inclusive-design/exclusion.png) Recognize exclusion ] ] .column[ .centerh[ ![:img A globe,50%, width](img/inclusive-design/diversity.png) Learn from diversity ]] .column[ .centerh[ ![:img A crowed,50%, width](img/inclusive-design/many.png) Solve for one,
extend to many ] ] --- background-image: url(img/inclusive-design/people.png) .column[ # How do we implement inclusive design? ] --- # Inclusive Design Context .left-column50[ .row[## ![:img A picture of people with temporary and permanent disabilities,20%, width](img/inclusive-design/people2.png) .centerv[User side]] - User may use *assistive technology* - User may *customize* their machine - But you can't know this at design time ] .right-column50[ ] --- .left-column40[ # Assistive technology How people with disabilities *may*
navigate computing
(and the world) Not a *medical* device ] .right-column60[ .left-column[ ![:img A picture of a speaker; magnifier; microphone; computer; and game control ,85%, width](img/inclusive-design/at.png)] .right-column90[ .font-medium[Screen Readers]
.font-mediumsmall[Narrator, VoiceOver, JAWS, Window Eyes, NVDA, TalkBack] .font-medium[Screen adjustment]
.font-mediumsmall[ZoomText, Magnifier, Zoom, High Contrast
] .font-medium[Speech input]
.font-mediumsmall[Dragon Naturally Speaking, Dictation, Speech Recognition] .font-medium[Keyboarding]
.font-mediumsmall[Sticky Keys, Mouse Keys, Filter Keys, Keyboard Shortcuts] .font-medium[Many more]
.font-mediumsmall[Joysticks, scrollbars, the Xbox Adaptive Controller] ] ] --- .left-column[ ![:img screen reader by Sophia Bai from the Noun Project, 100%, width](img/inclusive-design/screenreader.png) ## Screen
reader Demo ] .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 ] --- .left-column[ ![:img screen reader by Sophia Bai from the Noun Project, 100%, width](img/inclusive-design/screenreader.png) ## You try it ] .right-column[ 1. Get out your phone (or run an emulator, but a phone is better) 2. Open up a Google home page with search bar. 3. Turn on respective screen reader - iOS: Settings > General > Accessibility > VoiceOver > On - Android: Settings > Accessibility > TalkBack > On With your eyes closed* and without using voice search (e.g. Siri), find the answer to this question: What is a group of parrots called? .font-small[*Building empathy for visual impairments requires much more than closing your eyes. See principle 2 of inclusive design. ] ] ??? I want to stress that this is only the beginning of building empathy. To really practice inclusive design, you must also interact with, observe, and learn from those you are designing for. Example: inclusive design sprint where we brought in SMEs --- exclude: true # Important Principles
??? If interfaces are not created using inclusive design, screen readers will not read the correct thing. The challenge with interacting with mobile interfaces using a screen reader can be summed up as: interfaces are inherently 2D spatial. Screen readers present information in a temporary linear audio stream that the user must remember. We’re going to go over a few key things to keep in mind when designing and programming mobile interfaces. These are just the tip of the iceberg. --- # Inclusive Design Context .left-column50[ .row[## ![:img A picture of people with temporary and permanent disabilities,20%, width](img/inclusive-design/people2.png) .centerv[User side]] - User may use *assistive technology* - User may *customize* their machine - But you can't know this at design time ] .right-column50[ .row[## ![:img A picture of a phone ,20%, width](img/inclusive-design/app.png) .centerv[App side]]
- Use *best practices* in inclusive design - Play nice with *accessibility APIs* - *Test* with diverse users ] --- # Building for screen readers
graph LR SR[fa:fa-volume-up
Screenreader
]:::bluelarge -->|Asks for next object| API(fa:fa-codepen
Accessibility API
):::bluelarge API -->|Passes along request| ATK[fa:fa-android
Android Toolkit
]:::bluelarge ATK -->|Checks Details| App[fa:fa-mobile
App
]:::bluelarge App -->|Name: Foo| ATK ATK -->|Name, Role: Button| API API -->|Name, Role| SR Speak(fa:fa-volume-up Button, Foo ):::bluelarge
-- ... (repeat for each swipe)
graph LR SR[fa:fa-volume-up
Screenreader
]:::bluelarge -->|Asks for next object| API(fa:fa-codepen
Accessibility API
):::bluelarge API -->|Passes along request| ATK[fa:fa-android
Android Toolkit
]:::bluelarge ATK -->|Checks Details| App[fa:fa-mobile
App
]:::bluelarge App -->|Name: Bar| ATK ATK -->|Name, Role: Button| API API -->|Name, Role| SR Speak(fa:fa-volume-up Button, Bar ):::bluelarge
--- # What happens when user double taps to invoke?
graph LR SR[fa:fa-volume-up
Screenreader
]:::bluelarge -->|Invokes object| API(fa:fa-codepen
Accessibility API
):::bluelarge API -->|Passes along request| ATK[fa:fa-android
Android Toolkit
]:::bluelarge ATK -->|Invokes Callback| App[fa:fa-mobile
App
]:::bluelarge App -->|Updates Interface
Announces Changes| ATK ATK -->|Passes along information| API API -->|Deleted text| SR Speak(fa:fa-volume-up Deleted Text ):::bluelarge
--- # Building for Accessibility *Role of Developers is important here* - Only they can provide proper alt text - Their choices impact navigation order - They need to announce things that change - Size and color matter too --- .left-column40[ ![:img A picture of facebook ,80%, width](img/inclusive-design/facebook1.png) ] .right-column60[ ## Proper 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 ,80%, width](img/inclusive-design/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") ] --- # Thinking about descriptions From 99% Visible "Florence Nightingale Data Viz Pioneer" [podcast](https://99percentinvisible.org/episode/florence-nightingale-data-viz-pioneer/) Scroll to 17:56 into the show. Try to imagine (or draw) what this looks like --- # Thinking about descriptions From 99% Visible "Florence Nightingale Data Viz Pioneer" [podcast](https://99percentinvisible.org/episode/florence-nightingale-data-viz-pioneer/) Did you imagine this? ![:img Diagram of the causes of Mortality in the Army in the East, 40%, width](img/inclusive-design/Diagram_of_the_causes_of_mortality_in_the_army_Wellcome_L0041105.jpg) --- # Building for Accessibility *Role of Developers is important here* - Only they can provide proper alt text - **Their choices impact navigation order** - They need to announce things that change - Size and color matter too --- # Example: Swipe Order .left-column40[ ![:img A picture of facebook ,80%, width](img/inclusive-design/facebook1.png) ] .righ-column60[ What focus order makes sense for the Facebook newsfeed? Does this match the actual focus order? ] --- ## What order do you think will be used .left-column40[ ![:img A picture of facebook ,80%, width](img/inclusive-design/facebook1.png) ] .right-column60[ Use chunks to group meaningful info and reduce number of navigation steps. - User can double tap to drill down into chunk (e.g. navigate to the “like” button by drilling down into an individual post). ] ??? ink over! --- ## What order do you think will be used .left-column40[ ![:img A picture of facebook ,80%, width](img/inclusive-design/facebook1.png) ] .right-column40[ ![:img A picture of facebook ,120%, width](img/inclusive-design/facebook-actual.png) ] --- # Building for Accessibility *Role of Developers is important here* - Only they can provide proper alt text - Their choices impact navigation order - **They need to announce things that change** - Size and color matter too --- # Any UI change should be announced .column[ ![:img A picture of a failed sign in to the University of Washington ,90%, width](img/inclusive-design/signin-fail.png) ] .column[ Entering the wrong login credentials triggered an error message. If you couldn’t see the UI and the error wasn’t announced, you would have no idea if login succeeded or not. ] -- .column[ ## Common places this happens Dialog boxes Success notifications Errors ] --- # Building for Accessibility *Role of Developers is important here* - Only they can provide proper alt text - Their choices impact navigation order - They need to announce things that change - **Size and color matter too** --- # Size Especially hard on mobile devices .left-column40[ ![:img An arrow vs arrow and label make very different target sizes ,90%, width](img/inclusive-design/targets.png) ] .right-column60[ Even if the user misses the Text Label on the screen, they will still be able to trigger the desired action because the touch target is larger than what appears, resulting in less user error. White space around targets also helps Minimum on mobile: 48x48 ] ??? Solve for one, extend to many Trying to hit a small button with one hand while standing on a moving, crowded bus --- # 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) ] --- # Summary and most common errors | |Description | |--|----------------------| |
| Missing element label || |
| Item label ends with type, e.g., “Play Button.” TalkBack automatically announces item type, so information is redundant | |
| UI Change not announced | |
| Navigation lacks hierarchy; or makes no sense | |
| Item is too small| |
| Low contrast in image or icon | |
| Low text contrast between foreground and background | --- # Some additional things to watch out for | |Description | |--|----------------------| |
| TextView has a content description. This might interfere with a screen reader’s ability to read the content of the text field | |
| Item's role identical with alt text| |
| Overlapping clickable items | |
| URL in link may be invalid | --- # Accessibility is a design problem. .left-column50[ ## Theory **Disability** is a mismatched interaction between someone and their context **Accessibility** describes tools that help people navigate mismatched interactions **Inclusive design** is a framework that helps us design more accessible products ] .right-column50[ ## Practice Who might be **excluded** from using my design? How will my design work with assistive technologies? ] ??? I ask that as you continue your career, you think of accessibility as a design problem, no differently than you would think of a design problem that is handed to you in a spec sheet for your homework. It is good for the business, but more importantly good for people.