solve your ui optimize workflow avoid back-pedaling and waivers · 2020. 6. 15. · develop ui user...
TRANSCRIPT
![Page 1: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/1.jpg)
508first
Solve your UIOptimize workflowAvoid back-pedaling and waivers
Arva AdamsU.S. Patent and Trademark Office User Experience
in the development lifecycle
![Page 2: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/2.jpg)
508first
CaptionsA key accessibility feature is captions. Naturally, they make sure that people who can’t hear the video can understand the video.
![Page 3: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/3.jpg)
508first
CaptionsBut how many of you multi-taskers are familiar with this scenario?
I’m learning about patent prior art and can still follow the game.
I can hear the game
and text my friends
without hearing
Sam’s boring video.
![Page 4: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/4.jpg)
508first
VisualsStart with our trusty dusty U.S. Web Design System.
Search “U.S. Web Design System” in Google and boom.
![Page 5: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/5.jpg)
508first
AA and AAA contrast AAA is the W3C’s recommendation for contrast, and AA contrast is mandated by Section 508. You can use many tools to test for and achieve AAA contrast. This makes your content readable by users with color vision issues.
![Page 6: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/6.jpg)
508first
AA and AAA contrast Users with low vision and imperfect color vision will have less difficulties reading.
![Page 7: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/7.jpg)
508first
AA and AAA contrast And here’s the user with perfect vision in an airport.
![Page 8: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/8.jpg)
508first
AA and AAA contrast And now the user with perfect vision is in an airport next to the huge windows overlooking the runway on a super-sunny day.
![Page 9: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/9.jpg)
508first
Text sizeBack to the our U.S. Web Design System.You’ll find text size and line spacing guidelines that are accessible.
![Page 10: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/10.jpg)
508first
Text size and line spacingBut, in addition to being accessible, look how readable and scannable content is when it follows good typography.
![Page 11: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/11.jpg)
508first
Consistent style tags ALT tagsMeaningful linksOf course, these 508 practices help people who use screen readers.
<h2> <th> <td>
<alt=> Yes! Learn more at www...No! Click here to learn more at www...
![Page 12: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/12.jpg)
508first
Consistent style tags ALT tagsMeaningful linksBut, they also improve your product’s search engine game. SEO is magically improved with accessibility best practices.
<h2> <th> <td>
<alt=> Yes! Learn more at www...No! Click here to learn more at www...
![Page 13: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/13.jpg)
508first
Tab and read ordersNaturally, your product’s tab order and read order must be correct for your content to be accessible for people who rely on screen readers or can’t use a mouse.
![Page 14: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/14.jpg)
508first
Tab and read ordersBut, most form filler-outers prefer to keep their hands on the keyboard throughout the form, regardless of their visual and physical abilities.
1
2
3
4
![Page 15: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/15.jpg)
508first
Put accessibility upstream in the development process.You know the user story must be accessible, by law, so 508 it first.
![Page 16: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/16.jpg)
Develop and test 508 in parallel.Instead of...
Define the UI user story
Add product owner
acceptance criteria
Massage acceptance
criteria with dev
team
Develop UI user story
Test user story
against acceptance
criteria
Test 508 with a
blanket user story
Test prototype with users
Test FQT version
with usersUX issue
Can’t find call to action
UX issueUsers squinting
UX issueBad color choices
DefectColor contrast flagged
DefectRead-order wrong
DefectUI lost when zoomed
![Page 17: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/17.jpg)
Develop and test 508 in parallel.Do this:
Define the UI user story
Add PO acceptance
criteria w/508
Massage acceptance
criteria with dev
team
Develop UI user story
Test user story
against ACs, which include 508
Test prototype with users
Test dev version
with users
508 in prototype
508 in dev
508 in planning
Test 508 with a
blanket user story 508
final sanity check
![Page 18: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/18.jpg)
Develop and test 508 in parallel.Do this...
Define the UI user story
Add PO acceptance
criteria w/508
Massage acceptance
criteria with dev
team
Develop UI user story
Test user story
against acceptance
criteria
Test 508 with a
blanket user story
Test prototype with users
Test FQT version
with users
508 in prototype
508 in dev
508 in planning
508final sanity
check
UX issueCan’t find call to action
UX issueUsers squinting
UX issueBad color choices
DefectColor contrast flagged
DefectRead-order wrong
DefectUI lost when zoomed
![Page 19: Solve your UI Optimize workflow Avoid back-pedaling and waivers · 2020. 6. 15. · Develop UI user story Test user story against acceptance criteria Test 508 with a blanket user](https://reader035.vdocuments.site/reader035/viewer/2022063013/5fcca915d2792511343d7b00/html5/thumbnails/19.jpg)
508first
Solve your UIOptimize workflowAvoid back-pedaling and waivers
Arva AdamsU.S. Patent and Trademark Office User Experience
in the development lifecycle