Accessibility with
CSS & HTML

Garrick Aden-Buie & Silvia Canelón

Let's do this together!

Restart your R session Ctrl + Shift + F10

Open 07-accessibility-css-html/07-start.Rmd

Run xaringan::infinite_moon_reader() to preview your slides

Adding alt-text with HTML

We can add alt-text to an <img> tag using raw HTML
by using the alt attribute

<img 
src="common-black-lemur.jpg" 
alt="Common black lemur with a millipede in one hand and flies hovering overhead"
/>

Resource: Alternative text basics by WebAIM

Fun fact

Common black lemurs will coax toxic millipedes to release toxins 🐛...

...and then will use these toxins as insect repellant
by rubbing the millipedes all over their fur!

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

Replace the alt-text in slide 3

In the slide titled "Common black lemurs are sexually dichromatic," replace:

07-start.Rmd

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

With this alternative that better matches the information being conveyed:

07-start.Rmd

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

Adding alt text to background images

What if we need to add alt-text to background images?

We can use the  tag and some special attributes like role and aria-label

<span role="img" aria-label="Male common black lemur with rich black fur covering their entire body, and black ear tufts"></span>

In practice:

07-start.Rmd

---
class: bottom
background-image: url(common-black-lemur-male.jpg)
background-size: cover
# Adding<br>alt-text to<br>background<br>images
<span role="img" aria-label="Male common black lemur with rich black fur covering their entire body, and black ear tufts"></span>
---

Adding
alt-text to
background
images

Styling links so that color
is not the only indicator

Links should be easy to identify among non-link content,
like with text underlining

We can use the text-decoration CSS property to
style the a (anchor) element.

a {
  text-decoration: underline;
}

Apply underlining to your link text

1. Navigate to the slide titled "Styling links"

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

extra.css

a {
  text-decoration: underline;
}

Transforming text to uppercase

We can style text with UPPERCASE for emphasis or aesthetics.

Typing capitalized letters individually can cause
screen readers to read each letter individually, like an acronym.

We can apply UPPERCASE styling using the
text-transform CSS property

.upper {
  text-transform: uppercase;
}

The .upper[] class produces Capitalized Words
that still read like case-sensitive text to a screen reader

.upper {
  text-transform: uppercase;
}

Behind the scenes:

<span class="upper">
Capitalized Words</span>

Apply an uppercase transformation

1. Navigate to the slide titled "Transforming text to uppercase"

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

extra.css

.upper {
  text-transform: uppercase;
}

In practice:

07-start.Rmd

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

Hello there, I'm transforming this text to uppercase

Tip: Apply uppercase text judiciously because it can reduce legibility

Using icons like with context in mind

fontawesome::fa("wikipedia-w", a11y="sem")

"sem" is short for "semantic"

A screen reader will read the icon title text, like "Wikipedia W"

fontawesome::fa("wikipedia-w", a11y="sem")

R code:

fontawesome::fa("wikipedia-w", a11y="sem")

Behind the scenes:

<svg 
aria-label="Wikipedia W" 
img="role" 
...more SVG properties...>
  <title>Wikipedia W</title>
</svg>

Using icons like with context in mind

fontawesome::fa("wikipedia-w", a11y="deco")

"deco" is short for "decorative" and the argument
a11y = "deco" is the default

A screen reader will skip over a decorative icon

fontawesome::fa("wikipedia-w", a11y="deco")

Tip: A decorative icon (or image) is appropriate only when it is not the only element conveying necessary information

R code:

fontawesome::fa("wikipedia-w", a11y="deco")

Behind the scenes:

<svg 
aria-hidden="true" 
img="role"
...more SVG properties...>
</svg>

Using icons like with context in mind

Raw HTML ``

A screen reader will skip an icon with the basic HTML readily available on the FontAwesome website

<i class="fab fa-wikipedia-w"></i>

We could add accessibility attributes like role and
aria-label to make icon to be accessible on its own

We are finished with this scene!

materials/act-03/07-accessibility-css-html

Leverage CSS and HTML to help make
slide customizations more accessible

Help

Keyboard shortcuts

↑, ←, Pg Up, k

Go to previous slide

↓, →, Pg Dn, Space, j

Go to next slide

Home

Go to first slide

End

Go to last slide

Number + Return

Go to specific slide

b / m / f

Toggle blackout / mirrored / fullscreen mode

Clone slideshow

Toggle presenter mode

Restart the presentation timer

?, h

Toggle this help

Tile View: Overview of Slides

Accessibility with
CSS & HTML

Garrick Aden-Buie & Silvia Canelón

Professional, Polished, Presentable

Let's do this together!

Restart your R session Ctrl + Shift + F10

Open 07-accessibility-css-html/07-start.Rmd

Run xaringan::infinite_moon_reader() to preview your slides

Adding alt-text with HTML

We can add alt-text to an <img> tag using raw HTML
by using the alt attribute

<img 
src="common-black-lemur.jpg" 
alt="Common black lemur with a millipede in one hand and flies hovering overhead"
/>

Resource: Alternative text basics by WebAIM

Fun fact

Common black lemurs will coax toxic millipedes to release toxins 🐛...

...and then will use these toxins as insect repellant
by rubbing the millipedes all over their fur!

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

