background-image: url(img/inclusive-design/people.png) # Accessibility CSE 340, Spring 23 .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 Thur 20-Apr - 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/23sp/slides/wk03/security.html#2) - 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[  ] .right-column70[ * Java and Android Development * Practice with Java inheritance * 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 and support in learning * OH, Discussion board * Sections * Using Ed lessons * Peers, Study groups * Encouragement to learn independently * Grading feedback & resubmission system ] --- .left-column30[  ] .right-column70[ * My own time management * More OH (zoom OH in the evenings) * Android programming knowledge * More familiarity with Android Studio * How to style apps * Creating an app from scratch * Click listeners and using the camera * More principles for designing good interfaces * Bigger picture of software development (final project) * Wish list for the class * More in class demos and guided activities * Crash course on Android Studio/tools we need * More practice reading APIs and documentation * Ability to search through course resources. * HW Guidance-where to look in documentation * Study groups ] --- [//]: # (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/23sp/slides/wk03/security.html#19)** - 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/23sp/slides/wk03/security.html#19) - **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/38124/lessons/59411/slides/331453) ---  --- .left-column[ ## Disability a context dependent .red[mismatched interaction] ] .left-column40[ ## 1980  .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  .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 |  |  |  | | See |  |  |  | | Hear |  |  |  | | Speak |  |  |  | ] --- # 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[  ] --- .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[] --- # 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[  .centerv[Education]] .row[  .centerv[Employment]] .row[  .centerv[Pandemic everything!]] ] .left-column50[ .row[  .centerv[Shop From Home]] .row[  .centerv[Blind People Read <BR>7x as Many Books]] ] --- # Example: Banking .left-column40[  ] .right-column60[ What do you notice when this is read by a screen reader? ![:youtube Banking failure, b-R5r_aKmKo] ] --- # Example: Banking .left-column40[  ] .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[  ] In 1808, Pellegrino Turri built the first typewriter, so that his blind lover, could write letters more legibly. ] .column[ .centerh[  ] 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[  ] 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[] .left-column50[Motion tracking technology that only works for users of a certain race because initial training set excluded other skin tones<BR>] ] .row[ .left-column50[] .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.<BR> ]] .row[ .left-column50[] .left-column50[Being left handed in a right handed world: scissors, lecture hall fold out desks….] ] --- # Intuition alone fails .left-column[ ] .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[ ] --- # Principles of inclusive design <BR> .column[ .centerh[  Recognize exclusion ] ] .column[ .centerh[  Learn from diversity ]] .column[ .centerh[  Solve for one, <BR>extend to many ] ] --- background-image: url(img/inclusive-design/people.png) .column[ # How do we implement inclusive design? ] --- # Inclusive Design Context .left-column50[ .row[##  .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* <BR> navigate computing <BR> (and the world) Not a *medical* device ] .right-column60[ .left-column[ ] .right-column90[ .font-medium[Screen Readers] <BR> .font-mediumsmall[Narrator, VoiceOver, JAWS, Window Eyes, NVDA, TalkBack] .font-medium[Screen adjustment]<BR> .font-mediumsmall[ZoomText, Magnifier, Zoom, High Contrast<BR>] .font-medium[Speech input]<BR> .font-mediumsmall[Dragon Naturally Speaking, Dictation, Speech Recognition] .font-medium[Keyboarding]<BR> .font-mediumsmall[Sticky Keys, Mouse Keys, Filter Keys, Keyboard Shortcuts] .font-medium[Many more]<BR> .font-mediumsmall[Joysticks, scrollbars, the Xbox Adaptive Controller] ] ] --- .left-column[  ## Screen <BR>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[  ## 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 <iframe src="https://embed.polleverywhere.com/discourses/h0fMAtBz5lAb5cQ9JuMha?controls=none&short_poll=true" width="700px" height="500px"></iframe> ??? 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[##  .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[##  .centerv[App side]] <BR> - Use *best practices* in inclusive design - Play nice with *accessibility APIs* - *Test* with diverse users ] --- # Building for screen readers <DIV class="mermaid"> graph LR SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Asks for next object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge API -->|Passes along request| ATK[fa:fa-android<BR> Android Toolkit<BR>]:::bluelarge ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge App -->|Name: Foo| ATK ATK -->|Name, Role: Button| API API -->|Name, Role| SR Speak(fa:fa-volume-up Button, Foo ):::bluelarge </div> -- ... (repeat for each swipe) <DIV class="mermaid"> graph LR SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Asks for next object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge API -->|Passes along request| ATK[fa:fa-android<BR> Android Toolkit<BR>]:::bluelarge ATK -->|Checks Details| App[fa:fa-mobile <BR>App<BR>]:::bluelarge App -->|Name: Bar| ATK ATK -->|Name, Role: Button| API API -->|Name, Role| SR Speak(fa:fa-volume-up Button, Bar ):::bluelarge </div> --- # What happens when user double taps to invoke? <DIV class="mermaid"> graph LR SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Invokes object| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge API -->|Passes along request| ATK[fa:fa-android<BR> Android Toolkit<BR>]:::bluelarge ATK -->|Invokes Callback| App[fa:fa-mobile <BR>App<BR>]:::bluelarge App -->|Updates Interface<BR>Announces Changes| ATK ATK -->|Passes along information| API API -->|Deleted text| SR Speak(fa:fa-volume-up Deleted Text ):::bluelarge </div> --- # 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[  ] .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[  ] .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?  --- # 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[  ] .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[  ] .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[  ] .right-column40[  ] --- # 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[  ] .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[  ] .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 | |--|----------------------| |<i class="darklight fa fa-times-circle fa-2x"></i> | Missing element label || |<i class="darklight fa fa-retweet fa-2x"></i> | Item label ends with type, e.g., “Play Button.” TalkBack automatically announces item type, so information is redundant | |<i class="darklight fa fa-eye-slash fa-2x"></i> | UI Change not announced | |<i class="darklight fa fa-server fa-2x"></i> | Navigation lacks hierarchy; or makes no sense | |<i class="darklight fa fa-search-minus fa-2x"></i> | Item is too small| |<i class="greylight fa fa-adjust fa-2x"></i> | Low contrast in image or icon | |<i class="greylight fa fa-quote-left fa-2x"></i> | Low text contrast between foreground and background | --- # Some additional things to watch out for | |Description | |--|----------------------| |<i class="darklight fa fa-strikethrough fa-2x"></i> | TextView has a content description. This might interfere with a screen reader’s ability to read the content of the text field | |<i class="darklight fa fa-retweet fa-2x"></i> | Item's role identical with alt text| | <i class="darklight fa fa-angle-double-right fa-2x"></i> | Overlapping clickable items | |<i class="darklight fa fa-link fa-2x"></i> | 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.
