Inclusive Designing & Specing
Jasmine Rosen
May 2019
1
Agenda
A checklist ensure you did your part as a designer
2
About Me
I am a product designer at SurveyMonkey. I “fell into” accessibility stuff and my work led to the creation of the a11y task force.
3
Let me hear from you
Finger voting: What is your level of accessibility knowledge?
1. This is my very first encounter with
accessibility and design
2. I’m just starting this journey
3. I know the basics
4. I’d consider myself more advanced
5. I’m an expert!
4
Your thoughts
When you hear “Accessibility” what do you think of?
Shout it out!
5
Before we get started
This is NOT an empathy workshop
6
Learning Objectives
You will be able to:
Note: This presentation only covers things that are YOUR responsibility as a designer, not the design system or developer tasks.
7
While Designing
What are the top 3 things you are
responsible for checking?
8
1. Use multiple sensory inputs to indicate important information
9
Why is this important?
While a red border may seem obvious to some people, it may not even register as different to others.
Ask yourself: Is color relied on to display state for any critical information?
Tool: Use Stark Sketch plugin to simulate different types of color blindness
10
Best practices
Use more than one of the following to reinforce clear communication of the content:
11
How do we fix this error message?
Combine color with a symbol and/or text
12
How do we fix these card states?
Increase the border thickness/pattern, or add a shadow
13
How do we fix these links?
Add an underline to indicate it’s clickable
14
2. Consider non-text contrast*
*This should be in your design system, but I’m adding it to this list because it’s new to WCAG 2.1
15
Why is this important & what are the best practices?
Low contrast controls are more difficult to perceive, and may be completely missed by people with a visual impairment.
Tool: Use Color Contrast Analyser Sketch Plugin to check color contrast
16
How many need to be fixed?
None, one, two, or more?
Settings Icon Focus Indicator Check in checkbox
Carousel dots Menu arrows
🙇🏻♀️
🙇🏻♀️
🙇🏻♀️
🙇🏻♀️
🙇🏻♀️
17
How many pass the criteria?
None, one, two, or more?
A)
B)
C)
D)
✅
✅
18
How do we fix this?
Rearrange colors, put a line between columns
Don’t forget to not rely solely on color - overlay a pattern or use text / a shape
19
Before we continue…
We talked a lot about designing for the visually impaired, but...
designing for accessibility is how to give everyone access.
20
Let’s take a look at different assistive technology
Some people navigate by using a keyboard due to a temporary or permanent mobility impairment, or they may just prefer the experience.
89.2 % of screen reader users reported using a screen reader due to a disability, leaving 10.8% open to interpretation
-WEBAIM 2017 survey
21
3. Make it easy to get to what’s important...with multiple access routes & or shortcuts
22
23
Success example
Costco does a great job at this! When you get to costco.com and click tab, this shortcut comes up! Way to go Costco!
81.6 % report using skip navigation links when available
-WEBAIM 2017 survey
24
Best practices
Ask yourself:
25
Also consider
Ask yourself:
26
While Specing
What are the top 3 things you are responsible
for including?
27
Specing
What is it?
What does it look like?
Why is it important?
28
Specing
29
1. Label and the specify order of the page layout
30
Why is this important?
Scenario 1:
Imagine you are trying to purchase a book on your preferred e-commerce site. Once on the book’s landing page you don’t even realize it because the screen reader starts reading at the bottom of the page---Eek!
Reading order matters!
31
“It is really not just the fact that reading the content, it is also about navigation. We have to discover the page and that is the most time - consuming problem. Once you know where you are, what you are reading, then it’s usually fine.”
-Hadi Rangin, expert user of screen reader software
32
Why is this important?
Scenario 2:
33
Step 1:
Group the page into areas called “landmarks”.
Assign, order, and name.
The general structure is pretty straight forward...
Banner (Global Nav)
Content Info (Footer)
Main
Complementary
34
Landmark structure
Next to or nested inside can be:
Banner (Global Nav)
Content Info (Footer)
Main
Complementary
35
Let’s practice
Banner (Global nav)
Complementary
Main
Complementary
Content info (Footer)
First we group and assign the landmarks
Navigation
Carousel
Application
Application
Side navigation
36
Let’s practice
1
2
3
4
5
6
7
8
7
After assigning the landmarks, we order them
Side navigation
37
Let’s practice
Once ordered, we assign a label
1
2
3
4
5
6
7
8
7
: side navigation
: global navigation
: footer .
: content
: image carousel
: video player .
: subscribe
: resources
Side navigation
38
How this works:
Allows for quick navigation...and
manipulation of the order the page
80.6% report using landmark to navigate a site
-WEBAIM 2017 survey
39
40
Exercise #1
Work with your partner for this one.
Banner (Global Nav)
Content Info (Footer)
Main
Complementary
41
How’d you do?
...
42
Step 2: Assign hierarchy and label text for headings
Each page has structure to it:
Note: WDS heading numbers are associated with the look of the text. Use this sketch symbol to indicate hierarchy for screen readers.
43
How this works:
Skimming using Headings
Demo:
44
How this works:
Headings Menu
67.5 % of screen reader users’ primary way to navigate on a lengthy site is through headings
-WEBAIM 2017 survey
45
Exercise #2
Work with your partner for this one.
Assign label text and hierarchy
46
How’d you do?
...
47
Check it
Ask yourself
48
Recap
49
2. Specify focus order
50
Why is this important?
Users often navigate a site by tabbing through interactive content.
...Let’s not leave it up to chance.
51
Exercise #3
Use your keyboard to navigate a webpage page, any webpage
Tool: Use Chromelens to trace your tabbing sequence
52
Reflection
What was your experience like?
53
How to fix it
You can define the order with numbers...
54
Another Example
55
And another one...
56
And more...
57
Or...
Or with flow lines…
...but they should not be left open to interpretation.
58
Exercise #4
Work with your partner for this one.
With the same sketch file from Exercise #1, use stamps to define the order of interactive elements.
59
How’d you do?
60
What to check for?
Ask yourself:
61
3. Labels: Consider non-visible screen reader text*
*If you have a UX/UI copy writer, you’d want to partner with them on this
62
Why is this important?
Imagine trying to go down a list, not knowing there are 308 items. Wouldn’t it be nice to know that before heading down that path?
75.6 % reported they exclusively rely on screen reader audio.
-WEBAIM 2017 survey
63
Exercise #5
Work with your partner for this one.
Pay close attention to what the screen reader says, and what additional context would be helpful to know along the way.
Person 2: You’ll have your turn next so just observe until I tell you it’s time.
64
Reflection
What is the experience like? �
65
Best practices
Labels provide additional context for a user to properly interact with the content.
If you think something could use a little more context than what a screen reader would read, add it!
If you think it shouldn’t include screen-reader text, indicate that.
66
Exercise #6
Work with your partner for this one.
Screenshot a page you listened to. Use the Sketch symbol stamps and spec doc to write in any text that can provide helpful context to your user.
Tool: Use Awesome Screenshot plugin to easily screenshot an entire webpage
67
Exercise #6
Things to consider:
68
Final Check
Did you and your engineer do your part
to build an inclusive product?
69
Basically, the tools to check a shipped product are different from tools you use in Sketch...
70
Includes the necessary tools & questions to conduct the following tests:
71
Thank you!
I would LOVE to hear your feedback so I improve this talk!
72
Appendix
Downloadable resources in this folder!
73
While Designing
(continued)
What are the top 5 things you are
responsible for checking?
74
4. If you are designing responsively, think about responsiveness & orientation
75
Why is this important?
→ Responsive design is necessary to allow for reflow—that is, the reflowing of content to fit the width of the window.
76
Success example
Go to https://www.dta.gov.au/ and try it yourself!
77
Best practices
Ask yourself:
78
5. If you are designing for mobile, make sure you have simple, not complex gestures
79
Why is it important?
Why not keep it simple and easy to use?
80
What’s the difference between simple and complex?
Simple:
Complex:
81
Success example
Google does a good job of this in Maps!
82
Best practices
Ask yourself:
83
Note: Cognitive Success Criteria is now included in WCAG 2.1
Learn more here
84