Skip Links

I took Jon Kuperman’s amazing accessibility intro course on Frontend Masters and one of the coolest things he demonstrated was how to create a skip link. Skip links allow a keyboard only user to tab directly to the content of a page, rather than first tab through the page’s entire menu. In this post, I wanted to share what I learned as it applies to Shiny!

I like to demonstrate where we’re going before I break it down. In the navbar below you see a link with the text “Skip to Main Content”. Clicking this link directs us to the button with the text “Tab Skip to Here!” [visible by the focus ring around the button]. In this post we’re going to create and style the skip link!



Skip to Main Content



Styling

Now let’s style the link as hidden when it’s not being tabbed/focused. We will do this by positioning the link out of frame using a transform.

We’ll also use the css pseudo class focus so that when the link is tabbed over it is put back in frame and made obvious to the user:

#skiplink {
  position: absolute;
  transform: translateY(-100%);
}

#skiplink:focus {
  transform: translateY(0%);
  background-color: lightyellow;
  padding: 20px;
  z-index: 9999;
}

Putting it all together

Now we have a link before our navbar, followed by the content of our page and the css needed to style our link:

shinyApp(
  ui = basicPage(
    tags$a(id="skiplink", "Skip to Main Content", href="#first-button"),
    shiny::navbarPage("App Title",
                      shiny::tabPanel("Plot"),
                      shiny::tabPanel("Summary"),
                      shiny::tabPanel("Table")
    ),
    tags$button(id="first-button", "Tab Skip to Here!"),
    tags$style(HTML("
      #skiplink {
        position: absolute;
        transform: translateY(-100%);
      }
      #skiplink:focus {
      transform: translateY(0%);
      background-color: lightyellow;
      padding: 20px;
      z-index: 9999;
      }"))
  ),
  server = function(input, output) {
  }
)


By clicking tab to go forwards (or shift tab to go backwards), you should now be able to only see the skip link when it’s being focused on:


There are SO many gems in Jon’s course, and it is genuinely fun to start to think about how to integrate these changes and make your website as accessible as possible. Shiny uses bootstrap, a design system that has put a lot of time and thought into accessibility so we get a lot for free, but I hope to continue this series with some other tips if you’re building any custom components.

Avatar
Maya Gans
Data Visualization Engineer

Maya’s work as a Master’s student was focused in quantitative biology. She loves coding and is extremely passionate about data science and data visualization.

Related