The document outlines lessons learned from Kent Eisenhuth's work on accessibility-first data visualization. Some key lessons include: data accessibility is difficult but important to prioritize; charts can block accessibility so alternative formats like tables should be considered; using a combination of fills and borders can make charts more accessible while minimizing visual clutter; involving people with disabilities in the design process is critical; and considering accessibility from the start leads to better overall designs. The document also provides examples of accessible visualization techniques and discusses establishing an accessibility working group.

1. Lessons Learned
From Our Accessibility-First
Approach to Data Visualization
@KentTheHuth #DataAccessibility
Kent E Eisenhuth, Datavis Lead, Google
UXDX America 2023

2. THE CHALLENGE
Chart accessibility is difficult

3. Visualization of worldwide COVID-19 cases

4. Visualizations in Google Fit mobile app.

5. Visualization of a query plan in Google Cloud

6. Topic source: Dr. Steven Franconeri
Raspberries on a bush

7. Topic source: Dr. Steven Franconeri
2D representation of raspberries

8. Gestalt patterns

9. Visualization of worldwide COVID-19 cases

10. Visualization of worldwide COVID-19 cases: central field loss simulation

11. Visualization of worldwide COVID-19 cases: peripheral field loss simulation

12. Visualization of worldwide COVID-19 cases: blindness simulation

13. WHY IT MATTERS
In the United States:
4M+ people in America use assistive technology.
41M people have a disability.
World-wide
≈300M people have a color vision deficiency.
Sources: Census.gov; StackExchange.com; Colorblindawareness.org
Accessibility icon
@KentTheHuth #DataAccessibility

14. LESSON LEARNED
Data Accessibility is difficult.
@KentTheHuth #DataAccessibility

15. 1
How might accessibility standards
empower better visual design?
USEFUL, GLANCEABLE,
YET ACCESSIBLE
Part 1

16. Low contrast chart example

17. Low contrast chart example: protanopia

18. Low contrast chart example: grayscale

19. WCAG2.1 COMPLIANT PALETTE

20. Image source: Google Cloud: Using the Logs Explorer View A visualization of cloud logs over an hour

21. A visualization of cloud logs over an hour
Image source: Google Cloud: Using the Logs Explorer View

22. LESSON LEARNED
A combination fills and borders enables
you to focus on what matters.
@KentTheHuth #DataAccessibility

23. Low contrast chart example

24. Chart with improved color contrast

25. Chart with improved color contrast

26. Pie chart with textures as an encoding

27. CHALLENGE
How might we make charts accessible
while minimizing chartjunk?
@KentTheHuth #DataAccessibility

28. Donut chart with proper color contrast.

29. Donut chart with in-line labels

30. Stacked area chart with borders and fills

31. Stacked area chart with directed focus

32. Small multiples as an accessible alternative

33. Status icons in tables

34. Finding inspiration in nature: A murmuration of starlings

35. Visualizing weather impacting a satellite network

36. Halftone printing

37. Accessible heatmaps

38. Left & Right: Guggenheim Museum, New York City

39. Animation to improve comprehension

40. LESSON LEARNED
Consider accessibility first to get to the
best possible design.
@KentTheHuth #DataAccessibility

41. Heatlane visualization

42. Topic source: Dr. Steven Franconeri
Raspberries on a bush

43. 2
USEFUL DATA
EXPERIENCES WITH
ASSISTIVE
TECHNOLOGY
Part 2
How might we create a useful
multisensory experience?

44. Build a diverse team and work with
people who use assistive technology
@KentTheHuth #DataAccessibility
LESSON LEARNED

45. How might we structure the chart so it’s
easy to navigate with a keyboard?
@KentTheHuth #DataAccessibility
CHALLENGE

46. Visualization of LinkedIn connections
Source: LinkedIn (graph tool has been deprecated)

47. HIERARCHICAL NAVIGATION
Network Group Individual

48. Visualization of LinkedIn connections
Source: LinkedIn (graph tool has been deprecated)

49. FLATTENED NAVIGATION
Individual Individual Individual
Network

50. Visualization of LinkedIn connections
Source: LinkedIn (graph tool has been deprecated)

51. Consider using alternative keys,
shortcuts and other methods for
helping people quickly find answers to
questions they’re asking of the data.
@KentTheHuth #DataAccessibility
LESSON LEARNED

53. How might we use text to prioritize data
exploration and surface insights?
@KentTheHuth #DataAccessibility
CHALLENGE