Replace the alt-text in slide 3

In the slide titled "Common black lemurs are sexually dichromatic," replace:

07-start.Rmd

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

With this alternative that better matches the information being conveyed:

07-start.Rmd

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

Adding alt text to background images

What if we need to add alt-text to background images?

We can use the  tag and some special attributes like role and aria-label

<span role="img" aria-label="Male common black lemur with rich black fur covering their entire body, and black ear tufts"></span>

In practice:

07-start.Rmd

---
class: bottom
background-image: url(common-black-lemur-male.jpg)
background-size: cover
# Adding<br>alt-text to<br>background<br>images
<span role="img" aria-label="Male common black lemur with rich black fur covering their entire body, and black ear tufts"></span>
---

Adding
alt-text to
background
images

Styling links so that color
is not the only indicator

Links should be easy to identify among non-link content,
like with text underlining

We can use the text-decoration CSS property to
style the a (anchor) element.

a {
  text-decoration: underline;
}

Apply underlining to your link text

1. Navigate to the slide titled "Styling links"

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

extra.css

a {
  text-decoration: underline;
}

Transforming text to uppercase

We can style text with UPPERCASE for emphasis or aesthetics.

Typing capitalized letters individually can cause
screen readers to read each letter individually, like an acronym.

We can apply UPPERCASE styling using the
text-transform CSS property

.upper {
  text-transform: uppercase;
}

The .upper[] class produces Capitalized Words
that still read like case-sensitive text to a screen reader

.upper {
  text-transform: uppercase;
}

Behind the scenes:

<span class="upper">
Capitalized Words</span>

Apply an uppercase transformation

1. Navigate to the slide titled "Transforming text to uppercase"

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

extra.css

.upper {
  text-transform: uppercase;
}

In practice:

07-start.Rmd

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

Hello there, I'm transforming this text to uppercase

Tip: Apply uppercase text judiciously because it can reduce legibility

Using icons like with context in mind

fontawesome::fa("wikipedia-w", a11y="sem")

"sem" is short for "semantic"

A screen reader will read the icon title text, like "Wikipedia W"

fontawesome::fa("wikipedia-w", a11y="sem")

R code:

fontawesome::fa("wikipedia-w", a11y="sem")

Behind the scenes:

<svg 
aria-label="Wikipedia W" 
img="role" 
...more SVG properties...>
  <title>Wikipedia W</title>
</svg>

Using icons like with context in mind

fontawesome::fa("wikipedia-w", a11y="deco")

"deco" is short for "decorative" and the argument
a11y = "deco" is the default

A screen reader will skip over a decorative icon

fontawesome::fa("wikipedia-w", a11y="deco")

Tip: A decorative icon (or image) is appropriate only when it is not the only element conveying necessary information

R code:

fontawesome::fa("wikipedia-w", a11y="deco")

Behind the scenes:

<svg 
aria-hidden="true" 
img="role"
...more SVG properties...>
</svg>

Using icons like with context in mind

Raw HTML ``

A screen reader will skip an icon with the basic HTML readily available on the FontAwesome website

<i class="fab fa-wikipedia-w"></i>

We could add accessibility attributes like role and
aria-label to make icon to be accessible on its own

We are finished with this scene!

materials/act-03/07-accessibility-css-html

Leverage CSS and HTML to help make
slide customizations more accessible

Accessibility withCSS & HTML

Let's do this together!

Adding alt-text with HTML

Fun fact

Replace the alt-text in slide 3

Adding alt text to background images

What if we need to add alt-text to background images?

In practice:

Addingalt-text tobackgroundimages

Styling links so that coloris not the only indicator

Apply underlining to your link text

Transforming text to uppercase

Apply an uppercase transformation

In practice:

Using icons like Wikipedia W with context in mind

Using icons like Wikipedia W with context in mind

Using icons like Wikipedia W with context in mind

Raw HTML <i class="fab fa-wikipedia-w"></i>

We are finished with this scene!

materials/act-03/07-accessibility-css-html

Let's do this together!

Help

Accessibility with CSS & HTML

Accessibility withCSS & HTML

Let's do this together!

Adding alt-text with HTML

Fun fact

Replace the alt-text in slide 3

Adding alt text to background images

What if we need to add alt-text to background images?

In practice:

Addingalt-text tobackgroundimages

Styling links so that coloris not the only indicator

Apply underlining to your link text

Transforming text to uppercase

Apply an uppercase transformation

In practice:

Using icons like Wikipedia W with context in mind

Using icons like Wikipedia W with context in mind

Using icons like Wikipedia W with context in mind

Raw HTML <i class="fab fa-wikipedia-w"></i>

We are finished with this scene!

materials/act-03/07-accessibility-css-html

Accessibility with
CSS & HTML

Adding
alt-text to
background
images

Styling links so that color
is not the only indicator

Using icons like with context in mind

Using icons like with context in mind

Using icons like with context in mind

Raw HTML `<i class="fab fa-wikipedia-w"></i>`

Accessibility with
CSS & HTML

Adding
alt-text to
background
images

Styling links so that color
is not the only indicator

Using icons like with context in mind

Using icons like with context in mind

Using icons like with context in mind

Raw HTML `<i class="fab fa-wikipedia-w"></i>`