Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

NO-SCREEN-FIRST: AN EVOLVING APPROACH FOR AN INCLUSIVE AUDIENCE

1,055 views

Published on

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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

NO-SCREEN-FIRST: AN EVOLVING APPROACH FOR AN INCLUSIVE AUDIENCE

  1. 1. No Screen First An Evolving Approach For An Inclusive Audience March 24, 2016
  2. 2. TOMMY O’KEEFE @tommyokeefe NGUYET VUONG @nguyetv
  3. 3. What does it mean to make a product accessible?
  4. 4. What does it mean to make a product accessible? Standards compliance
  5. 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. 6. cancerstatisticscenter.cancer.org
  7. 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. 8. What is a “visualization” for someone who can’t see? 1
  9. 9. Visualization (n) Technique of creating images to communicate a message VISUAL CHALLENGES
  10. 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. 11. How someone with normal vision sees 
 the map VISUAL CHALLENGES
  12. 12. How someone with cataracts and glaucoma sees the map We used NoCoffee, a chrome extension tool to simulate 
 the experience VISUAL CHALLENGES
  13. 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. 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. 15. What does it mean for us to design and develop for an inclusive audience?
  16. 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. 17. How can we evolve our approach to create solutions that work for everyone?
  18. 18. No screen first = Meaning first Everyone who touches the project has an understanding of the meaning of the information.
  19. 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. 20. Person Book AUTHOR The relationship between two pieces of information creates meaning
  21. 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. 22. Information: 
 data at its most basic level. The goal is to create meaning out of the data Information / Data The Meaning Stack
  23. 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. 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. 25. Information The prerequisite of meaning
  26. 26. Information at its most basic level, without context and meaning INFORMATION / DATA
  27. 27. Conceptual model is a possible output of how we conceptualize the information to understand context and meaning INFORMATION / DATA
  28. 28. Structural Meaning Semantic data with no user interface
  29. 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. 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. 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. 32. Visual Presentation Visual design
  33. 33. Every visual element has an assigned purpose to represent the data without obstructing meaning VISUAL DESIGN
  34. 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. 35. Flexible color system Brand colors Colors tweaked for data visualization by adding saturation and brightness VISUAL DESIGN
  36. 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. 37. Normal Red-green color blindness VISUAL DESIGN
  38. 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. 39. Visual Presentation Implementation
  40. 40. When visual & non-visual presentations align IMPLEMENTATION
  41. 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. 42. When visual & non-visual presentations 
 do not align IMPLEMENTATION
  43. 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. 44. Conclusion
  45. 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. 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. 47. Special thanks to Zach Kalman
  48. 48. Thanks!
  49. 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

×