Accessible Design

class: title

<div class="scene f2 absolute top-0 left-0 w-10 bg-red bg-blue">5</div>
<h1>Accessible Design</h1>
<h2></h2>
<div class="conf-logo"></div>
<div class="talk-meta">
<p class="talk-author">Garrick Aden-Buie & Silvia Canelón</p>
<p class="talk-date">
<a href="https://presentable-user2021.netlify.app" class="underline f-lato" style="color: var(--text-light); text-underline-offset: 7px;">Professional, Polished, Presentable</a>
</p>
</div>

---
class: header_background f6

# Let's do this together!

Restart your R session <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F10</kbd>

.mt4[
Open `05-accessible-design/05-start.Rmd`
]

.mt4[
Run `xaringan::infinite_moon_reader()` to preview your slides
]

---
class: inverse middle

# The power of the Web<br> is in its universality

## Access by everyone regardless of disability<br> is an essential aspect

.pull-right[.right[.f7[[Tim Berners-Lee](https://www.w3.org/standards/webdesign/accessibility)<br>W3C Director & inventor of<br>the World Wide Web]]]

???
Great web accessibility starts in the design

---
class: header_background

# How do we design<br>accessible presentations?

.f7.mt5.mh4[

]

.footnote[Guidelines from [Making Scientific Content More Accessible<br>by Goring, Stack Whitney, Jacob, Bruna, and Poisot](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible)]

---
background-image: url(assets/img/04/04-inclusive-design.png)
background-size: contain
background-position: right

# Make "accessible"<br>your default mindset

.f7[.pull-left[

We communicate effectively when we make our work .b[open] and .b[accessible] to a broad audience

Principles of [inclusive design](https://www.microsoft.com/design/inclusive/)
- Recognize exclusion
- Solve for one, extend to many
- Learn from diversity

]]

.footnote[
[2.1 Make “accessible” your default mindset](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible/#author-label-make-accessible-your-default-mindset)<br>
Figure from the Inclusive Design 101 Toolkit by Microsoft
]

???
We are returning to this core idea after covering it in the section on effective communication, because the two are intertwined

- Recognizing exclusion helps us call on our humanity and powers of empathy

- By designing for someone with a permanent disability, someone with a situational limitation can also benefit

- pBy putting people at the center of our design process we learn from diverse perspectives and experiences

---

# Support images with text

### Figures and graphics should include text<br>that describes the visual (alternative text)

.pull-left[

.f7[
.b[Alt-text] allows the reader to understand an image without seeing it

.b[Screen readers] provide voice or braille access to computer text, including alt-text]

]

.pull-right[
.bg-washed-yellow.b--yellow.ba.bw0.br0.shadow-5.pa2[
.b[Alt-text options for R Markdown:]
- Markdown

- R Markdown code chunks

- Raw HTML
]
]

.footnote[
[2.6 Support images with text](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible/#author-label-imagetext)]

???
Screen readers like VoiceOver for MacOS or NVDA for Windows are used by blind people as well as people with low vision, cognitive disabilities, deafness or hard-of-hearing, motor disabilities, and others.

Many screen reader users experience more than one disability.

Alt text is also helpful when an image will not load, like in cases of slow internet connectivity

---

## <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M139.61 35.5a12 12 0 0 0-17 0L58.93 98.81l-22.7-22.12a12 12 0 0 0-17 0L3.53 92.41a12 12 0 0 0 0 17l47.59 47.4a12.78 12.78 0 0 0 17.61 0l15.59-15.62L156.52 69a12.09 12.09 0 0 0 .09-17zm0 159.19a12 12 0 0 0-17 0l-63.68 63.72-22.7-22.1a12 12 0 0 0-17 0L3.53 252a12 12 0 0 0 0 17L51 316.5a12.77 12.77 0 0 0 17.6 0l15.7-15.69 72.2-72.22a12 12 0 0 0 .09-16.9zM64 368c-26.49 0-48.59 21.5-48.59 48S37.53 464 64 464a48 48 0 0 0 0-96zm432 16H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg> In practice: Add alt-text with Markdown <svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M593.8 59.1H46.2C20.7 59.1 0 79.8 0 105.2v301.5c0 25.5 20.7 46.2 46.2 46.2h547.7c25.5 0 46.2-20.7 46.1-46.1V105.2c0-25.4-20.7-46.1-46.2-46.1zM338.5 360.6H277v-120l-61.5 76.9-61.5-76.9v120H92.3V151.4h61.5l61.5 76.9 61.5-76.9h61.5v209.2zm135.3 3.1L381.5 256H443V151.4h61.5V256H566z"/></svg>

.pull-left[

.f7[
We can add alt-text to an image inserted with the `![]()` syntax

Insert it between the square brackets:

```md
![Ring-tailed lemurs with alternating black and white rings along the entire length of their tail](ring-tailed-lemur.jpg)
```
]]

.pull-right[

![Ring-tailed lemurs with alternating black and white rings along the entire length of their tail](assets/img/05/ring-tailed-lemur.jpg)
]

---

## <svg aria-hidden="true" role="img" viewBox="0 0 512 512" style="height:1em;width:1em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M139.61 35.5a12 12 0 0 0-17 0L58.93 98.81l-22.7-22.12a12 12 0 0 0-17 0L3.53 92.41a12 12 0 0 0 0 17l47.59 47.4a12.78 12.78 0 0 0 17.61 0l15.59-15.62L156.52 69a12.09 12.09 0 0 0 .09-17zm0 159.19a12 12 0 0 0-17 0l-63.68 63.72-22.7-22.1a12 12 0 0 0-17 0L3.53 252a12 12 0 0 0 0 17L51 316.5a12.77 12.77 0 0 0 17.6 0l15.7-15.69 72.2-72.22a12 12 0 0 0 .09-16.9zM64 368c-26.49 0-48.59 21.5-48.59 48S37.53 464 64 464a48 48 0 0 0 0-96zm432 16H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z"/></svg> In practice: Add alt-text with RMarkdown <img src="https://raw.githubusercontent.com/rstudio/hex-stickers/master/PNG/rmarkdown.png" alt="rmarkdown" width="40px">

.f6[
We can add alt-text to an R Markdown code chunk output with the `fig.alt=""` option

````r
```{r, fig.alt="Ring-tailed lemurs with alternating black and white rings along the entire length of their tail"}
knitr::include_graphics("ring-tailed-lemur.jpg")
```
````
]

.footnote[Resource: [New in knitr: Improved accessibility with image alt text by RStudio](https://blog.rstudio.com/2021/04/20/knitr-fig-alt/)]

---
class: header_background f6

# Add alt-text in slide 2

Add a text description to the lemur image slide on the slide titled "Ring-tailed Lemurs"

<div class="mt4 pre-name">05-start.Rmd</div>
````r
```{r, fig.alt=""}
knitr::include_graphics("ring-tailed-lemur.jpg")
```
````

---

.pull-left[
### Not necessarily!

.f7[
To write effective alt-text we need to .b[consider the context]

What, if any, important information is the image supposed to communicate?
]
]

.pull-right[
.bg-washed-yellow.b--yellow.ba.bw0.br0.shadow-5.pa2[
.b[Resources]

- [Context is the most critical aspect of alt-text everyone seems to miss](https://uxdesign.cc/context-is-the-most-critical-aspect-of-alt-text-everyone-seems-to-miss-e18803a79212) by Sheri Byrne-Haber

- [An alt Decision Tree](https://www.w3.org/WAI/tutorials/images/decision-tree/) WAI Web Accessibility Tutorials

- [Images Concepts Tutorial](https://www.w3.org/WAI/tutorials/images/) by WAI Web Accessibility Tutorials]

]

---
# Make sure hyperlinks are<br>clear & unambiguous

.f7[
.pull-left[
- .b[Embed hyperlinks] in slides with xaringan

- Links are most useful when they .b[make sense out of context]

- Links should be .b[clearly labeled]
]
]

.pull-right[
.bg-washed-red.b--red.ba.bw0.br0.shadow-5.pa2[
.b[Avoid ambiguous links:]

- Here
- Click here
- Info
- More
- Read more
- Link

]
]

.footnote[[2.9 Make sure hyperlinks are clear & unambiguous](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible/#author-label-make-sure-hyperlinks-are-clear-unambiguous)<br>
[Link Text and Appearance](https://webaim.org/techniques/hypertext/link_text#uninformative) by Web Accessibility in Mind]

---
class: header_background f6

# Edit the link text to be more descriptive

Edit the slide titled "Ring-tailed Lemurs" to replace the link titled ".b[here]" with link text that makes sense out of context

<div class="mt4 pre-name">05-start.Rmd</div>
````md
The Duke Lemur Center provides more information [here](https://lemur.duke.edu/accordions/ring-tailed-lemurs-species-page/)
````

---
background-image: url(assets/img/05/dwarf-lemur.jpg)
background-position: right
background-size: contain

# Choose colors carefully

.pull-left[
.f7[

- Avoid using color as the .b[only] way to indicate priority or importance

- Check for .b[color independence] early and often by [simulating a grayscale display](https://developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector/Simulation)

- Check the colors in your palette for adequate [color contrast](https://webaim.org/articles/contrast/#intro)

]]

.footnote[[2.5 Choose colors carefully](https://www.authorea.com/users/152134/articles/206076-making-scientific-content-more-accessible/#author-label-choose-colors-carefully)<br>
[Color and accessibility](https://designsystem.digital.gov/design-tokens/color/overview/#color-and-accessibility) by U.S. Web Design System
]

---
class: header_background f7

# Check your color palette for contrast

- Use one of the following color contrast checkers

- [Contrast Checker](https://webaim.org/resources/contrastchecker/) by WebAIM (recommended)
  
  - [A11Y Rocks Color Palette](https://a11yrocks.com/colorPalette/) by Matt Long
  
  - [Accessible color palette builder](https://toolness.github.io/accessible-color-matrix/) by Atul Varma

- For an extensive gallery of color color combinations with adequate contrast, see the [Tachyons documentation for Theme Skins](https://tachyons.io/docs/themes/skins/)

## Let's check color independence and <br>color contrast together!

---
class: header_background

# We are finished with the scene!

.f7.mt4.mb4.mh4[
<svg aria-hidden="true" role="img" viewBox="0 0 448 512" style="height:1em;width:0.88em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zm0 400H48V80h352v352zm-35.864-241.724L191.547 361.48c-4.705 4.667-12.303 4.637-16.97-.068l-90.781-91.516c-4.667-4.705-4.637-12.303.069-16.971l22.719-22.536c4.705-4.667 12.303-4.637 16.97.069l59.792 60.277 141.352-140.216c4.705-4.667 12.303-4.637 16.97.068l22.536 22.718c4.667 4.706 4.637 12.304-.068 16.971z"/></svg> &emsp;Make "accessible" your default mindset

## <svg aria-hidden="true" role="img" viewBox="0 0 640 512" style="height:1em;width:1.25em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><path d="M206.86 245.15c-35.88 10.45-59.95 41.2-57.53 74.1 11.4-12.72 28.81-23.7 49.9-30.92l7.63-43.18zM95.81 295L64.08 115.49c-.29-1.62.28-2.62.24-2.65 57.76-32.06 123.12-49.01 189.01-49.01 1.61 0 3.23.17 4.85.19 13.95-13.47 31.73-22.83 51.59-26 18.89-3.02 38.05-4.55 57.18-5.32-9.99-13.95-24.48-24.23-41.77-27C301.27 1.89 277.24 0 253.32 0 176.66 0 101.02 19.42 33.2 57.06 9.03 70.48-3.92 98.48 1.05 126.58l31.73 179.51c14.23 80.52 136.33 142.08 204.45 142.08 3.59 0 6.75-.46 10.01-.8-13.52-17.08-28.94-40.48-39.5-67.58-47.61-12.98-106.06-51.62-111.93-84.79zm97.55-137.46c-.73-4.12-2.23-7.87-4.07-11.4-8.25 8.91-20.67 15.75-35.32 18.32-14.65 2.58-28.67.4-39.48-5.17-.52 3.94-.64 7.98.09 12.1 3.84 21.7 24.58 36.19 46.34 32.37 21.75-3.82 36.28-24.52 32.44-46.22zM606.8 120.9c-88.98-49.38-191.43-67.41-291.98-51.35-27.31 4.36-49.08 26.26-54.04 54.36l-31.73 179.51c-15.39 87.05 95.28 196.27 158.31 207.35 63.03 11.09 204.47-53.79 219.86-140.84l31.73-179.51c4.97-28.11-7.98-56.11-32.15-69.52zm-273.24 96.8c3.84-21.7 24.58-36.19 46.34-32.36 21.76 3.83 36.28 24.52 32.45 46.22-.73 4.12-2.23 7.87-4.07 11.4-8.25-8.91-20.67-15.75-35.32-18.32-14.65-2.58-28.67-.4-39.48 5.17-.53-3.95-.65-7.99.08-12.11zm70.47 198.76c-55.68-9.79-93.52-59.27-89.04-112.9 20.6 25.54 56.21 46.17 99.49 53.78 43.28 7.61 83.82.37 111.93-16.6-14.18 51.94-66.71 85.51-122.38 75.72zm130.3-151.34c-8.25-8.91-20.68-15.75-35.33-18.32-14.65-2.58-28.67-.4-39.48 5.17-.52-3.94-.64-7.98.09-12.1 3.84-21.7 24.58-36.19 46.34-32.37 21.75 3.83 36.28 24.52 32.45 46.22-.73 4.13-2.23 7.88-4.07 11.4z"/></svg> [materials/act-02/05-accessible-design](/materials/act-02/05-accessible-design/#activity)