Xaringan Demo

class: right middle hide-count
background-color: white
background-image: url('assets/cover.jpg')
background-size: cover

<div class='title'><h1>A11Y IN R:</h1></div>
<div class='subtitle'>
Adapting <a class="title-link" href="https://fossheim.io/writing/posts/accessible-dataviz-design/">Sarah L. Fossheim's 10 dos and don'ts to keep in mind when designing accessible data visualizations</a></div>

<div class="author">MAYA GANS</div>
<div class="presentation">RStudio Meetup</div>

---

class: right middle hide-count
background-color: white
background-image: url('assets/slide1.jpeg')
background-size: cover

<div class="quote">Accessibility should always be a focus when designing products, and the same goes when working with data visualizations and graphs.</div>

<div class="quote-auth">- Sarah L Fossheim</div>

---

class: hide-count
background-color: white
background-image: url('assets/slide234.jpeg')
background-size: contain

<div class="title-234">
  1. Don't rely on color to explain the data
</div>

.custom-code-css[

```r
ggplot(data, aes(x = person, y = values)) +
  geom_bar(stat = "identity", aes(fill = category)) 
```
]

---

class: hide-count
background-color: white
background-image: url('assets/slide234.jpeg')
background-size: contain

<div class="title-234">
  1. Don't rely on color to explain the data
</div>

<a class="large-link" href="https://www.color-blindness.com/coblis-color-blindness-simulator/">Coblis —
Color Blindness Simulator</a>

---

class: hide-count
background-color: white
background-image: url('assets/slide234.jpeg')
background-size: contain

<div class="title-234">
  1. Don't rely on color to explain the data
</div>

.custom-code-css[

```r
library(ggpattern)
ggplot(data, aes(x = person, y = values)) +
  geom_col_pattern(
    aes(pattern = category),
    fill = 'white',
    colour = 'black',
  )
```
]

---

class: hide-count
background-color: white
background-image: url('assets/slide5.jpeg')
background-size: contain

<div class="title-234 white">
  2. Don't use very bright or low-contrast colors
</div>

.custom-code-2[

```r
colorchecker::contrast_checker()
```
]

<section id="color-contrast">
<h1 class="h1-color">Color Contrast Checker</h1>
<div id="boxes">
<div id="aa-large">
<span>Large Text</span>
<span>WCAG AA</span>
</div>
<div id="aa-normal">
<span>Normal Text</span>
<span>WCAG AA</span>
</div>
<div id="aaa-large">
<span>Large Text</span>
<span>WCAG AAA</span>
</div>
<div id="aaa-normal">
<span>Large Text</span>
<span>WCAG AAA</span>
</div>
</div>
<div id="sample">
<div contenteditable="TRUE" id="sample-text" style="color:rgb(0,0,0);background:rgb(255,255,255)">Click to change the demo text</div>
</div>
<div id="bars">
<div class="color-picker">
<h2 class="h2-color">Foreground</h2>
<div>
<label for="color-1-r" class="red">R</label>
<input id="color-1-r" type="range" min="0" max="225" value="0"/>
<input id="number-1-r" type="number" min="0" max="225" value="0"/>
</div>
<div>
<label for="color-1-g" class="green">G</label>
<input id="color-1-g" type="range" min="0" max="225" value="0"/>
<input id="number-1-g" type="number" min="0" max="225" value="0"/>
</div>
<div>
<label for="color-1-b" class="blue">B</label>
<input id="color-1-b" type="range" min="0" max="225" value="0"/>
<input id="number-1-b" type="number" min="0" max="225" value="0"/>
</div>
<input id="color-1-hex" data-target="1" type="text" value="#000000" maxlength="7"/>
</div>
<div class="color-picker">
<h2 class="h2-color">Background</h2>
<div>
<label for="color-2-r" class="red">R</label>
<input id="color-2-r" type="range" min="0" max="225" value="0"/>
<input id="number-2-r" type="number" min="0" max="225" value="0"/>
</div>
<div>
<label for="color-2-g" class="green">G</label>
<input id="color-2-g" type="range" min="0" max="225" value="0"/>
<input id="number-2-g" type="number" min="0" max="225" value="0"/>
</div>
<div>
<label for="color-2-b" class="blue">B</label>
<input id="color-2-b" type="range" min="0" max="225" value="0"/>
<input id="number-2-b" type="number" min="0" max="225" value="0"/>
</div>
<input id="color-2-hex" data-target="1" type="text" value="#000000" maxlength="7"/>
</div>
</div>
</section>

