accessible data visualization for non-programmers
TRANSCRIPT
![Page 1: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/1.jpg)
ACCESSIBLE DATA VISUALIZATION FOR NON-PROGRAMMERS
MELISSA GREEN
@mbfortson
BIT.LY/MSUDATA16ALLY
![Page 2: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/2.jpg)
“
”
The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
Tim Berners-Lee
“
”
![Page 3: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/3.jpg)
“
”
To enable persons with disabilities to live independently and participate fully in all aspects of life, States Parties shall take appropriate measures to ensure to persons with disabilities access, on an equal basis with others… to information and communications, including information and communications technologies and systems.
UN Convention on the Rights of Persons with Disabilities
“
”
![Page 4: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/4.jpg)
Who are talking about?
![Page 5: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/5.jpg)
Who are we leaving out?
• 15% - global
• 12.6% - United States
• 11% - U.S. undergraduates
![Page 6: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/6.jpg)
Designing for accessibility benefits everyone
![Page 7: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/7.jpg)
Applicable laws & requirements in the U.S.
• In the United States• Americans with
Disabilities Act (ADA)
• Rehabilitation Act of 1973
• Section 504
• Section 508
![Page 8: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/8.jpg)
Applicable laws & requirements in higher education
• In higher education• Departments of Justice &
Education• Dear Colleague (2010)
• Universities charged with planning for accessible technology tools, services, and information
• “Accessible”• W3C Web Content Accessibility
Guidelines (WCAG), 2.0 A/AA/AAA
![Page 9: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/9.jpg)
Applicable laws & requirements around the world
• World laws
![Page 10: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/10.jpg)
Standards and guidelines
• Most commonly used:• WCAG 2.0 A/AA/AAA
• Perceivable
• Operable
• Understandable
• Robust
• Section 508
![Page 11: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/11.jpg)
More about POUR
• Perceivable• Available through sight hearing or touch
• Operable• Compatible with keyboard or mouse
• Understandable• User-friendly, easy to comprehend
• Robust• Works across browsers and devices, follows standards
![Page 12: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/12.jpg)
Today’s focus
• Content and structure
• Text equivalents
• Color
• Data tables
• Hyperlinks
![Page 13: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/13.jpg)
Content and structure
• Use simple language
• Use empty (white) space to improve readability
![Page 14: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/14.jpg)
![Page 15: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/15.jpg)
Choosing the
![Page 16: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/16.jpg)
![Page 17: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/17.jpg)
Content and structure 2
• Use headings and lists correctly
![Page 18: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/18.jpg)
Headings and lists: document example
![Page 19: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/19.jpg)
Headings and lists: web example
![Page 20: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/20.jpg)
Text equivalents: alternative text
• Alternative text
• Contextual descriptions
![Page 21: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/21.jpg)
Text equivalents: document example
![Page 22: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/22.jpg)
Text equivalents: document example 2
![Page 23: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/23.jpg)
Text equivalents: web example(visual editor)
![Page 24: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/24.jpg)
Text equivalents: web example(text editor)
<img src="chrysanthemum.jpg" alt="close-up of orange chrysanthemum">
![Page 25: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/25.jpg)
Text equivalents: chart/graph example
![Page 26: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/26.jpg)
Text equivalents: table example
![Page 27: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/27.jpg)
Text equivalents: meaningful alt text
![Page 28: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/28.jpg)
Text equivalents: contextual descriptions
• Contextual descriptions
![Page 29: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/29.jpg)
Color: conveying meaning
• Don’t use color alone to convey meaning
![Page 30: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/30.jpg)
Designing for color-blindnessImages: WebAIM
![Page 31: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/31.jpg)
Designing for color-blindness 2
![Page 32: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/32.jpg)
Designing for color-blindness 3
![Page 33: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/33.jpg)
Designing for color-blindness 4
![Page 34: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/34.jpg)
Designing for color-blindness 5
![Page 35: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/35.jpg)
![Page 36: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/36.jpg)
Color: sufficient contrast
• Provide sufficient color contrast
![Page 37: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/37.jpg)
![Page 38: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/38.jpg)
Color contrast example
Foreground color
HEX 808185
RGB 128.129.133
Background colorHEX B0B0B0
RGB 176.176.176
![Page 39: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/39.jpg)
WebAIM Color Contrast Checker
![Page 40: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/40.jpg)
Greyscale
![Page 41: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/41.jpg)
Data tables providing context
• Use appropriate markup
![Page 42: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/42.jpg)
Data tables: simple vs. complex
![Page 43: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/43.jpg)
Data tables: mark table headers
![Page 44: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/44.jpg)
Data tables: on the web
• Identify all data table headers using the <th> element.
• Provide an appropriate scope attribute: <thscope="col"> for column headers or <thscope="row"> for row headers.
• If appropriate, add a table <caption> for the data table.
![Page 45: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/45.jpg)
![Page 46: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/46.jpg)
![Page 47: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/47.jpg)
Hyperlinks: providing context
• Link text should provide context
![Page 48: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/48.jpg)
Avoiding “click here”
Register here.
To register, complete the online registration form.
Data Management Plan
Data Management Plan (PDF)
![Page 49: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/49.jpg)
Hyperlinks: link behavior
• Don’t force links to open in a new window
![Page 50: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/50.jpg)
Don’t force links to open in a new window
<a href="http://www.thelibrary.com" target="_blank">Visit The Library</a>
<a href="http://www.thelibrary.com">Visit The Library</a>
Show online help (opens in new window)
Fundraiser ordering (external site)
![Page 51: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/51.jpg)
Microsoft Office Accessibility Checker
![Page 52: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/52.jpg)
Adobe Acrobat accessibility tools
![Page 53: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/53.jpg)
![Page 54: Accessible Data Visualization for Non-Programmers](https://reader031.vdocuments.net/reader031/viewer/2022013001/61cb841231787161c71c2ad3/html5/thumbnails/54.jpg)
ACCESSIBLE DATA VISUALIZATION FOR NON-PROGRAMMERS 2
MELISSA GREEN
@mbfortson
BIT.LY/MSUDATA16ALLY