Skip to content
Snippets Groups Projects

slides for tady

Merged slides for tady
jen-week4 into UACCESS-24fa
Merged Jennifer Mankoff requested to merge jen-week4 into UACCESS-24fa
Compare
and
2 files
+ 196
− 712
Compare changes
  • Side-by-side
  • Inline
Files
2
slides/best-practices.html
+ 0
− 428
@@ -360,434 +360,6 @@ Speak(fa:fa-volume-up Deleted Text ):::bluelarge
</div>
---
# Different types of interfaces are similar
| Does What? | Android | Web |
|--- | --- | --- |
| Content| Java | HTML/CSS/JS |
| Style | Layout | CSS |
| Structure | Interactor Hierarchy | Document Object Model (DOM) |
| Content | Components | DIVS |
| Style | Paint objects on a canvas | CSS |
| Behavior | Event Handling | Event Handling/JS |
---
# Which of these Impacts Accessibility?
| Does What? | Android | Web | Accessibility (Examples) |
|-- |--------------------------------|---------------------------------------------------|--------------------------------------|
| Content | Java | HTML/CSS/JS | Does the toolkit support access? |
|Style | Layouts | CSS | Comprehension/Magnification |
| Structure | Interactor Hierarchy | Document Object Model (DOM) | Navigation |
| Content | Components | DIVS | Alternative text (toolkit dependent) |
| Style | Paint objects on a canvas | CSS | Color choices |
| Behavior | Event Handling ` | Event Handling/JS | Proper Interaction with access API? |
---
# Building for Accessibility
<DIV class="mermaid">
graph LR
SR[fa:fa-volume-up <BR> Screenreader<BR>]:::bluelarge -->|Asks for next object in DOM| API(fa:fa-codepen<BR> Accessibility API<BR>):::bluelarge
API -->|Passes along request| ATK[<BR> 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
</div>
- This information must be provided by the developer (and in some cases, parts of the info provided by toolkit library)
- Accessibility APIs provide the information to a screen reader.
- Screen readers provide this information visually, through audio or in Braille to users.
???
As an example, we'll focus on screen readers
Screen readers get underlying information about controls from operating systems.
---
# Example: Accessible Button (1/4)
Minimum needed for screen reader access
- **Location** (for Navigation)
???
Naturally exists in the interactor hierarchy/DOM, but is it in an intuitive place for navigation?
---
# Key Navigation Concept
Reaching times: How long does it take to get somewhere
Information you need to collect to assess this:
- You need to know the linear order of a webpage or app.
- You need to know about any hierarchy that is programmatically available (e.g. headers)
No way to automatically assess this! Hard to assess well without knowing best tricks for navigation that disabled people use.
---
# A page with layout
.left-column60[
(table but imagine it was CSS)
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-w747{background-color:#dae8fc;text-align:left;vertical-align:top}
.tg .tg-kftd{background-color:#efefef;text-align:left;vertical-align:top}
.tg .tg-ltxa{background-color:#ffccc9;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-kftd" colspan="3"><span style="color:#333;background-color:#FFF">Title spanning whole width of table</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-w747" rowspan="3">Navigation 1<br>Navigation 2<br>Navigation 3<br>Navigation 4</td>
<td class="tg-ltxa">Banner Ad</td>
<td class="tg-w747" rowspan="3">Right Nav 1<br>Right Nav 2<br>Right Nav 3</td>
</tr>
<tr>
<td class="tg-0lax" rowspan="2">Main content area with lots of text and stories <br>filling the center part of the window</td>
</tr>
<tr>
</tr>
</tbody>
</table>
]
.right-column40[
What focus order makes sense for the Facebook newsfeed?
Does this match the actual focus order?
When might you need to skip things?
]
---
# Linear Order with no CSS
Depends on how the page was designed. One possibility
- Title
- Right Nav 1
- Right Nav 2
- Right Nav 3
- Navigation 1
- Navigation 2
- Navigation 3
- Navigation 4
- Banner ad
- Main content area
---
# Swipe order? (bad)
.left-column60[
| Cell | Nefarious order |
|--------------|-----------------|
| Title | 1 |
| Right Nav 1 | 8 |
| Right Nav 2 | 9 |
| Right Nav 3 | 10 |
| Banner ad | 3 |
| Navigation 1 | 4 |
| Navigation 2 | 5 |
| Navigation 3 | 6 |
| Navigation 4 | 7 |
| Content | 11 |
]
.right-column40[
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-w747{background-color:#dae8fc;text-align:left;vertical-align:top}
.tg .tg-kftd{background-color:#efefef;text-align:left;vertical-align:top}
.tg .tg-ltxa{background-color:#ffccc9;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-kftd" colspan="3"><span style="color:#333;background-color:#FFF">Title spanning whole width of table</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-w747" rowspan="3">Nav 1<br>Nav 2<br>Nav 3<br>Nav 4</td>
<td class="tg-ltxa">Banner Ad</td>
<td class="tg-w747" rowspan="3">Right Nav 1<br>Right Nav 2<br>Right Nav 3</td>
</tr>
<tr>
<td class="tg-0lax" rowspan="2">Main content area with lots of text and stories filling the center part of the window</td>
</tr>
<tr>
</tr>
</tbody>
</table>
]
---
# Swipe order? (better)
.left-column60[
| Cell | Well designed order |
|--------------|---------------------|
| Title | 1 |
| [skip cell] | 2 |
| Right Nav 1 | 3a |
| Right Nav 2 | 3b |
| Right Nav 3 | 3c |
| Banner ad | 3e |
| Navigation 1 | 3a |
| Navigation 2 | 3b |
| Navigation 3 | 3c |
| Navigation 4 | 3d |
| Content | 3 |
]
.right-column40[
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-w747{background-color:#dae8fc;text-align:left;vertical-align:top}
.tg .tg-kftd{background-color:#efefef;text-align:left;vertical-align:top}
.tg .tg-ltxa{background-color:#ffccc9;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-kftd" colspan="3"><span style="color:#333;background-color:#FFF">Title spanning whole width of table</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-w747" rowspan="3">Nav 1<br>Nav 2<br>Nav 3<br>Nav 4</td>
<td class="tg-ltxa">Banner Ad</td>
<td class="tg-w747" rowspan="3">Right Nav 1<br>Right Nav 2<br>Right Nav 3</td>
</tr>
<tr>
<td class="tg-0lax" rowspan="2">Main content area with lots of text and stories filling the center part of the window</td>
</tr>
<tr>
</tr>
</tbody>
</table>
Hidden skip Link to get to main content
]
---
# Swipe order? (best)
.left-column60[
| Cell | Chunked order |
|-------------|---------------------|
| Title | 1 |
| [skip cell] | 2 |
| Nav Area | 3 |
| Right Nav | 3a |
| Right Nav 1 | 3a.1 |
| Right Nav 2 | 3a.2 |
| Right Nav 3 | 3a.3 |
| Left Nav | 3b |
| Navigation 1 | 3b.1 |
| ... | |
| Banner ad | 3c |
| Content | 4 |
]
.right-column40[
<style type="text/css">
.tg {border-collapse:collapse;border-spacing:0;}
.tg td{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
overflow:hidden;padding:10px 5px;word-break:normal;}
.tg th{border-color:black;border-style:solid;border-width:1px;font-family:Arial, sans-serif;font-size:14px;
font-weight:normal;overflow:hidden;padding:10px 5px;word-break:normal;}
.tg .tg-w747{background-color:#dae8fc;text-align:left;vertical-align:top}
.tg .tg-kftd{background-color:#efefef;text-align:left;vertical-align:top}
.tg .tg-ltxa{background-color:#ffccc9;text-align:left;vertical-align:top}
.tg .tg-0lax{text-align:left;vertical-align:top}
</style>
<table class="tg">
<thead>
<tr>
<th class="tg-kftd" colspan="3"><span style="color:#333;background-color:#FFF">Title spanning whole width of table</span></th>
</tr>
</thead>
<tbody>
<tr>
<td class="tg-w747" rowspan="3">Nav 1<br>Nav 2<br>Nav 3<br>Nav 4</td>
<td class="tg-ltxa">Banner Ad</td>
<td class="tg-w747" rowspan="3">Right Nav 1<br>Right Nav 2<br>Right Nav 3</td>
</tr>
<tr>
<td class="tg-0lax" rowspan="2">Main content area with lots of text and stories filling the center part of the window</td>
</tr>
<tr>
</tr>
</tbody>
</table>
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).
---
# More Navigation Concepts
Forms and inputs have issues with *order* and *labels*. This is fixed different ways on different platforms, but all major UI dev tools have APIs for accessibility. Make sure you use them *and* testing.
- Web [advice](http://webaim.org/techniques/forms/controls) and [advanced advice](http://webaim.org/techniques/forms/advanced) on this. Look for similar documentation for android/iOS.
Tables are not ideal, but *best* when headers are labeled. Again, check the API for your interface dev platform.
---
# Example: Accessible Button (2/4)
Minimum needed for screen reader access
- Location (for Navigation)
- **Does it have proper labeling/ALT text?**
- Did you use a library element or ensure that events are properly announced
- State changes
- Invocation
- Can it be triggered through the keyboard or API?
???
---
# Interactive Component ALT text
- What is a good name for a "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.
---
# 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")
---
# Example: Accessible Button (2/4)
Minimum needed for screen reader access
- Location (for Navigation)
- Does it have proper labeling/ALT text?
- Did you use a library element or ensure that **events are properly announced**
- State changes
- Invocation
???
---
.column[
![:img A picture of a failed sign in to the University of Washington showing text at the top saying "Your sign-in failed. Please try again" without an explanation of what went wrong ,90%, width](img/assessment/signin-fail.png)
]
.column[
## Announce UI changes
If you can't see the UI, you have no idea if login succeeded
Requires *programmatically* calling an API to announce the change
]
--
.column[
## Common places this happens
Dialog boxes
Success notifications
Errors
]
---
# Example: Accessible Button (2/4)
Minimum needed for screen reader access
- Location (for Navigation)
- Does it have proper labeling/ALT text?
- Did you use a library element or ensure that events are properly announced
- State changes
- Invocation
- **Can it be triggered through the keyboard or API?**
???
---
# Other API specific issues Impact Access
You always must to understand your accessibility API in depth to make an app accessible
For example, when [Ross et al, 2017](https://dl.acm.org/doi/10.1145/3132525.3132547) studied 1000s of android apps. Some common errors came up which aren't in guidelines because they are either tool specific or straight up UX errors: [next slide]
---
# Errors that require manual inspection
| | 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-angle-double-right fa-2x"></i> | Overlapping clickable items |
|<i class="darklight fa fa-link fa-2x"></i> | URL in link may be invalid |
---
# Summary of Common Problems
Common Problems To Remember (from [Ross et al, 2017](https://dl.acm.org/doi/10.1145/3132525.3132547) study of 1000s of android apps)
.left-column50[
| |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 |
]
.right-column50[
| |Description |
|--|----------------------|
|<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 |
|<i class="darklight fa fa-retweet fa-2x"></i> | Item's role identical with alt text|
]
---
# Key Take Home Message
IF you take one thing away from this whole discussion, it should be:
*YOU* decide who is disabled with respect to the technology you create
---
[//]: # (Outline Slide)
# Learning Goals for Today