Accessibility (of educational resources)

Motivation

(Lack of) accessibility considerations in cheatsheets

ggplot2 cheat sheet

(Parts of) the solution

  • Illumino (organization focused on helping companies make their content user-friendly and compliant) will convert 2 cheatsheets to an accessible format so we can learn from their approach
  • Illumino will also provide training (details to be determined/announced)

Other part of the solution

Self study

… and this is a summary of what I’ve learned so far, particularly from the Duke Language Central Accessibility Fundamentals Workshop.

Web Content Accessibility Guidelines (W.C.A.G.)

  • Part of a series of web accessibility guidelines
  • Overriding principles: Content should be

    • Perceivable

    • Operable

    • Understandable

    • Robust

Perceivable

  • Alt text
  • Text on images
  • Color contrast/blindness
  • Captioning

Alt text

  • Content depends on context, e.g., highlight features that matter in the graphic/picture depending on the focus of the text around it

alt= “Chart type of type of data where reason for including chart” Include a link to data source somewhere in the text

New tweet with an image and Chrome Extension alerting that alt text needs to be added

Text overlaid on image

  • Don’t add text overlaid on image
  • Sighted users can also have difficulty with this
  • Auto-translators can’t translate it

Barbara Kruger - Untitled (Your body is a battleground), 1989

  • If there’s text on image, make sure to add it to alt text, but make sure it’s not just accessible to those using screen readers but also those with low-vision as well (so repeat the text in the main body of the text next to the image)

Color scales

Use colorblind friendly scales (e.g., Okabe Ito, viridis).

Checking for color blind friendliness

With Sim Daltonism

Colors and shapes

Color shouldn’t be the only method to understand content, distinguishability should be based on multiple features

Color contrast

  • Background and foreground text should have sufficient contrast to be distinguishable by users with different vision

  • Web app for checking color contrast checking: Colour Contrast Analyser

  • An WIP R package for checking for color contrast: coloratio

library(coloratio) # matt-dray/coloratio
cr_get_ratio("black", "white")
[1] 21
cr_get_ratio("#FFFFFF", "#000000")
[1] 21
cr_get_ratio("black", "gray10")
[1] 1.206596

Color contrast

  • Recommended contrast ratio depends on text size – smaller the text, more contrast needed
  • For 17px text, ratio should be > 4.5
  • Cheatsheets note: Lots of text is VERY small, so we’ll need to make sure contrast is even higher

Use direct labeling on plots

  • Prefer direct labeling where color is used to display information over a legend

  • Quicker to read

  • Ensures graph can be understood without reliance on color

Separate elements with whitespace or pattern

Allows for distinguishing between data without entirely relying on contrast between colors

Operable

  • Headings
  • List items
  • Font sizes
  • Linked text
  • Tables

Headings

  • Super important to nest headings properly for those using a screen reader and for those who visually scan the page

  • R Markdown note: Make use of document outline, don’t just use bolded text to visually indicate heading, user ## tags instead

List items

  • Use real lists, not just dashes

Fonts

Font sizes

  • No official font size for passing WCAG standards
  • Studies have shown the optimum size for text is 16px with a line height of 1.5 for readability
    • R Markdown note: Make this default in R Markdown, or at least learnr? Quarto?
  • Larger text means larger target sizes for links – makes it easier for everyone to click (walking around on mobile device, tremors, etc.)
  • Keep plot labels and annotations similarly sized as the rest of your text (e.g., theme_set(theme_minimal(base_size = 16)))

Link text

  • Always underline link text

  • Bad: “More”, “Read more”, “Learn more”, “Click here”, “Click the red button on the left”

  • Adequate: “More news”, “Read full article”, “Learn more about cats”, “Click here to read more about cat”

  • To see examples of how bad/better link text behaves in screen reader: https://youtu.be/PAA82Gkhn0c?t=1712

Tables

  • Use header row functionality, not just bolding (but headers don’t exist in all formats, e.g. Google Docs, so use bolding when not possible)

  • Avoid merging cells, screen reader doesn’t read them properly

    • Possible solution: Split tables

Accessibility Checkers

  • MS Word has a built in accessibility checker
  • Google Docs doesn’t
  • R Markdown note: Some of these checks could be implemented in an R package for checking Rmds, bookdowns, etc.

Exporting for accessibility

  • Never do File > Print > Save as PDF – all accessibility efforts disappear
  • MS Word/PowerPoint: Save a copy > File Format: PDF
  • R Markdown note: What is the equivalent of this for xaringan, Quarto slides, etc.? ::: {.footer .footer-default}

:::