Let's do this together!
Restart your R session Ctrl + Shift + F10
Open 05-accessible-design/05-start.Rmd
Run xaringan::infinite_moon_reader() to preview your slides
The power of the Web
is in its universality
Access by everyone regardless of disability
is an essential aspect
Tim Berners-Lee
W3C Director & inventor of
the World Wide Web
Great web accessibility starts in the design
How do we design
accessible presentations?
Make "accessible" your default mindset
Support images with text
Make sure hyperlinks are clear & unambiguous
Choose colors carefully
Guidelines from Making Scientific Content More Accessible
by Goring, Stack Whitney, Jacob, Bruna, and Poisot
Make "accessible"
your default mindset
We communicate effectively when we make our work open and accessible to a broad audience
Principles of inclusive design
- Recognize exclusion
- Solve for one, extend to many
- Learn from diversity
2.1 Make “accessible” your default mindset
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
that describes the visual (alternative text)
Alt-text allows the reader to understand an image without seeing it
Screen readers provide voice or braille access to computer text, including alt-text
Alt-text options for R Markdown:
Markdown
R Markdown code chunks
Raw HTML
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
In practice: Add alt-text with Markdown
We can add alt-text to an image inserted with the ![]() syntax
Insert it between the square brackets:
In practice: Add alt-text with RMarkdown 
We can add alt-text to an R Markdown code chunk output with the fig.alt="" option
```{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")```Resource: New in knitr: Improved accessibility with image alt text by RStudio
Add alt-text in slide 2
Add a text description to the lemur image slide on the slide titled "Ring-tailed Lemurs"
```{r, fig.alt=""}knitr::include_graphics("ring-tailed-lemur.jpg")```Is it a good idea to use the same alt-text for all images that are identical?
Not necessarily!
To write effective alt-text we need to consider the context
What, if any, important information is the image supposed to communicate?
Resources
Context is the most critical aspect of alt-text everyone seems to miss by Sheri Byrne-Haber
An alt Decision Tree WAI Web Accessibility Tutorials
Images Concepts Tutorial by WAI Web Accessibility Tutorials
Make sure hyperlinks are
clear & unambiguous
Embed hyperlinks in slides with xaringan
Links are most useful when they make sense out of context
Links should be clearly labeled
Avoid ambiguous links:
- Here
- Click here
- Info
- More
- Read more
- Link
2.9 Make sure hyperlinks are clear & unambiguous
Link Text and Appearance by Web Accessibility in Mind
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
The Duke Lemur Center provides more information [here](https://lemur.duke.edu/accordions/ring-tailed-lemurs-species-page/)Choose colors carefully
Avoid using color as the only way to indicate priority or importance
Check for color independence early and often by simulating a grayscale display
Check the colors in your palette for adequate color contrast
2.5 Choose colors carefully
Color and accessibility by U.S. Web Design System
Check your color palette for contrast
Use one of the following color contrast checkers
Contrast Checker by WebAIM (recommended)
A11Y Rocks Color Palette by Matt Long
Accessible color palette builder by Atul Varma
For an extensive gallery of color color combinations with adequate contrast, see the Tachyons documentation for Theme Skins
Let's check color independence and
color contrast together!
We are finished with the scene!
Make "accessible" your default mindset
Support images with text
Make sure hyperlinks are clear & unambiguous
Choose colors carefully