diff --git a/pkgdown/_pkgdown.yml b/pkgdown/_pkgdown.yml index 1cecac508..a2624420b 100644 --- a/pkgdown/_pkgdown.yml +++ b/pkgdown/_pkgdown.yml @@ -21,6 +21,7 @@ template: primary: "#0054AD" border-radius: 0.5rem btn-border-radius: 0.25rem + danger: "#A6081A" includes: in_header: @@ -81,6 +82,15 @@ reference: contents: - starts_with("test", internal = TRUE) +navbar: + structure: + right: [twitter, github] + components: + twitter: + icon: fa-twitter + href: http://twitter.com/hadleywickham + aria-label: Twitter + news: releases: - text: "Version 2.0.0" diff --git a/vignettes/accessibility.Rmd b/vignettes/accessibility.Rmd new file mode 100644 index 000000000..93accae9c --- /dev/null +++ b/vignettes/accessibility.Rmd @@ -0,0 +1,50 @@ +--- +title: "Accessibility" +output: rmarkdown::html_vignette +vignette: > + %\VignetteIndexEntry{accessibility} + %\VignetteEngine{knitr::rmarkdown} + %\VignetteEncoding{UTF-8} +--- + +```{r, include = FALSE} +knitr::opts_chunk$set( + collapse = TRUE, + comment = "#>" +) +``` + +pkgdown automates as many accessibility details as possible, so that your package website is readible by as many people as possible. This vignette describes the additional details that can't be automated away and you need to be aware of. + +```{r setup} +library(pkgdown) +``` + +## Theming + +* If you adjust any colours from the default theme (including the syntax highlighting theme), you should double check that the contrast between the background and foreground doesn't make any text difficult to read. A good place to start is running a representative page of your site through . + +* The default colour of the development version label makes a slightly too low contrast against the pale grey background of the navbar. This colour comes from the bootstrap "danger" colour, so you can fix it by overriding that variable in your `_pkgdown.yml`: + + ```yaml + template: + bootstrap: 5 + bslib: + danger: "#A6081A" + ``` + +* If you use custom navbar entries that only display an icon, make sure to also use the `aria-label` field to provide an accessible label that describes the icon. + +## Images + +To make your site fully accessible, the place where you are likely to need to do the most work is adding alt text to any images that you create. Unfortunately, there's currently no way to do this for plots you generate in examples, but you can and should add alt text to plots in vignettes using the `fig.alt` chunk option: + +````{verbatim} +```{r} +#| fig.alt: > +#| Histogram of time between eruptions for Old Faithful. +#| It is a bimodal distribution with peaks at 50-55 and +#| 80-90 minutes. +hist(faithful$waiting) +``` +```` \ No newline at end of file diff --git a/vignettes/customise.Rmd b/vignettes/customise.Rmd index 0286bc923..1c28d1194 100644 --- a/vignettes/customise.Rmd +++ b/vignettes/customise.Rmd @@ -93,7 +93,7 @@ template: You can customise other components by setting more specific bslib variables, taking advantage of inheritance where possible. For example, `table-border-color` defaults to `border-color` which defaults to `gray-300`. If you want to change the colour of all borders, you can set `border-color`; if you just want to change the colour of table borders, you can set `table-border-color`. -You can find a full list of variables in `vignette("bs5-variables", package = "bslib")`. +You can find a full list of variables in the [bslib docs](https://rstudio.github.io/bslib/articles/bs5-variables/index.html). Theming with bslib is powered by `bslib::bs_theme()` and the `bslib` field is a direct translation of the arguments to that function. As a result, you can fully specify a bslib theme using the `template.bslib` field, making it easy to share YAML with the `output.html_document.theme` field [of an R Markdown document](https://rstudio.github.io/bslib/articles/theming/index.html).