Create accessibility vignette

Including advice fixing the colour contrast issue caused by using the danger colour on a light navbar background (and apply that advice to pkgdown itself)

Fixes #2344. Fixes #2283.

pkgdown/_pkgdown.yml

@@ -21,6 +21,7 @@ template:
     primary: "#0054AD"
     border-radius: 0.5rem
     btn-border-radius: 0.25rem
+    danger: "#A6081A"
   includes:
     in_header:
       <script defer data-domain="pkgdown.r-lib.org,all.tidyverse.org" src="https://plausible.io/js/plausible.js"></script>
@@ -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"

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 <https://wave.webaim.org>.
+
+* 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)
+```
+````

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).