05: Accessible Design

By Garrick Aden-Buie & Silvia Canelón

Topic

We will implement some accessibility practices important throughout the slide design process.

We will follow recommendations adapted from the Guidelines for Accessibility in the context of scientific communication, developed by Goring et al.

Simon Goring, Kaitlin Stack Whitney, Aerin Jacob, et al.  Making Scientific Content More Accessible. Authorea. October 19, 2017.

Activity

Time15 minutes
Materials05-accessible-design/05-start.Rmd
Activity ModeFollow along

Open and preview this slide deck: 05-accessible-design/05-start.Rmd

Restart your R session and run xaringan::infinite_moon_reader() to preview the slides rendered in HTML

Add alternative text (alt-text) to slide 2

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

Find the following code chunk in 05-start.Rmd

```{r, fig.alt=""}
knitr::include_graphics("ring-tailed-lemur.jpg")
```

How-to reminders:

  • Markdown: ![alt text goes here](image url goes here)

  • R Markdown code chunk:

    ```{r, fig.alt = "alt text goes here"}
    knitr::include_graphics("image url goes here")
    ```
    

Edit the link text to be more descriptive

Edit the slide titled “Ring-tailed Lemurs” to replace the link titled “here” with link text that makes sense out of context

Find the following markdown text in 05-start.Rmd

The Duke Lemur Center provides more information 
[here](https://lemur.duke.edu/accordions/ring-tailed-lemurs-species-page/)

Make sure the link text makes sense on its own

Ask yourself:

  • Are any of the links ambiguous? E.g. “More,” “Continue”

  • How could these links be rewritten to be descriptive?

Reading: Introduction to Links and Hypertext by WebAIM

Check your color palette for contrast

Check color contrast of the primary_color and secondary_color selected for your style guide against the color of the slide background (likely white, #FFFFFF)

Adjust the lightness of your colors if needed and try to aim for the higher (AAA) contrast ratio rather than the minimum.

Color contrast ratio guidelines:

  • WCAG level AAA (enhanced): At least 7:1 for normal text and 4.5:1 for large text

  • WCAG level AA (minimum): 4.5:1 for normal text and 3:1 for large text

Color contrast checking tools:

Example of color contrast checking with the WebAIM Contrast Checker

Below is an example of a xaringanthemer palette defined by two colors:

library(xaringanthemer)

style_duo_accent(
  primary_color = "#035AA6",
  secondary_color = "#03A696"
)

The primary color (hex code #035AA6) passes the AA color contrast guideline with a contrast ratio of 6.96:1 against a white background

A foreground color blue with hex code \#035AA6 has a contrast ratio of 6.96:1 against a white background. It passes AA guidelines

The secondary color (hex code #03A696) fails the AA color contrast guideline with a contrast ratio of 3.04:1 against a white background

A foreground color green with hex code \#03A696 has a contrast ratio of 3.04:1 against a white background. It fails AA guidelines

After adjusting the secondary color to a darker hue it passes the AA color contrast guideline with a contrast ratio of 4.71:1 against a white background

An adjusted foreground color of green with hex code \#038275 has a contrast ratio of 4.71:1 against a white background. It passes AA guidelines