[//]: # (Outline Slide) .left-column[ # Today's goals ] .right-column[ Reminders - Layout Part 3-4 due tomorrow at 10pm - Remember you needed to accept [as2-layout-part-3-4](https://gitgrade.cs.washington.edu/student/assignment/135) first! - Remember git add/commit/push __then go to [GitGrade to turn in](https://gitgrade.cs.washington.edu/student/assignment/135/turnin)__ - Accessiblity is now open! - Remember to [accept]() the assignment through GitGrade - *Required readings this week* Android Accessibility in practice! Intro to the Accessibility assignment ] --- class: middle, center, inverse # Accessibility on Android CSE 340, Winter 2021 --- # So you believe accessibility is important... what now? How to add content descriptions Making navigation work Color contrast Button size Invisible Things Testing --- # ContentDescription Use Android Lint to help Set ContentDescription to null for decorative elements (such as spacers) Don't use state (Selected) or role (Button) --- # TextEdit If you set a `android:hint` don't also set a `contentDescription` You *can* still set `android:labelFor` if the `TextEdit` has a `View` labeling it. --- # Can group related content - Make the container for a group `android:focusable` - Android will read all the content together - Good for things like forms (label + textbox) or custom ViewGroups that have multiple items but no or a single interaction. Reduces swiping Streamlining speech output -- Can also - Use `android:accessibilityTraversalBefore` when the order of traversal should not match the interactor hierarchy - Use `android:labelFor` to indicate when a `TextView` is a label for a `TextEntry` --- # Making Navigation work Things like `android:accessibilityTraversalBefore` help improve navigation So does grouping May also want to *skip* things sometimes (this happens in the assignment) - Don't use content description in this case - May also use `android:importantForAccessibility` or `android:focusable` (you'll need to read up on where and when to use these) --- # Other concerns Color contrast - < 18pt, or < **14pt bold**, >= 4.5:1. - Otherwise 3.0:1.  But you can't count on it. Also use descriptive text or other redundant cues --- # Other concerns Color contrast - < 18pt, or < **14pt bold**, >= 4.5:1. - Otherwise 3.0:1. Make your buttons big enough - 48x48dp - `android:minHeight` in `editText` objects --- # Invisible things Sometimes navigation can't get to something. use `android:importantForAccessibility` or `android:focusable` (you'll need to read up on where and when to use these) Sometimes Android doesn't know you changed something. use `[view].announceForAccessibility()` --- # How do we find all these problems? 1. Use Android Lint to help find problems  --- # How do we find all these problems? 1. Use Android Lint to help find problems --- # How do we find all these problems? 1. Use Android Lint to help find problems 2. Use the [Accessibility Scanner](https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en_US)  --- # Checks for basics, such as - Overlapping clickable items - Clickable items that are too small - TextView has content description. This might interview with screen reader reading its hint or actual content - Low contrast in image or icon or text - Items with identical speakable text - Item Label ends with redundant role information, e.g. ."Play Button". | - URL link may be invalid --- # How it works - Turn it on in settings after installing - Use your app doing the things you would do anyway - Tell it you're done - View the results in the AccessibilityScanner App --- # Turn it on - Agree to authorizations - Agree to display over screens --- # Use your app .left-column[  ] .right-column[ - Click the check mark (Authorize if needed) - Click "Record" - Use the app - *Exit the app* so you can click "Stop"  ] --- # See the result in the scanner .column[  ] -- .column[  ] --- # See the result in the scanner .column[  ] .column[  ] --- # How do we find all these problems? 1. Use Android Lint to help find problems 2. Use the [Accessibility Scanner](https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en_US) 3. Test your app with TalkBack --- # Why Use Talkback Automated tools don't work. They are spectacularly good at some things and spectacularly bad at others. .left-column50[ ## Good - Can tell you if you have alt text ] .right-column50[ ## Bad - Can't tell you if it is any good ] --- # Why Use Talkback .left-column50[ ## Good - Can tell you if you have alt text - Can tell you if an item is too small <BR><BR> - Can tell you if contrast is bad<BR><BR> - ... ] .right-column50[ ## Bad - Can't tell you if it is any good - Can't tell you if you can get to it or it is in the right order - Can't tell you whether to increase font or change color - ... ] Trying it yourself is the best way to find problems. You still won't find them all but our research shows that with a checklist of known problems *and* a screen reader you will do much better than with an automated tool. --- # Using Talkback After TalkBack is on, there are two common ways to navigate: - Linear navigation: Quickly swipe right or left to navigate through screen elements in sequence. Double-tap anywhere to select. - Explore by touch: Drag your finger over the screen to hear what's under your finger. Double-tap anywhere to select. --- # Using Talkback Optional: TalkBack developer settings - Navigate to Accessibility and select TalkBack. - Select Settings > Developer settings: - Log output level: Select VERBOSE. - Display speech output: Turn on this setting to view TalkBack speech output on the screen. --- # Most automated tools check for 1. Use Android Lint to help find problems 2. Use the [Accessibility Scanner](https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor&hl=en_US) 3. Test your app with TalkBack 4. Turn on [Switch Access](https://developer.android.com/guide/topics/ui/accessibility/testing#turn-on-switch-access) --- # Accessbility assignment
