{"id":603,"date":"2025-03-31T09:37:22","date_gmt":"2025-03-31T08:37:22","guid":{"rendered":"https:\/\/blog.lboro.ac.uk\/rdm\/?p=603"},"modified":"2025-03-27T09:41:00","modified_gmt":"2025-03-27T08:41:00","slug":"three-tips-on-making-shiny-apps-more-accessible","status":"publish","type":"post","link":"https:\/\/blog.lboro.ac.uk\/rdm\/2025\/03\/three-tips-on-making-shiny-apps-more-accessible\/","title":{"rendered":"Three tips on making Shiny apps more accessible\u00a0"},"content":{"rendered":"\n

By Lara Skelly & Emma Hibbert<\/strong><\/p>\n\n\n\n

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 \ud83d\ude42<\/em><\/p>\n\n\n\n

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\u2019s 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.<\/p>\n\n\n\n

Below are three tips we\u2019ve come up with to improve the accessibility of all the apps we make.<\/p>\n\n\n\n

1. Explicitly code for h1 headings<\/strong><\/h2>\n\n\n\n

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:<\/p>\n\n\n\n

titlePanel( \n\n  tags$h1(\"Your App Title\", class = \"title\") \n\n) <\/code><\/pre>\n\n\n\n
2. Change the navigation bar colours <\/strong><\/h2>\n\n\n\n
The greys of the standard Shiny app navigation bar do not meet colour contrast standards. The bslib library<\/a> allows developers to add the Bootswatch<\/a> themes, some of which have a better colour contrast. You can also change this with a custom css: <\/p>\n\n\n\n
.navbar { \n\n    background-color: #222 !important;  \n\n    color: white !important; \n\n    border-bottom: 3px solid #000;  \n\n} \n\n \n\n.navbar-nav > li > a { \n\n    color: #f1f1f1 !important;  \n\n} \n\n \n\n.navbar-nav > li.active > a, \n\n.navbar-nav > li.active > a:focus, \n\n.navbar-nav > li.active > a:hover { \n\n    background-color: #666 !important;  \n\n    color: white !important; \n\n} \n\n \n\n.navbar-nav > li > a:hover { \n\n    background-color: #777 !important;  \n\n    color: #fff !important;  \n\n} \n\n \n\n.navbar .navbar-header .navbar-brand { \n\n    color: #ffffff !important;  \n\n    font-weight: bold; \n\n}  color: #ffffff !important; \n\n  border-radius: 5px; \n\n} <\/code><\/pre>\n\n\n\n
3. Include an Accessibility Statement <\/strong><\/h2>\n\n\n\n
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\u2019s what we\u2019ve chosen to do, putting this code at the end of the ui.R: <\/p>\n\n\n\n
  tags$div(class = \"footer\",  \n\n           fluidRow( \n\n             column(12,  \n\n                    tags$a(href = 'https:\/\/doi.org\/10.17028\/rd.lboro.28525481',  \n\n                           \"Accessibility Statement\") \n\n             ) \n\n           ) \n\n  ) <\/code><\/pre>\n\n\n\n
Tools to help you check the accessibility<\/strong> <\/h2>\n\n\n\n
The Web Content Accessibility Guidelines (WCAG) evaluating web accessibility overview<\/a> 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<\/a> with evaluation tools that are free to use.  <\/p>\n\n\n\n
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<\/a> provides useful information regarding guidance and best practice.  <\/p>\n\n\n\n
WAVE accessibility checker<\/a>\u00a0provides 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.\u00a0<\/p>\n\n\n\n
Examples of Shiny apps from Loughborough University Library<\/strong> <\/h2>\n\n\n\n
If you are curious about what kind of Shiny apps we\u2019ve been working on, take a look at these: <\/p>\n\n\n\n