John Slatin AccessU presentation: UX-Driven & Inclusive Data Visualizations, May 18, 2017 by Michelle Michael
Contact Michelle for a transcript: https://www.linkedin.com/in/MichelleRMichael
Student profile product demonstration on grades, ability, well-being and mind...
UX Driven Data Visualizations for Everyone
1. UX Driven
Data Visualizations
John Slatin AccessU • May 18, 2017
Michelle Michael • Senior Accessibility Analyst
https://www.linkedin.com/in/MichelleRMichael
MichelleRMichael@gmail.com
2. UX Driven & Inclusive
Data Visualizations
Introductions
3. DataViz Tools
Content generated by BI tools is usually
not accessible for screen readers out of
the box.
Extensible solutions – ones that our
developers can build on – will offer the
most flexibility in terms of UX and A11y.
We need to push on vendors to generate
accessible content – instead of making it
our problem to solve.
4. Data Viz is one of the last areas that is still
driven by developers.
Competing interests – pet projects, business
needs, executive interest, technical constraints.
How can design drive the
user experience?
UX Driven Data Viz
5. Business/Dev – pricing and technical constraints.
UX team – parallel effort to prove out design
considerations and accessibility.
UX Driven Data Viz
6. UX Driven Data Viz
Visual
Designer
POC
Developer
A11y
Analyst
8. Removes barriers for people with loss of
fine motor skills (e.g. Parkinson's disease);
or loss of gross motor skills (e.g. Steven
Hawking); or those who cannot see to use a
mouse.
Universal Design Benefits: Making
content keyboard accessible benefits
everyone who uses a keyboard, including
power users.
Designing for Keyboard-only
Users
9. Key Consideration: Content that is
accessed using a mouse…
Mouse Hover
Mouse Click
Designing for Keyboard-only
Users
10. Demos
HighCharts – Box Plot Cluster
HighCharts - Interactive Map
ChartJS - Pie Chart with Tooltips
D3 – Bar Chart with Tooltips
Designing for Keyboard-only
Users
11. Designing for Keyboard-only
Users
Universal Design for Popover Data
Strive to have the keyboard experience look
the same as mouseover experience.
12. Summary: Designing for Keyboard-
only Users
Prove out and include keyboard
requirements for designs that have
mouse interactions.
Do this early in the process.
13. Summary: Designing for Keyboard-
only Users
1. Keyboard access to mouse hover content:
Keyboard users should be able TAB to each
element that has mouseover content, and
onfocus will provide the same visual experience
that occurs on mouseover.
Key points for developers:
14. Summary: Designing for Keyboard-
only Users
2. Keyboard access to mouse click content:
Keyboard users should be able to TAB to an
element that links to another page (e.g. drill down
data) and press ENTER to navigate to it.
Keyboard users should be able to TAB to an
element that opens popover data and press
ENTER to see the popover data.
Key points for developers:
16. Removes barriers for users with low vision or
complete blindness, users with dyslexia.
Universal Design Benefits: Making content
accessible to screen readers and other assistive
technology (AT) means that it must be coded to
W3C standards so that the content will be
interpreted correctly by the AT.
Content that is coded to standards is much more
likely to continue to function correctly as browsers
evolve and new devices come to market.
Designing for Screen Reader
Users
19. Designing for Screen Reader
Users
Best Practice – Integrate a supporting data
table and trend summary (long description) for
all users.
20.
21.
22.
23. Designing for Screen Reader
Users
Question: How could you summarize a trend
when the chart has dynamic data?
Describe each axis.
Describe the max/min.
Other valuable info…?
24. Designing for Screen Reader
Users
Universal Design for Popover Data
Build on keyboard accessibility.
Strive to have screen reader users hear
popover data as they TAB through the chart.
25. Interactive Map for DARS
Keyboard, visual & auditory
experiences are in synch.
Designing for Screen Reader
Users
26. HighCharts – Box Plot Cluster
Demo NVDA/Chrome
Keyboard, visual & auditory experiences
are NOT in synch. Assumes screen
reader users will only use landmarks.
To prevent confusion, consider
adding a skip link/instructions.
Test thoroughly before making a
conformance claim.
Designing for Screen Reader
Users
27. Summary: Designing for Screen
Reader Users
1. Provide a trend summary in text.
[A11y speak: “long description”]
2. Equal access to all data.
3. Chart images should have alt text.
4. Strive to create a seamless universal design.
28. Key points for developers:
1. The DOM order affects reading order.
2. Use live regions to automatically announce
popover content, or instruct users to use the
down arrow to read.
3. Because some screen reader users can see, the
keyboard, visual and auditory experiences
need to be in synch – or managed with very clear
instructions.
Summary: Designing for Screen
Reader Users
29. Summary: Designing for Screen
Reader Users
Prove out and include screen reader
requirements early on.
30. Removes barriers for people
with ADHD/ADD, dyslexia, or
brain injuries
from auto accidents or sports.
Universal Design Benefits: Making content
easy to quickly grasp for these users helps
all users.
Designing for Cognitive
Challenges
38. What is the best way to make the
information pop?
Source: HubSpot Article at http://blog.hubspot.com/marketing/tips-designing-effective-visual-content-infographic
39. What is the best way to make the
information pop?
Source: HubSpot Article at http://blog.hubspot.com/marketing/tips-designing-effective-visual-content-infographic
40. Summary: Cognitive Accessibility
Design Considerations
Design for short attention spans, and
you will have handled most cognitive
a11y:
1. Play with chart type.
2. Play with labels – more or less?
3. Apply branding styles.
41. Summary: Cognitive Accessibility
Design Considerations
Note: Every library comes with options
for choosing colors, fonts, labels,
gradients, animations, etc.
42. Removes barriers for users with color
blindness or vision impairments such as
cataracts, double vision, or diabetic
retinopathy.
Universal Design Benefits: Making content
easier to see for these users helps all users,
particularly in poor lighting situations - such
as presentations viewed on projectors, or
interacting with a mobile device on a sunny
day.
Accessible Design for
Different Ways of Seeing
43. Test with a color contrast tool.
e.g. Paciello Group Color Contrast Analyser
Check Color Contrast
44.
45. Organize digital content using commonly
known reading layouts.
Text is readable from left to right, top to bottom.
Consider Screen Magnification
63. Summary: Visual Design
Accessibility Considerations
1. When color alone is used to
differentiate data, then it becomes
inaccessible for people with color
blindness.
2. Check color contrast.
3. Consider the user experience under
high magnification.
64. Summary: Visual Design
Accessibility Considerations
Test in grayscale. Explore:
Labels
Patterns
Shapes
Contrasting Negative Space
65. Keyboard Only
Audible Content
Cognitive Challenges
Different Ways of Seeing
Data Visualizations for Everyone
66. What formats can it be published in?
Consider software features and assistive technology support for your file format:
PowerPoint has the least features and support since data tables cannot be made accessible.
Simple tables can be made accessible (meaning headers can be identified for screen readers) in MS
Excel and Word, however only the JAWS screen reader recognizes these.
PDF and HTML have the most features and support for accessibility. They both support making
complex tables accessible. HTML offers the most features for making content accessible.
Be flexible about file formats for publishing.
70. Partner Discussion
Brainstorm for a project you or
your organization is working on.
How you can work with business and
technical stakeholders to create a universal
design?
What are some of your key takeaways today?
72. UX Driven
Data Visualizations
John Slatin AccessU • May 18, 2017
Michelle Michael • Senior Accessibility Analyst
https://www.linkedin.com/in/MichelleRMichael
MichelleRMichael@gmail.com