rmarkdown icon indicating copy to clipboard operation
rmarkdown copied to clipboard

[FR] Styling contrast issues

Open r-leyshon opened this issue 2 years ago • 3 comments

Many of the various styling options result in accessibility errors of varying kinds. The approach that passed the audit for us was to enforce the use theme: default and highlight: null. The two main kinds of error that were found on testing the options available. When testing theme options, the standard that UK government digital service requires is AA:

1.4.3 Contrast (Minimum) Text and images of text have a contrast ratio of at least 4.5:1. Large text - at least 18 point (typically 24px) or 14 point (typically 18.66px) and bold - has a contrast ratio of at least 3:1.

r-leyshon avatar Jun 10 '22 10:06 r-leyshon

highlight: null

This will completely deactivate the highlighting feature.

To keep it active but have different result, we have work on the highlight theme that should respect accessibility requirement - it is called the arrow theme. https://pkgs.rstudio.com/rmarkdown/reference/html_document.html#highlighting-1 Can you try with this to use it ?

output:
    html_document: 
        highlight: arrow

It is by default only in distill_article() for now, as it requires Pandoc highlighter, and html_document() always default to highlight.js and we have not converted arrow for highlight.js (which could probably be done)

theme: default

Bootstrap is used for the themes. By default it is still bootstrap 3. You can try bootstrap 4 or 5 with the bslib package changing YAML to

output:
  html_document:
    theme: 
      version: 4

I think bslib has included some specific options / patch for better accessibility.

Regarding themes, cerulean and simplex are bootswatch themes (https://bootswatch.com/). Maybe the issue you found have been fixed with newer Bootstrap

output:
  html_document:
    theme: 
      version: 4
      bootswatch : cerulean

See https://rstudio.github.io/bslib/articles/bslib.html for more on bslib and theme customization.

We could definitely improve the default provided with html_document() by default to bslib and twealing some of the rules.

cderv avatar Jun 10 '22 11:06 cderv

@cderv either I had missed arrow highlight or it is new since we did the accessibility audit nearly a year ago now. Great, I'll check this and based on that will update the default parameters used. I'll also give bslib a spin to see if this resolves the issues there.

More than happy to do some testing my end if you tweak the default themes.

r-leyshon avatar Jun 10 '22 12:06 r-leyshon

It is quite recent from march this year in version 2.12, and we kept improving. https://rmarkdown.rstudio.com/docs/news/index.html#rmarkdown-212

We are working quite hard on accessibility compatibility for the Quarto Project (https://quarto.org/) and this theme is also updated from there where it is used by default (https://quarto.org/docs/output-formats/ms-word.html#syntax-highlighting) We're not at all done there regarding the topic (https://github.com/quarto-dev/quarto-cli/issues?q=is%3Aopen+label%3Aaccessibility+sort%3Aupdated-desc) and we'll work on that there soon. @batpigandme runs point on this topic.

Any update we could make in R Markdown format will be beneficial so yes I am happy to consider changing the default, or even creating a new format with better standard (html5_document() for example)

I'll also give bslib a spin to see if this resolves the issues there.

We rely heavily on bootstrap so hopefully they're good on it. But I don't really know. I can ask around if that can help;

cderv avatar Jun 10 '22 14:06 cderv