Accessible Data Visualizations – Helping everyone visualize datasets

UXINDIA2019: India's biggest international conference on User Experience Design which is being celebrated on Sep 9, 10 & 11 at Novotel HICC, Hyderabad.
www.ux-india.org/uxindia2019
#ux #uxindia #uxindia2019 #designthinking #uxi19 #uxconference #umodesign

Transcript

1. Accessible Data Visualizations Helping everyone visualize datasets
2. Product North East West South A 45 23 54 54 B 65 34 87 23 C 57 54 56 35 D 34 76 23 56 Data visualization is any instance where data has been represented graphically to derive better insights Region wise product sale in thousand units 0 10 20 30 40 50 60 70 80 90 100 North East West South A B C D Region wise product sale in thousand units
3. Data Visualization Data Visualization The problem
4. Designing for blindness
5. Use Screen readers Refreshable braille displays Android Accessibility Suite (Talkback) Narrator NonVisual Desktop Access (NVDA) VoiceOver Designing for blindness
6. Product North East West South A 45 23 54 54 B 65 34 87 23 C 57 54 56 35 D 34 76 23 56 Shortcut keys for navigation and interaction H H Header Text you might want to skip given the irrelevant header. This is followed by the below irrelevant bullet points 1. Nothing Interesting 2. Irrelevant Another Header Some more text you might want to skip for the same reasons as above Yet Another Header Some text you would want to read Extended functionality using ARIA attributes and Javascript 0 20 40 60 80 100 North East West South A B C D Data table with chart data (Press spacebar to view) Designing for blindness
7. Text to speech of a table Product North East West South A 45 23 54 54 B 65 34 87 23 C 57 54 56 35 D 34 76 23 56 Region wise product sale in thousand units 0 10 20 30 40 50 60 70 80 90 100 North East West South A B C D Region wise product sale in thousand units
8. Data can be accessible, but not the insights The blind men and the elephant. Poem by John Godfrey Saxe (Cartoon originally copyrighted by the authors; G. Renee Guzlas, artist)
9. Design considerations that make visualizations accessible to all
10. Support with descriptive content
11. Annual solar module production globally from 2000 to 2017 (in megawatts) 0 20,000 40,000 60,000 80,000 100,000 120,000 2000 2001 2002 2003 2004 2005 2006 2007 2008 2009 2010 2011 2012 2013 2014 2015 2016 2017 The above graphic shows trend of annual solar module production at a global level from 2000 to 2017. It has a negligible start at 238megawatts in 2000. The trend is rather flat until it picks up after 2006 (2068 MWs) and continues to grow till 2011 (36600 MWs). The trend then stagnates again growing gradually to 45965 in 2014. It grows rapidly again after 2014 to 105000 in 2017. Support with descriptive content
12. Prioritize common use cases and insights
13. Total marks scored by students of 10B 0 100 200 300 400 500 600 Jonathan Julia Liam Audrey Stephen Lily Keith Austin Ruth Abigail Prioritize common use cases and insights
14. Prioritize common use cases and insights • Student with highest and lowest marks • Marks of a particular student as compared to others Common use cases Screen reader friendly version with below options • Read in Asc/Desc Order • Access subset of data (“filter”) • Provide additional information like rank when required • Use shortcut keys for quick interactions Solutions • Keep data and view separately • Provide an optional accessible version via dynamically generated semantic code Execution
15. Sonification
16. Sonification http://www.seattlecentral.edu/qelp/sets/011/011.html Velocity-depth data for the Columbia river below Grand Coulee dam 0 0.2 0.4 0.6 0.8 1 1.2 1.4 1.6 1.8 0.0 2.0 4.0 6.0 8.0 10.0 12.0
17. Sonification http://www.seattlecentral.edu/qelp/sets/014/014.html Heat vs CO2 Emissions 0 5 10 15 20 25 30 35 40 0 1 2 3 4 5 6 7 CO2 Emissions (Lac tons) Heat Input (100 lac MMBTU)
18. Leverage technology for heavy lifting
19. Leverage technology for heavy lifting Rainfall in the month of July (cm) 0 5 10 15 20 25 30 35
20. There are 7 cases of excess rainfall. Details are as follows July 09 – 28cm July 10 – 30cm July 12 – 28cm July 20 – 30cm July 21 – 28cm July 22 – 30cm July 23 – 30cm [Access all Data] Leverage technology for heavy lifting Provide an optional accessible version that directly highlights values that breach the threshold.
21. Leverage technology for heavy lifting Network Solution – Project Plan - 2017 1 Jan 9 Jan 15 Jan 19 Jan 23 Jan 29 Jan 5 Jan 3 Jan 7 Jan 11 Jan 13 Jan 17 Jan 21 Jan 25 Jan 27 Jan 31 Jan MPLS Main Task Sub Task 1 Sub Task 2 Main Task 2 Sub Task 3 Sub Task 4 Main Task 3 Sub Task 5 Sub Task 6 Main Task 4 Sub Task 7 Sub Task 8 Planned Actuals Tasks
22. 3 Tasks delayed as on 22-7-2019 (Today) Sub Task 3 – Delayed by 7 Days [More Details] Sub Task 5 – Delayed by 4 Days [More Details] Sub task 7 – Delayed by 2 Days [More Details] [Access all Tasks] Leverage technology for heavy lifting Provide an optional accessible version that directly lists delayed tasks. Additionally provide an option to view all data on demand
23. Consider partial blindness
24. Consider partial blindness Red deficiency Green deficiencies Blue-yellow deficiency Normal vision No color
25. Region wise product sale in thousand units 0 10 20 30 40 50 60 70 80 90 100 North East West South A B C D Consider partial blindness
26. Quarter wise sales of product A 1st Qtr 58% 2nd Qtr 23% 3rd Qtr 10% 4th Qtr 9% 1st Qtr 2nd Qtr 3rd Qtr 4th Qtr Consider partial blindness
27. In conclusion
28. Q & A