UX-Driven & Inclusive Data Visualizations

UX Driven
Data Visualizations
John Slatin AccessU • May 18, 2017
Michelle Michael • Senior Accessibility Analyst
https://www.linkedin.com/in/MichelleRMichael
MichelleRMichael@gmail.com

UX Driven & Inclusive
Data Visualizations
Introductions

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.

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

Business/Dev – pricing and technical constraints.
UX team – parallel effort to prove out design
considerations and accessibility.
UX Driven Data Viz

UX Driven Data Viz
Visual
Designer
POC
Developer
A11y
Analyst

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

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

Key Consideration: Content that is
accessed using a mouse…
 Mouse Hover
 Mouse Click
Users

Demos
 HighCharts – Box Plot Cluster
 HighCharts - Interactive Map
 ChartJS - Pie Chart with Tooltips
 D3 – Bar Chart with Tooltips
Users

Users
Universal Design for Popover Data
 Strive to have the keyboard experience look
the same as mouseover experience.

 Summary: Designing for Keyboard-
only Users
Prove out and include keyboard
requirements for designs that have
mouse interactions.
Do this early in the process.

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:

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.

 Designing for Screen Reader
Users

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.
Users

Basic Example: Static/No Interaction

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

UX-Driven & Inclusive Data Visualizations

Users
Question: How could you summarize a trend
when the chart has dynamic data?
 Describe each axis.
 Describe the max/min.
 Other valuable info…?

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.

Interactive Map for DARS
 Keyboard, visual & auditory
experiences are in synch.
Users

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.
Users

 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.

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.
Reader Users

Reader Users
Prove out and include screen reader
requirements early on.

Removes barriers for people
with ADHD/ADD, dyslexia, or
brain injuries
from auto accidents or sports.
easy to quickly grasp for these users helps
all users.
 Designing for Cognitive
Challenges

Microsoft Attention Span Study

What is the best way to make
the information pop?

What is the best way to make the
information pop?

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

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

 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.

 Summary: Cognitive Accessibility
Design Considerations
Note: Every library comes with options
for choosing colors, fonts, labels,
gradients, animations, etc.

Removes barriers for users with color
blindness or vision impairments such as
cataracts, double vision, or diabetic
retinopathy.
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

 Test with a color contrast tool.
e.g. Paciello Group Color Contrast Analyser
Check Color Contrast

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

 Avoid layouts that require an unusual
reading order.

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

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

 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.

 Summary: Visual Design
Accessibility Considerations
Test in grayscale. Explore:
Labels
Patterns
Shapes
Contrasting Negative Space

 Keyboard Only
 Audible Content
 Cognitive Challenges
 Different Ways of Seeing
Data Visualizations for Everyone

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.

Alternative Formats – Tactile Data

Alternative Formats - Sonification
Demos
 D3 Sonification Example

 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?

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

UX-Driven & Inclusive Data Visualizations

More Related Content

Similar to UX-Driven & Inclusive Data Visualizations (20)

Recently uploaded (20)

UX-Driven & Inclusive Data Visualizations