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
March 24, 2016

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
and developing from a no-screen-
first approach?

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

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
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.
VISUAL CHALLENGES

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 color
blindness sees the
map
VISUAL CHALLENGES
We used NoCoffee, a chrome
extension tool to simulate
the experience

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
Everyone who touches the project has an
understanding of the meaning of the information.

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: 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
INFORMATION / DATA

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

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.
STRUCTURAL MEANING
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

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)
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 color
blindness
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 color
blindness
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
1
2
3
VISUAL DESIGN

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>
When visual &
non-visual
presentations align
IMPLEMENTATION

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

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
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
No screen first means
1
2
3

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

47. Special thanks to
Zach Kalman

48. Thanks!

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