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

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

7. Inclusive Design Considerations
 Keyboard Only
 Audible Content
 Cognitive Challenges
 Different Ways of Seeing

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:

15.  Designing for Screen Reader
Users

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

17. Basic Example: Static/No Interaction

18. Basic Example: Static/No Interaction

19.  Designing for Screen Reader
Users
Best Practice – Integrate a supporting data
table and trend summary (long description) for
all users.

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

31. Microsoft Attention Span Study

32. What is the best way to make
the information pop?

33. What is the best way to make the
information pop?

34. What is the best way to make the
information pop?

35. Pay Attention to Labels

37. Enough labels?
• Relative amounts are
clear.
• Exact quantities are
unknown.
Depends…

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

45.  Organize digital content using commonly
known reading layouts.
Text is readable from left to right, top to bottom.
Consider Screen Magnification

46.  Avoid layouts that require an unusual
reading order.

47. Consider Color Blindness

48.  Print or view in grayscale and see if any
information gets lost.
Color Testing for Accessibility

49. Grayscale Testing Example

50. Grayscale Testing Example

51. Grayscale Testing Example

52. Grayscale Testing Example

53. Grayscale Testing Example

54. Grayscale Testing Example

55. Grayscale Testing Example

56. Grayscale Testing Example

57. Grayscale Testing Example

58. Grayscale Testing Example

59. Grayscale Testing Example

60. Grayscale Testing Example

61. Grayscale Testing Example

62. Demos
 HighCharts – Box Plot Cluster
 HighCharts - Interactive Map
Grayscale Testing Examples

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.

67. Alternative Formats – Tactile Data

68. Alternative Formats – Tactile Data

69. Alternative Formats - Sonification
Demos
 D3 Sonification Example

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?

71. UX Driven Data Visualizations
VisDe
POC
Dev
A11y
1. _____
2. _____
1. _____
2. _____
3. _____
4. _____
1. _____
2. _____
3. _____
1. _____
2. _____
3. _____

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