By Lara Skelly & Emma Hibbert

Disclaimer: This post is about R, R/Shiny and accessibility. If you don’t know what any of that is, please stop reading now and have a cup of your chosen beverage. It’s guaranteed to be more enjoyable than reading this

Using R to create dynamic websites is a fun way of making research more accessible. With the ability to fully customise the look and feel through cascading style sheets (css), it’s little wonder that the developers of this library opted for something quite bland as their out-of-the-box styles. Unfortunately, for the R-coders, it means that you have to remember to style for accessibility.

Below are three tips we’ve come up with to improve the accessibility of all the apps we make.

1. Explicitly code for h1 headings

The basic titlePanel is an h2 heading, so you have to alter this to an h1 heading. You can do this in your css, or directly in the code:

titlePanel( 

  tags$h1("Your App Title", class = "title") 

) 

2. Change the navigation bar colours 

The greys of the standard Shiny app navigation bar do not meet colour contrast standards. The bslib library allows developers to add the Bootswatch themes, some of which have a better colour contrast. You can also change this with a custom css: 

.navbar { 

    background-color: #222 !important;  

    color: white !important; 

    border-bottom: 3px solid #000;  

} 

 

.navbar-nav > li > a { 

    color: #f1f1f1 !important;  

} 

 

.navbar-nav > li.active > a, 

.navbar-nav > li.active > a:focus, 

.navbar-nav > li.active > a:hover { 

    background-color: #666 !important;  

    color: white !important; 

} 

 

.navbar-nav > li > a:hover { 

    background-color: #777 !important;  

    color: #fff !important;  

} 

 

.navbar .navbar-header .navbar-brand { 

    color: #ffffff !important;  

    font-weight: bold; 

}  color: #ffffff !important; 

  border-radius: 5px; 

} 

3. Include an Accessibility Statement 

If your app is going to be a standalone website, and not embedded somewhere, then it needs to have an accessibility statement. You could create one that you use across all your apps, linking to it in your app. That’s what we’ve chosen to do, putting this code at the end of the ui.R: 

  tags$div(class = "footer",  

           fluidRow( 

             column(12,  

                    tags$a(href = 'https://doi.org/10.17028/rd.lboro.28525481',  

                           "Accessibility Statement") 

             ) 

           ) 

  ) 

Tools to help you check the accessibility 

The Web Content Accessibility Guidelines (WCAG) evaluating web accessibility overview has a range of guidance and tutorial videos regarding checking your site or app for accessibility. They also provide a web of accessibility tools list with evaluation tools that are free to use.  

Government guidance provides a range of resources and blogs regarding accessibility and meeting the needs of various users. The dos and don’ts of designing for accessibility provides useful information regarding guidance and best practice.  

WAVE accessibility checker provides a suite of evaluation tools that support making web content more accessible to individuals with varied needs. Tools include easy-to-use browser extensions to assess accessibility in any web browser. 

Examples of Shiny apps from Loughborough University Library 

If you are curious about what kind of Shiny apps we’ve been working on, take a look at these: 

• Word Cloud My Repo: Create word clouds from a list of titles chosen in the Loughborough University Research Repository. 

• WEDC Illustrations and Graphics: A collection of illustrations and graphics produced by the Water Engineering and Development Centre (WEDC) 

• Future Flight Scenarios: Imagine a future where flying is different