05: Accessible Design

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:

• Recommended: Contrast Checker by WebAIM. We like this tool because the site itself is designed to be accessible and the tool gives you the ability to adjust the color lightness.

• A11y Rocks! Color Palette Tool by Matt Long. This tool helps you check the color contrast of multiple colors at once and displays the color contrast ratio for each combination.

• Accessible color palette builder by Atul Varma. This tool also helps you check multiple color contrasts at once and its minimalist design emphasizes only the combinations that meet color contrast guidelines.

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

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

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