Considering Visual Challenges and Impairments

Accessibility and inclusion in Bayes Rules! book: Part III.

Bayes Rules! book
Bayesian education

July 24, 2020

Edit: most of this post’s content is now provided as a preprint: Framework for Accessible and Inclusive Teaching Materials for Statistics and Data Science Courses

This post is the third post on a three post series on an undergraduate Bayesian statistics book that I am writing with Alicia A. Johnson and Miles Ott called Bayes Rules! An Introduction to Bayesian Modeling with R. You may want to read the previous two posts to get a better understanding of the flow.

  1. Why Open Access Books?
  2. Who is in the Bayes Rules! Book?
  3. Considering Visual Challenges and Impairments

As we continue to work on our book and learn more we try to incorporate new ways to make the book accessible. In this post I mainly talk about making the book accessible to people with visual challenges and impairments. We are not experts on accessibility and we are learning new things. Here, I am reporting what I have already learned so far.


We have not finalized our choices on fonts but over the summer I have learned a couple of things. I am not too much of a fan of extremely decorative fonts to begin with. For instance fonts with cursive writing are often not accessible even to those without visual impairment. I often rely on Google Fonts when I develop material for the map but it has come to my attention that these fonts are not available in China as Google API is not accessible from China. We will keep our fonts simple to the fonts that are already available on different operating systems.

Color Blind Audience

I think one thing we knew starting off writing the book, the color palette we picked may not be appropriate for all readers. We have considered readers of our book who could be color-blind. I would have like to say that we learned a lot and picked our new color palette and show you pretty visuals here, however, what I have done so far is read on color-blindness, find suggestions on color-palettes. This is a to-do rather than done.

Screen readers

I am ashamed to admit this but I had not used screen readers until this summer. If you are reading this blog and have not used one yourself please consider downloading one. I work on a Windows machine and used NVDA but there are many other screen readers that are freely available on common operating systems. I am not ever uninstalling my screen reader and plan on using it as needed.

Writing Good Alternate Text

I first used the screen reader on my personal website Just like my blog, my website also has a minimal design. Since there is not much else other than text most of it was screen readable.

On my home page, I have a photo of myself. I always knew that I should write better alternate text for images but did not really work on it. Before this summer my image had an alternate text Dogucu headshot. I spent sometime reading on how to write good alternate text. I then changed the alternate text of my photo to A headshot of a woman with curly, short, ear-length hair with green eyes and red lipstick.

Font Awesome icons are not screen readable by default

Using a screen reader made me realize that there is Font Awesome icons are not readable by screen readers. The footer of my website has four icons, as shown in the figure below, an envelope, GitHub, Twitter, and LinkedIn logos all next to each other. On my website, this icons link to sending me an email and GitHub, Twitter, and LinkedIn profiles. This is also the only place where I share my email address on my website. If I had not used a screen reader to notice this those relying on screen readers would never have my email address.

The Font Awesome icon problem was easy to fix. For LinkedIn profile icon for instance, I had the code <i class="fab fa-linkedin fa-2x"></i> which then I changed to <i class="fab fa-linkedin fa-2x" aria-hidden="true" title="Link to LinkedIn profile"></i>. As shown in the figure below, this basically adds the text Link to LinkedIn profile to image that is only visible when the mouse is hovered on the image and is also readable by screen readers.

There is no fig.alt chunk option in R Markdown

One thing I also realized this summer is that there is no fig.alt option in R Markdown.

Here is an example on how to add figure caption.

```{r mtcars, fig.cap = "Relationship 
between horse power and 
miles per gallon of cars"}
plot(mpg ~ hp, mtcars)

In addition to plotting a scatter plot with mpg and hp from the mtcars dataset, this code adds a figure caption below the plot as shown below. This caption is especially useful for cross referencing in text and is required in publications. When screen readers read this image, they read “Relationship between horse power and miles per gallon of cars”. However, visually impaired people would need more description of the image, something like “The scatter plot has hp on the x axis and mpg on the y axis. The points show a negative trend but the plot does not include a line of best fit.”

Relationship between horse power and miles per gallon of cars

Since R Markdown does not differentiate between figure caption and figure alternate text and we are writing the book in R Markdown, I could not do much about this problem. However, one can dream, right? Would it not be cool to have the following chunk option?

```{r mtcars, fig.cap = "Relationship between horse power and
miles per gallon of cars", 
fig.alt = "The scatter plot has hp on the x axis and mpg 
on the y axis. 
The points show a negative trend 
but the plot does not include a line of best fit."}
plot(mpg ~ hp, mtcars)

I filed an issue for a feature request on GitHub. We will wait and see how that goes.

If you have liked my blog post please consider donating to NV Access the organization behind the screen reader that I mentioned in this post.

No matching items