Writing Meaningful Alt Texts for Data Visualizations in R

class: bottom, title
background-image: url(img/ben2.jpg)
background-position: 95% 10%
background-size: 200px

## Writing Meaningful Alt Texts for Data Visualizations in R
#### R Ladies NYC
#### October 10, 2022
#### Liz Hare, PhD<br>@DogGeneticsLLC <svg aria-label="Twitter" 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;"><title>Twitter</title><path d="M459.4 151.7c.325 4.548 .325 9.097 .325 13.65 0 138.7-105.6 298.6-298.6 298.6-59.45 0-114.7-17.22-161.1-47.11 8.447 .974 16.57 1.299 25.34 1.299 49.06 0 94.21-16.57 130.3-44.83-46.13-.975-84.79-31.19-98.11-72.77 6.498 .974 12.99 1.624 19.82 1.624 9.421 0 18.84-1.3 27.61-3.573-48.08-9.747-84.14-51.98-84.14-102.1v-1.299c13.97 7.797 30.21 12.67 47.43 13.32-28.26-18.84-46.78-51.01-46.78-87.39 0-19.49 5.197-37.36 14.29-52.95 51.65 63.67 129.3 105.3 216.4 109.8-1.624-7.797-2.599-15.92-2.599-24.04 0-57.83 46.78-104.9 104.9-104.9 30.21 0 57.5 12.67 76.67 33.14 23.72-4.548 46.46-13.32 66.6-25.34-7.798 24.37-24.37 44.83-46.13 57.83 21.12-2.273 41.58-8.122 60.43-16.24-14.29 20.79-32.16 39.31-52.63 54.25z"/></svg>

---
class: middle, center

## Liz Hare, PhD