54. Visualization of worldwide COVID-19 cases: blindness simulation

55. Map showing cholera cases in London in 1854

56. Source: Google Search: ‘GOOG’
Chart displaying Google Stock performance

57. Source: Battling Infectious Diseases in the 20th Century: The Impact of Vaccines, WSJ
Visualizing the effects of the measles vaccine.

58. How might we create a useful
screen reader experience?
@KentTheHuth #DataAccessibility
CHALLENGE

59. Always orient people
within the dataset. Indicate
where they are, where they
came from and where they
can go next.
LESSON LEARNED
@KentTheHuth #DataAccessibility
Sankey diagram on assistive technology

60. Providing an accessible
way to view the data in a
table or spreadsheet can
be a valid option.
Test it!
Data table of status and signals
@KentTheHuth #DataAccessibility
LESSON LEARNED

61. How might we leverage other senses
when representing data?
@KentTheHuth #DataAccessibility
CHALLENGE

62. Photo of elevator lobby Source: Forms + Surfaces

63. Data sonification can be part of the
chart’s core experience.
@KentTheHuth #DataAccessibility
LESSON LEARNED

64. 3
MAKING IT HAPPEN
Part 3
How might we prioritize and execute
this work?

65. $1T market for consumers
with disabilities (2017).
THE BUSINESS CASE
Source: Jean-Baptiste, Build for Everyone
@KentTheHuth #DataAccessibility

66. Charts, graphs and visualizations
will block accessibility audits.
@KentTheHuth #DataAccessibility
LESSON LEARNED

67. Data Accessibility Working Group website

68. go/data-accessibility
WHAT WE’RE DOING
Learn Collect Share

69. Maximizing community
engagement requires a
balance of activities.
● Guest presentations
● Design reviews
● Brainstorming time
● Contribution time
go/data-accessibility
LESSON LEARNED
Keyboard navigation on a Sankey diagram

70. Data Accessibility Working Group website

71. TOP TIPS FOR CREATING ACCESSIBLE VISUALIZATIONS
● Facilitate comparisons
● Be a helpful guide
● Focus on what matters
● Provide structure
● Embrace flexibility
● Exceed expectation
material.io/blog
Illustration of top chart a11y tips.

72. A NOTE ABOUT PROCESS
Sketches and photos from a design workshop

73. Drawing Product Ideas
Fast and Easy UX Drawing for Anyone
● Foreword by Manuel Lima
● Find it on Amazon
● Find it on Wiley.com
discount: DPI20
#DataAccessibility
#DrawingProductIdeas
Drawing Product Ideas book

74. A PARTING THOUGHT

76. THANK YOU
@KentTheHuth #DataAccessibility

77. ACKNOWLEDGEMENTS
● Andrew Carter
● Chris Mitchell
● Danny Farra
● Gerrit de Vries
● Guy Kohen
● Gerard Rocha
● Ian Hill
● James Wexler
● Jane Chang
● Jen Kozenski Devins
● Jennifer Yuchi
● Jesse Zackery
● Jess Klos
● Jialin Yun
● Julián Gonzalez
● Kai Chang
● Lisa Kaggen
● Mags Sousa
● Manuel Lima
● Martin Wattenberg
● Nicholas Cottrell
● Olga Prilepova
● Peter Vachon
● Rebecca Plotnick
● Robinson Eaton
● Saurabh Kumar
● Sierra Seeborn
● Shuo Yang
● Tom Hoddes
● Travis Alber
● Tyler Williamson
● Young Choi
@KentTheHuth #DataAccessibility

78. THANK YOU
Kent Eisenhuth
Staff UX Designer, Google
● Twitter: @KentTheHuth
● linkedin.com/in/kenteisenhuth
● kent.eisenhuth@gmail.com
#DataAccessibility
#DrawingProductIdeas

79. ● Data Accessibility is difficult.
● Charts, graphs and visualizations will block accessibility audits.
● Build a diverse team and work with people who use assistive technology.
● Apply a combination of fills and borders to focus on what matters.
● Consider accessibility first to get to the best possible design.
● Consider using other keys, shortcuts and alternative methods for helping
people quickly find answers to questions they’re asking of the data.
● Consider providing an accessible way to view the data in
a table or spreadsheet.
● Data sonification can be part of the chart’s core experience.
● Designing for accessibility can benefit everyone.
@KentTheHuth #DataAccessibility
LESSONS LEARNED