07: Accessibility with CSS & HTML

Open and preview this slide deck: 07-accessibility-css-html/07-start.Rmd

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

Replace the alt-text in slide 3

Slide 3 of the deck talks about how common black lemurs are sexually dichromatic and contains two images, one of a male lemur and another of a female lemur to show the differences.

Replace some alt-text that is not informative in that context with alt-text that better matches the information being conveyed.

In the slide titled “Common black lemurs are sexually dichromatic,” replace the following alt-text in the HTML code:

alt = "Common black lemur with a millipede in one hand
and flies hovering overhead"

With this alternative that better matches the information being conveyed:

alt = "Female common black lemur with brown-orange fur 
and white ear tufts"

Apply underlining to your link text

1. Navigate to the slide titled “Styling links”

2. Paste the following CSS rule into extra.css and save the file to update

   a {
     text-decoration: underline;
   }
   

Resource: To learn how to style your links with color with accessibility in mind, check out the resource by WebAIM about Link Text and Appearance

Apply an uppercase transformation

1. Navigate to the slide titled “Transforming text to uppercase”

2. Paste the following rule into extra.css and save the file to update

   .upper {
     text-transform: uppercase;
   }
   

3. Watch this markdown text to see the transformation take place

   Hello there, I'm transforming .upper[this text] 
   to uppercase