What is a “visualization” for someone who can’t see? How do you take something inherently visual—a rich, highly interactive data visualization—and make it usable for people across the spectrum of visual impairment, from color deficiency to blindness? How can we evolve our design and development approach to create solutions that work for everyone? Senior Designer, Nguyet Vuong and Web Developer, Tommy O’Keefe from Atlantic Media Strategies team up to discuss what it means to design and develop for an inclusive audience in an agency setting and how no-screen-first is their evolving approach to integrating accessibility into their workflow. They’ll explore strategies and discuss learnings for creating accessible experiences that are inclusive and future-friendly.

1. NO SCREEN FIRST
An Evolving Approach For An Inclusive Audience
#refreshDC

2. TOMMY O’KEEFE
@tommyokeefe
NGUYET VUONG
@nguyetv

3. What does it mean
to make a product
accessible?

4. What does it mean
to make a product
accessible?
Standards compliance

5. Problem–Standards alone
raise the bar for
accessibility, but often do
little to ensure usability.
standards can become just a checklist
standards are process agnostic
standards can create lowest common
denominator outcomes
1
2
3

6. cancerstatisticscenter.cancer.org

7. 1
2
3
What is a visualization for
someone who can’t see?
What do we mean by “no
screen first”?
How do we think through
designing & developing from
a no-screen-first approach?

8. What is a
“visualization”
for someone who
can’t see?

9. Visualization (n)
technique of creating images to
communicate a message
VISUAL CHALLENGES

10. For data visualization, it’s presenting data in
a way to call attention to particular aspects
of meaning within that set of data
VISUAL CHALLENGES
For example, a line
graph is a way to
visualize data as a
trend over time. It’s
about conveying
meaning within a
data set.

11. How someone
with normal
vision sees
the map
VISUAL CHALLENGES

12. How someone
with cataracts
and glaucoma
sees the map
We used NoCoffee, a
chrome extension tool
to simulate the
experience
VISUAL CHALLENGES

13. How someone
with red-green
colorblindness
sees the map
We used NoCoffee, a
chrome extension tool
to simulate the
experience
VISUAL CHALLENGES

14. Other challenges of creating
accessible data visualization
Brand colors
Need for a color system
User expectations
Dynamic interfaces
Budget & resources
Constraints and influencing factors
1
VISUAL CHALLENGES
2
3
4
5

15. What does it mean
for us to design and
develop for an
inclusive audience?

16. Treating accessibility like another
breakpoint, an equally important
component of responsive design
A need to create meaning out of the
data before presenting it
Working together as a team that
thinks holistically to integrate
accessibility in our entire process
It means…
1
2
3

17. How can we evolve our
approach to create
solutions that work
for everyone?

18. No Screen First = Meaning First

19. The goal is to understand the
meaning of the data that
need to be presented
What are all the facets of the data that
matter to this project?
How are the pieces of data related to
each other?
And what meaning is created by those
relationships?
1
2
3

20. Person Book
AUTHOR
The relationship between two pieces
of information creates meaning

21. Understanding
the meaning of
the data allow
us to define
elements that
can be designed
for visual
presentation
and for non-
visual
presentation
Information / Data
Structural Meaning (outputs REST
API, JSON, XML, RSS)
Presentation for impaired vision
(Screen reader)
Presentation for normal vision
Presentation for motion/
interaction
The Meaning Stack
Enhanced
presentation
of meaning

22. Information:
data at its most
basic level. The
goal is to create
meaning out of
the data
Information / Data
The Meaning Stack

23. Structural
Meaning:
structuring the
data in a
meaningful way
that outputs
semantic data
with no user
interface
Information / Data
Structural Meaning (outputs REST
API, JSON, XML, RSS)
The Meaning Stack

24. Presentation
layers for the
screen: as we
progress
through each
presentation
layer, we can
enhance
meaning
appropriately.
Information / Data
Structural Meaning (outputs REST
API, JSON, XML, RSS)
Presentation for impaired vision
(Screen reader)
Presentation for normal vision
Presentation for motion/
interaction
The Meaning Stack
Enhanced
presentation
of meaning

25. Information
The prerequisite of meaning

26. Information at its most basic level,
without context and meaning that
we can understand
INFORMATION

27. Conceptual model is a possible output of how we conceptualize
the information to understand context and meaning
INFORMATION

28. Structural Meaning
Semantic data with no user interface

