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