[<svg aria-label="Link" 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;"><title>Link</title><path d="M172.5 131.1C228.1 75.51 320.5 75.51 376.1 131.1C426.1 181.1 433.5 260.8 392.4 318.3L391.3 319.9C381 334.2 361 337.6 346.7 327.3C332.3 317 328.9 297 339.2 282.7L340.3 281.1C363.2 249 359.6 205.1 331.7 177.2C300.3 145.8 249.2 145.8 217.7 177.2L105.5 289.5C73.99 320.1 73.99 372 105.5 403.5C133.3 431.4 177.3 435 209.3 412.1L210.9 410.1C225.3 400.7 245.3 404 255.5 418.4C265.8 432.8 262.5 452.8 248.1 463.1L246.5 464.2C188.1 505.3 110.2 498.7 60.21 448.8C3.741 392.3 3.741 300.7 60.21 244.3L172.5 131.1zM467.5 380C411 436.5 319.5 436.5 263 380C213 330 206.5 251.2 247.6 193.7L248.7 192.1C258.1 177.8 278.1 174.4 293.3 184.7C307.7 194.1 311.1 214.1 300.8 229.3L299.7 230.9C276.8 262.1 280.4 306.9 308.3 334.8C339.7 366.2 390.8 366.2 422.3 334.8L534.5 222.5C566 191 566 139.1 534.5 108.5C506.7 80.63 462.7 76.99 430.7 99.9L429.1 101C414.7 111.3 394.7 107.1 384.5 93.58C374.2 79.2 377.5 59.21 391.9 48.94L393.5 47.82C451 6.731 529.8 13.25 579.8 63.24C636.3 119.7 636.3 211.3 579.8 267.7L467.5 380z"/></svg> doggenetics.com](http://doggenetics.com/)<br>
[<svg aria-label="Twitter" 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;"><title>Twitter</title><path d="M459.4 151.7c.325 4.548 .325 9.097 .325 13.65 0 138.7-105.6 298.6-298.6 298.6-59.45 0-114.7-17.22-161.1-47.11 8.447 .974 16.57 1.299 25.34 1.299 49.06 0 94.21-16.57 130.3-44.83-46.13-.975-84.79-31.19-98.11-72.77 6.498 .974 12.99 1.624 19.82 1.624 9.421 0 18.84-1.3 27.61-3.573-48.08-9.747-84.14-51.98-84.14-102.1v-1.299c13.97 7.797 30.21 12.67 47.43 13.32-28.26-18.84-46.78-51.01-46.78-87.39 0-19.49 5.197-37.36 14.29-52.95 51.65 63.67 129.3 105.3 216.4 109.8-1.624-7.797-2.599-15.92-2.599-24.04 0-57.83 46.78-104.9 104.9-104.9 30.21 0 57.5 12.67 76.67 33.14 23.72-4.548 46.46-13.32 66.6-25.34-7.798 24.37-24.37 44.83-46.13 57.83 21.12-2.273 41.58-8.122 60.43-16.24-14.29 20.79-32.16 39.31-52.63 54.25z"/></svg> @DogGeneticsLLC](https://twitter.com/DogGeneticsLLC)<br>
[<svg aria-label="GitHub" role="img" viewBox="0 0 496 512" style="height:1em;width:0.97em;vertical-align:-0.125em;margin-left:auto;margin-right:auto;font-size:inherit;fill:currentColor;overflow:visible;position:relative;"><title>GitHub</title><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3 .3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5 .3-6.2 2.3zm44.2-1.7c-2.9 .7-4.9 2.6-4.6 4.9 .3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3 .7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3 .3 2.9 2.3 3.9 1.6 1 3.6 .7 4.3-.7 .7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3 .7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3 .7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg> @LizHareDogs](https://github.com/LizHareDogs)<br>
[<svg aria-label="Envelope" 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;"><title>Envelope</title><path d="M464 64C490.5 64 512 85.49 512 112C512 127.1 504.9 141.3 492.8 150.4L275.2 313.6C263.8 322.1 248.2 322.1 236.8 313.6L19.2 150.4C7.113 141.3 0 127.1 0 112C0 85.49 21.49 64 48 64H464zM217.6 339.2C240.4 356.3 271.6 356.3 294.4 339.2L512 176V384C512 419.3 483.3 448 448 448H64C28.65 448 0 419.3 0 384V176L217.6 339.2z"/></svg> LizHare@DogGenetics.com](mailto:LizHare@DogGenetics.com)

.pull-left[

]

---

# Today's Topics

- What is alt text?
- Two Frameworks for thinking about writing alt text
- Example
- Including alt text in R markdown documents
- Questions/Practice alt texts

---

# Alt text: What It Is

- Attached to images to provide a description for people who use screen reading software.
- Required to adhere to accessibility laws
- Crucial to make sure your data communication reaches everyone

There are blind, low vision, and neurodivergent people in the general population, 
and there are blind members of the data analysis community,
even though we have not been visible.

---

# Alt text: What It Does

Answers "Why was this image included?"

Examples: 
- It describes the relationship between X and Y in a graph  
- It describes COVID-19 incidences on a map
- It compares four groups on outcome measures in faceted bar charts

---

# Alt Text: What It Isn't

- **Automatically generated** by AI or text mining
- The title
- The caption
- Axis labels on a graph
- A humorous remark

These will usually not answer these questions:  
- "Why am I including this data visualization?"
- "What are the data saying?"

.footnote[
Humor is allowed, but it shouldn't obscure the message conveyed by the image
]
---

# Where is Alt Text?

Started in [HTML code](https://en.wikipedia.org/wiki/Alt_attribute).

Now appears in places like:  
- [MS Office](https://support.microsoft.com/en-us/office/add-alternative-text-to-a-shape-picture-chart-smartart-graphic-or-other-object-44989b2a-903c-4d9a-b742-6a75b451c669)
- PDFs created with Office
- [PDFs created with Adobe Acrobat](https://csuf.screenstepslive.com/s/12867/m/96806/l/1474315-alt text-for-images-in-adobe-acrobat-pdf)
- [Twitter posts](https://help.twitter.com/en/using-twitter/picture-descriptions)  
    - New! [Get Twitter to remind you when you forget alt text]()
- [Facebook posts](https://www.perkinselearning.org/technology/blog/how-add-alt text-facebook-page)  
- R markdown [documents](https://bookdown.org/yihui/rmarkdown/) and [slides](https://hugo-academic--silvia.netlify.app/2021-03-16-deploying-xaringan-slides/)

.footnote[
Follow links for instructions
]

---

# Missing Alt Text Infrastructure?

.pull-left[
Places without alt text infrastructure

- academic journals
- books
- magazines  
- software that helps you create websites and blogs
]

.pull-right[
Workarounds

- Provide descriptions in text, e.g. describe graphed relationship in Results section of a paper
- Provide text descriptions of images as supplementary material when submitting to an academic journal
- Use replies or comments in social media if you've forgotten alt text
- Provide tables and/or raw data for data visualizations
]

---

# Alt Text: How Long Is It?

*It depends!*  
- context  
- complexity

Use your judgement even though
- Some media have character limits for alt text
- Too many guidelines emphasize brevity
- One or two sentences won't be enough for many data visualizations

---

# Alt Text For Data Visualization: Ingredients Model

.pull-left[
Ingredients (answer these questions):
1. What kind of visualization is it (line graph, scatter plot, bar chart...?)
2. What variables are on the axes?
3. What is the range of the data?
4. What relationship between variables does the data visualization show?
]

.pull-right[
**Opinion:** Don't waste my time with 1-3 if you aren't going to include 4. While some automatic
alt text processes mine some of this information, I don't want to spend time building a mental model of the graph if I can't find out what the graph *says*.
]

.footnote[Ingredients identified in this collaboration:  
Canelón S, Hare E. (2021) Revealing room for improvement in accessibility within a social media data visualization learning community. csvConf2021 https://github.com/spcanelon/csvConf2021  
]

---

# Alt Text for Data Visualization: MIT Visualization Group 4-Levels Model

1. Elements and encoded properties  
    - *title, axes and axis labels, data points*  
2. Statistical and relation information  
    - *mean, standard deviation, minimum, maximum*  
3. Perceptual and cognitive phenomena  
   - * "y increases linearly with x," "males spend less time in all behaviors than females for all faceted behaviors," "The following states have high incidences: ... "*
4. Contextual and domain-specific insights  
    - *"the change in x at this time point was caused by <something not in the data visualization at all>", "the change in incidence was large"*

---

# Link to the Data

Providing a link to the data set and/or an HTML-formatted data table allows the user to explore the data on their own.

Examples:
- COVID-19 incidence map by zip code with a table where the user can look up incidence by zip code
- A line graph accompanied by a data set allows the user to explore statistics like mean, median,
minimum, maximum, slope

Tip: don't put URLs in alt text unless they are very simple; there is no way for a screen reader to activate them

---

## Data Visualization Example 1

Dr. Sheffield covering all the ingredients!

.pull-left[
A graph marking diversity through time.

X axis: geologic time

y axis: number of marine families.

The x axis spans from the Ediacaran to the Tertiary with the periods marked. Eons marked below. The Cambrian phase is marked, ending in Cambrian. Paleozoic phase stretches from Ordovician to Permian. Mesozoic- Cenozoic phase stretches from Triassic to Tertiary.   
]

.pull-right[
Diversity starts low- first big jump occuurs in Cambrian but a larger one occurs during Ordovician. The highest point in the Paleozoic reaches in Ordovician and stays there, except for the 2 major extinctions marked. At the Permian- Triassic, there is a large decrease, and it increases steadily to the end of the graph, except for extinction events.

Each of the major mass extinctions are marked (5). 0 is marked as an extinction of Ediacaran biota (but there is no decrease in diversity- this is hypothesized, but not clear what occured). 
1: extinction at end of Ordovician. 2: Devonian extinction. 3: Permian extinction. 4: Triassic. 5: Cretaceous.   
]

---

## Data Visualization Example Graph

.footnote[
Sepkoski, J. J. (1978). A kinetic model of Phanerozoic taxonomic diversity I. Analysis of marine orders. Paleobiology, 4(3), 223-251.
]

---

# Objectivity

Report what you perceive about the data without judgement about what they mean.

Don't   
- make assumption about whether values are "good" or "bad" (Jung et al, 2021)  
- express opinions about variables (Jung et al, 2021; Lundgard et al, 2021)
- judge whether a change is small or large (Jung et al, 2021)
- conflate correlation with causation

.footnote[
Jung C, Mehta S, Kulkarni A, Zhao Y, Kim YS. Communicating Visualizations without Visuals: Investigation of Visualization Alternative Text for People with Visual Impairments. IEEE Transactions on Visualization and Computer Graphics. 2021 Sep 30;28(1):1095-105.

Lundgard A, Satyanarayan A. Accessible Visualization via Natural Language Descriptions: A Four-Level Model of Semantic Content. IEEE transactions on visualization and computer graphics. 2021 Sep 30;28(1):1073-83.
]

---

class: middle, center

#R!

---

# Alt Text in R Markdown

`fig.alt` is the chunk option that holds your alt text.  
Include one graphic per chunk

```` 
``` {r, altCodeChunk, echo=TRUE, fig.alt = "My Alt Text"}
library(knitr)
include_graphics("img/ben2.jpg")
```
````

You can see examples of`.Rmd` code for  including alt text for [these very slides](https://LizHareDogs.github.io/RLadiesNYAltText).

---

# {ggplot2} Label `alt`

You can also specify alt text for a `ggplot`
using the `labs(alt = <your-alt text>)` option.

```` 
``` {r, plotTrees, echo=TRUE, eval=TRUE, fig.alt=get_alt_text(p1)}}
library(knitr)
library(ggplot2)

p1 <- ggplot(Loblolly, aes(x = age, y = height)) +
    geom_point(na.rm=TRUE) +
    labs(alt = "Scatter plot of tree height and age, X axis is age from 3 to 25 [need to find out units], y axis is height from 3.46 to 64.10 [need to find out units]. Guessing they get taller with age.")

save(p1, file="p1.Rda")
```
````

---

# Retrieve your {ggplot} Alt Text

`get_alt_text(p1)`

---

# Include Alt Text in Your Markdown Report

As a workaround when publications don't support alt-text,
you can use `get_alt_text()` to

- Use it as descriptive text inside your report
- Create a separate document to contain all alt texts for a supplementary file

*Make sure your ggplot object is available* when you `get_alt_text()`
- save the object in the chunk where you create it
- load it in the inline code like

`load("p1.Rda"); get_alt_text(p1)`

---

# Clunkiness

- Impossible to write alt text without seeing the data visualization first

- `.Rmd` needs to be edited to include alt text

---

# Side Note: Providing Your Graphed Data in a File

The [{ggdatasaver)](https://github.com/eliocamp/ggdatasaver) package 
saves the data that generated a `ggplot`'

Useful when:
- Journals don't have infrastructure to include alt text (include as supplementary files)
- Your students will need to explore the data more fully
- You need to preserve confidentiality of data summarized in your plot

For plot `p1`:

`save_plot_data(p1, file="p1data.zip")`

---

# Questions?

.pull-left[
#### Thank you!
- [R-Ladies NYC](https://www.rladiesnyc.org), for the invitation
- [Sarah Sheffield](https://sarahlsheffield.wordpress.com), for the alt text example	
- [Silvia Canelón](https://silviacanelon.com), for the [Xaringan](https://github.com/yihui/xaringan) template
]

.pull-right[
Liz Hare PhD

]