29. Structuring data in a meaningful way
to establish structure. A layer
separate from the visual presentation
{
‘metric-id’: “IncRate”,
sex: "F",
site: "Breast",
state: "District of Columbia",
race: "NULL",
age-range: "NULL",
stage: "NULL",
value: 141.7,
footnote: "NULL"
}
{
‘metricId’: "IncRate",
metricGroup: "Current Averages",
displayName: "Incidence rates,
2008-2012",
listClassification: "Incidence",
listOrder: "0",
unitType: "Number",
unitDescription: "Per 100,000, age
adjusted to the 2000 US standard
population",
}
STRUCTURAL MEANING

30. When we take the value of 141.7
and relate it to this description, the
meaning of the value is revealed
RATE{
‘value: 141.7,
}
{
unitDescription:
"Per 100,000, age
adjusted to the
2000 US standard
population”
}
STRUCTURAL MEANING

31. Understanding
the structural
meaning of our
data allow us to
enhance each
presentation
layer in a
meaningful way.
Information / Data
Structural Meaning (outputs REST
API, JSON, XML, RSS)
Presentation for motion/
interaction
The Meaning Stack
Enhanced
presentation
of meaning
Presentation for normal vision
Presentation for impaired vision
(Screen reader)
STRUCTURAL MEANING

32. Visual Presentation
Visual design

33. Every visual element has an
assigned purpose to
represent the data without
obstructing meaning
VISUAL DESIGN

34. Fundamental uses of colors in
information design
To label (color as noun)
To measure (color as quantity)
To represent (color as representation)
To decorate (color as beauty)
Envisioning Information by Edward Tufte
1
2
3
4
VISUAL DESIGN

35. Flexible color system
Brand colors
Colors tweaked for data visualization by adding saturation
and brightness
VISUAL DESIGN

36. Normal Red-green colorblindness
with Sim Daltonism tool
The data
structures dictate
requirements for
a color system. At
this stage, you
can start testing
colors using a
variety of tools for
visual
impairments,
before any user
interface
elements are even
designed.
VISUAL DESIGN

37. Normal Red-green colorblindness with Sim
Daltonism tool
VISUAL DESIGN

38. Tips for choosing colors
Alternate between warm and
cool colors to help differentiate
elements
When using more than 2 warm
or cool colors, add brightness
or saturation to distinctly
differentiate them
Avoid combining colors that are
low in saturation or brightness
VISUAL DESIGN
1
2
3

39. Visual Presentation
Implementation

40. When visual &
non-visual
presentations
align
IMPLEMENTATION

41. <svg id="bar-chart" class="bar-chart" aria-
labelledby="title">
<title id="title">
Probability of developing cancer bar chart
</title>
<g id="group-2">
<text class="chart-label">
<tspan>Breast (female)</tspan>
</text>
<rect class="background-bar"></rect>
<rect class="graph-bar"></rect>
<text class="chart-value">12.3%</text>
<g class="footnote">
<rect class="footnote__background"></rect>
<text class="footnote__text">
<tspan>Female breast cancer only</tspan>
</text>
</g>
</g>
</svg>
IMPLEMENTATION
When visual &
non-visual
presentations
align

42. IMPLEMENTATION
When visual &
non-visual
presentations
do not align

43. <svg aria-labelledby="title-664 desc-664" role=”img”>
<title id="title-664">
Incidence rate map
</title>
<desc id="desc-664">
The map data cannot be read by a
screen reader, to access this data
please view it as a table or a bar graph.
If you are not currently in the analysis
tool, use the open in analysis tool link.
</desc>
( actual svg paths here )
</svg>
IMPLEMENTATION
When visual &
non-visual
presentations
do not align

44. Conclusion

45. Treating accessibility like another
breakpoint, an equally important
component of responsive design
Creating meaning out of the data
before presenting it
Working together as a team that thinks
holistically to integrate accessibility
in our entire process
1
2
3
No-screen-first means

46. Questions that guide our
thinking process
What are all the “things” that exist in
this project?
How are all the “things” related to
each other?
And what meaning is created by
those relationships?
Will this presentation layer obstruct
or reveal the meaning of the “things”?
1
2
3
4

48. Special thanks to
Zach Kalman

49. Thanks!
@nguyetv
@tommyokeefe

50. Helpful tools
A11y Project
http://a11yproject.com/resources.html
Accessible SVG
http://www.sitepoint.com/tips-accessible-svg/
Sim Daltonism
https://michelf.ca/projects/sim-daltonism/
NoCoffee
Chrome extension