Accessible charts

When rendering to HTML, Rmarkdown will render plots as img tags, including when the output device is set to svg or svglite. Unfortunately this is problematic for the accessibility of your plot, as while the plot will be scaleable to fit the window dimensions it will still be rendered by the browser as an image meaning that any text within the image is not selectable by the user (or readable by a screen-reader). You can set the knitr option fig.cap to provide a caption for your plot which will be inserted as the alt text for the image and be inserted as a caption under the image (though not using the modern convention of nested figure and figcaption tags).

Introducing render_svg()

To solve this problem the {govukhugo} package includes a render_svg() function that will take a ggplot2::ggplot() object and render it as in-line SVG.

1
2
3


govukhugo::render_svg(plot, width, height, units = "px",
                      alt_title = NULL, alt_desc = NULL, caption = NULL,
                      dpi = 96)

render_svg() requires you supply it with a plot object (from {ggplot2}), and the width and height of the plot (in pixels by default). You can supply other measurements (mm, cm and in), if you do so you should change the dpi argument from 96 to 300.

There are three optional arguments to provide alt text and captions.

The alt_title argument is used to produce a tool-tip (similar to how the alt argument for images works), alt_desc allows you to embed a more detailed description in the SVG plot that screen readers can access.

The caption argument inserts a text caption after the plot. The caption can be different from the content of alt_title and alt_desc, however you can also set caption = "alt_text" or caption = "alt_desc" so that the caption takes the value of that argument.

Examples

A plot without any alt text or caption (not advised).

1
2
3
4
5
6
7


penguins <- palmerpenguins::penguins

p <- ggplot2::ggplot(penguins, 
                     ggplot2::aes(x = bill_length_mm, y = bill_depth_mm)) +
  ggplot2::geom_point()

govukhugo::render_svg(plot = p, width = 600, height = 400)

A plot with an alt_title, hover over the plot to see the tool-tip.

1
2
3
4
5
6
7
8


penguins <- palmerpenguins::penguins

p <- ggplot2::ggplot(penguins, 
                     ggplot2::aes(x = bill_length_mm, y = bill_depth_mm)) +
  ggplot2::geom_point()

govukhugo::render_svg(plot = p, width = 600, height = 400, 
                      alt_title = "Penguin bill measurements plot")

A plot with an alt_title, and a custom caption.

1
2
3
4
5
6
7
8
9


penguins <- palmerpenguins::penguins

p <- ggplot2::ggplot(penguins, 
                     ggplot2::aes(x = bill_length_mm, y = bill_depth_mm)) +
  ggplot2::geom_point()

govukhugo::render_svg(plot = p, width = 600, height = 400,
                      alt_title = "Penguin bill measurements plot",
                      caption = "A scatterplot of penguin bill measurements")

A scatterplot of penguin bill measurements

A plot with an alt_title and alt_desc, using alt_desc for the caption.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


penguins <- palmerpenguins::penguins

p <- ggplot2::ggplot(penguins, 
                     ggplot2::aes(x = bill_length_mm, y = bill_depth_mm)) +
  ggplot2::geom_point()

govukhugo::render_svg(plot = p, width = 600, height = 400,
                      alt_title = "Penguin bill measurements plot",
                      alt_desc = "A scatterplot of penguin bill length versus depth",
                      caption = "alt_desc")

A scatterplot of penguin bill length versus depth