---

class: hide-count
background-color: white
background-image: url('assets/slide6.jpeg')
background-size: contain

<div class="title-234 white">
  3. Don't hide important data behind interactions
</div>

.plotly-hover[
<div id="htmlwidget-e029179d2a8e95398723" style="width:504px;height:504px;" class="plotly html-widget"></div>
<script type="application/json" data-for="htmlwidget-e029179d2a8e95398723">{"x":{"visdat":{"19286fc7e7d4":["function () ","plotlyVisDat"]},"cur_data":"19286fc7e7d4","attrs":{"19286fc7e7d4":{"x":{},"y":{},"hovertemplate":"<b> Value:<\/b>%{y} <extra><\/extra>","color":{},"alpha_stroke":1,"sizes":[10,100],"spans":[1,20],"type":"bar"}},"layout":{"width":400,"height":200,"margin":{"b":40,"l":60,"t":25,"r":10},"barmode":"stack","xaxis":{"domain":[0,1],"automargin":true,"title":"person","type":"category","categoryorder":"array","categoryarray":["Person 1","Person 2","Person 3"]},"yaxis":{"domain":[0,1],"automargin":true,"title":"values"},"hovermode":"closest","showlegend":true},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false,"displayModeBar":false},"data":[{"x":["Person 1","Person 2","Person 3"],"y":[12,8,13],"hovertemplate":["<b> Value:<\/b>%{y} <extra><\/extra>","<b> Value:<\/b>%{y} <extra><\/extra>","<b> Value:<\/b>%{y} <extra><\/extra>"],"type":"bar","name":"Category 1","marker":{"color":"rgba(102,194,165,1)","line":{"color":"rgba(102,194,165,1)"}},"textfont":{"color":"rgba(102,194,165,1)"},"error_y":{"color":"rgba(102,194,165,1)"},"error_x":{"color":"rgba(102,194,165,1)"},"xaxis":"x","yaxis":"y","frame":null},{"x":["Person 1","Person 2","Person 3"],"y":[2,7,5],"hovertemplate":["<b> Value:<\/b>%{y} <extra><\/extra>","<b> Value:<\/b>%{y} <extra><\/extra>","<b> Value:<\/b>%{y} <extra><\/extra>"],"type":"bar","name":"Category 2","marker":{"color":"rgba(252,141,98,1)","line":{"color":"rgba(252,141,98,1)"}},"textfont":{"color":"rgba(252,141,98,1)"},"error_y":{"color":"rgba(252,141,98,1)"},"error_x":{"color":"rgba(252,141,98,1)"},"xaxis":"x","yaxis":"y","frame":null},{"x":["Person 1","Person 2","Person 3"],"y":[7,4,15],"hovertemplate":["<b> Value:<\/b>%{y} <extra><\/extra>","<b> Value:<\/b>%{y} <extra><\/extra>","<b> Value:<\/b>%{y} <extra><\/extra>"],"type":"bar","name":"Category 3","marker":{"color":"rgba(141,160,203,1)","line":{"color":"rgba(141,160,203,1)"}},"textfont":{"color":"rgba(141,160,203,1)"},"error_y":{"color":"rgba(141,160,203,1)"},"error_x":{"color":"rgba(141,160,203,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":[]}</script>
]

.focus-plot[
<div id="htmlwidget-43d5916c5bc403e1f7b1" style="width:504px;height:504px;" class="plotly html-widget"></div>
<script type="application/json" data-for="htmlwidget-43d5916c5bc403e1f7b1">{"x":{"visdat":{"19281fa3593f":["function () ","plotlyVisDat"]},"cur_data":"19281fa3593f","attrs":{"19281fa3593f":{"x":{},"y":{},"hoverinfo":"none","color":{},"alpha_stroke":1,"sizes":[10,100],"spans":[1,20],"type":"bar"}},"layout":{"width":400,"height":200,"margin":{"b":40,"l":60,"t":25,"r":10},"barmode":"stack","xaxis":{"domain":[0,1],"automargin":true,"title":"person","type":"category","categoryorder":"array","categoryarray":["Person 1","Person 2","Person 3"]},"yaxis":{"domain":[0,1],"automargin":true,"title":"values"},"hovermode":"closest","showlegend":true},"source":"A","config":{"modeBarButtonsToAdd":["hoverclosest","hovercompare"],"showSendToCloud":false,"displayModeBar":false},"data":[{"x":["Person 1","Person 2","Person 3"],"y":[12,8,13],"hoverinfo":["none","none","none"],"type":"bar","name":"Category 1","marker":{"color":"rgba(102,194,165,1)","line":{"color":"rgba(102,194,165,1)"}},"textfont":{"color":"rgba(102,194,165,1)"},"error_y":{"color":"rgba(102,194,165,1)"},"error_x":{"color":"rgba(102,194,165,1)"},"xaxis":"x","yaxis":"y","frame":null},{"x":["Person 1","Person 2","Person 3"],"y":[2,7,5],"hoverinfo":["none","none","none"],"type":"bar","name":"Category 2","marker":{"color":"rgba(252,141,98,1)","line":{"color":"rgba(252,141,98,1)"}},"textfont":{"color":"rgba(252,141,98,1)"},"error_y":{"color":"rgba(252,141,98,1)"},"error_x":{"color":"rgba(252,141,98,1)"},"xaxis":"x","yaxis":"y","frame":null},{"x":["Person 1","Person 2","Person 3"],"y":[7,4,15],"hoverinfo":["none","none","none"],"type":"bar","name":"Category 3","marker":{"color":"rgba(141,160,203,1)","line":{"color":"rgba(141,160,203,1)"}},"textfont":{"color":"rgba(141,160,203,1)"},"error_y":{"color":"rgba(141,160,203,1)"},"error_x":{"color":"rgba(141,160,203,1)"},"xaxis":"x","yaxis":"y","frame":null}],"highlight":{"on":"plotly_click","persistent":false,"dynamic":false,"selectize":false,"opacityDim":0.2,"selected":{"opacity":1},"debounce":0},"shinyEvents":["plotly_hover","plotly_click","plotly_selected","plotly_relayout","plotly_brushed","plotly_brushing","plotly_clickannotation","plotly_doubleclick","plotly_deselect","plotly_afterplot","plotly_sunburstclick"],"base_url":"https://plot.ly"},"evals":[],"jsHooks":{"render":[{"code":"\n    function(el) { \n      el.on('plotly_click', function(d) { \n        console.log('Click: ', d);\n        let output = document.getElementById('plotly-output')\n        output.innerHTML = \n          `Value: ${d.points[0].value}`\n      });\n    }\n  ","data":null}]}}</script>
]

---

class: hide-count
background-color: white
background-image: url('assets/slide6.jpeg')
background-size: contain

<div class="title-234 white">
  3. Don't hide important data behind interactions
</div>

.plotly-hover-code[

```r
plotly::plot_ly(
  data, 
  x = ~person, 
  y = ~values,
  type = 'bar', 
  color = ~category,
  hovertemplate = paste(
      '<b> Value:</b>%{y}',
      '<extra></extra>')
  ) %>% 
  plotly::layout(barmode = 'stack')
```
]

.plotly-focus-code[

```r
tags$div(id="plotly-output")

plotly::plot_ly(
  data, 
  x = ~person, 
  y = ~values,
  type = 'bar', 
  color = ~category,
  hoverinfo='none'
  ) %>% 
  plotly::layout(barmode = 'stack') %>%
  htmlwidgets::onRender("
    function(el) { 
      el.on('plotly_click', function(d) { 
        let output = document.getElementById('plotly-output')
        output.innerHTML = 
          `Value: ${d.points[0].value}`
      });
    }
  ")
```
]

---

class: hide-count
background-color: white
background-image: url('assets/slide7.jpeg')
background-size: contain

<div class="title-234">
  4. Don't overwhelm the user with information
</div>

<div class="slide-header">The goal of a data science team is to help organizations or individuals make better decisions informed by data 
<br><span style="text-align:right;">-Sean Lopp</span></div>

<div class="item-1">Decide what users need</div>
<div class="item-2">Lead with key data</div>
<div class="item-3">Hand power to the user</div>
<div class="item-4">Use consistent language and colors</div>

---

class: hide-count
background-color: white
background-image: url('assets/slide8.jpeg')
background-size: contain

<div class="title-234">
  5. Use accessibility tools when designing
</div>

<a class="a-slide-title" href="https://www.w3.org/TR/WCAG21/">Web Content Accessibility Guidelines</a>

<a class="a-list-1" href="https://color.a11y.com/">Color Contrast Validator</a>
<a class="a-list-2" href="https://developers.google.com/web/tools/lighthouse">Google Lighthouse</a>
<a class="a-list-3" href="https://www.a11yproject.com/checklist/">A11y Project Checklist</a>

---

class: hide-count
background-color: white
background-image: url('assets/slide234.jpeg')
background-size: contain

<div class="title-234">
  6. Use patterns and shapes in addition to color
</div>

.custom-code-css[

```r
ggplot(data, aes(x = values, y = values2)) +
  geom_point(stat = "identity", 
             aes(
               color = category
               )
             ) 
```
]

---

class: hide-count
background-color: white
background-image: url('assets/slide234.jpeg')
background-size: contain

<div class="title-234">
  6. Use patterns and shapes in addition to color
</div>

.custom-code-css[

```r
ggplot(data, aes(x = values, y = values2)) +
  geom_point(stat = "identity", 
             aes(
               color = category, 
               shape = category
               )
             ) 
```
]

---

class: hide-count
background-color: white
background-image: url('assets/slide234.jpeg')
background-size: contain

<div class="title-234">
  7. Use labels and legends
</div>

.custom-code-css-grob[

```r
p <- ggplot(data, aes(x = time, y = values, group = person)) +
  geom_point(aes(shape = person, color = person)) +
  geom_line(aes(color = person, linetype = person)) +
  geom_text(data = subset(data, time == 3), 
            aes(label = person, 
                colour = person, 
                x = max(data$time) + 0.1, 
                y = values
            ), 
            hjust = -0.4) +
  theme(plot.margin = unit(c(1,6,1,1), "lines"))

gt <- ggplotGrob(p)
gt$layout$clip[gt$layout$name == "panel"] <- "off"
grid.draw(gt)
```
]

---

class: hide-count
background-color: white
background-image: url('assets/slide11.jpeg')
background-size: contain

<div class="title-11">
  8. Translate the data into clear language
</div>

<a class="title-link link-11" href="https://chartability.fizz.studio/">Chartability</a>

---

class: hide-count
background-color: white
background-image: url('assets/slide12.jpeg')
background-size: contain

<div class="title-234">
  9. Provide context and explain the visualization
</div>

.line-context-code[

```r
ggplot(data, 
       aes(x = time, 
           y = values, 
           group = person)
       ) +
  geom_line(stat = "identity") +
  theme_bw() +
  annotate('text', 
           x = 1.78,
           y = 2.2, 
           label = "all time low") +
  annotate('text', 
           x = 3.14,
           y = 15, 
           label = "record high") +
  xlim(1,3.5)
```
]

---

class: hide-count
background-color: white
background-image: url('assets/slide12.jpeg')
background-size: contain

<div class="title-234">
  9. Provide context and explain the visualization
</div>

.bar-context-code[

```r
ggplot(data, aes(x = person, y = values)) +
  geom_bar(
    stat = 'identity', 
    aes(fill = test), 
    color = "white", 
    size = 1
  ) +
  scale_fill_manual(
    values = c("lightgray", "maroon")) +
  scale_x_discrete(
    limits = c("Person 1", 
               "Person 2", 
               "Person 3", 
               "")
    ) +
  annotate('text', 
           x = 3.8, 
           y = 13, 
           label = "Some event 
                    worth highlighting",
           color = "maroon")
```
]

---

class: hide-count
background-color: white
background-image: url('assets/slide13.jpeg')
background-size: contain

<div class="title-234 white">
  10. Focus on accessibility during user interviews
</div>

.box-13[
## Preparing
- Give user personas disabilities
]

---

class: hide-count
background-color: white
background-image: url('assets/slide13.jpeg')
background-size: contain

<div class="title-234 white">
  10. Focus on accessibility during user interviews
</div>

.box-13[
 <h2>Recruiting</h2>
 - Set aside 1 on 1 time 
 - Give participants a ride share credit
 - Inquire about the assistive technology used
]

---

class: hide-count
background-color: white
background-image: url('assets/slide13.jpeg')
background-size: contain

<div class="title-234 white ">
  10. Focus on accessibility during user interviews
</div>

.box-13[
## Conducting
- Bring their own hardware 
- Assistive Tech specialist on sight 
- Assume interviews will be longer
- Have a working prototype 
]

---

class: hide-count
background-color: white
background-image: url('assets/thankyou.jpeg')
background-size: contain