DiAGRAM: An accessible R application for The National Archives

The Challenge

Having previously worked with The National Archives to create a prototype, web-based application in Shiny, allowing users to build and compare storage policies to help manage risk to digital collections, we were tasked with taking that application to a public-facing production build.

Being a public sector organisation, compliance with Web Content Accessibility Guidelines (WCAG) was a requirement for the final application. Specifically, WCAG 2.1 level AA. The prototype built with Shiny had a number of accessibility issues to contend with. These needed to be resolved and, in addition, there was a requirement to make a more user-friendly interface for the “Advanced” section of the application.

Initial scoping led to the decision to rebuild the application, replacing Shiny with a front-end built using standard web technologies and a serverless, scalable back-end hosted in AWS Lambda.

The Project

Over a few months we completely rebuilt the entire application. The R back-end was migrated to AWS Lambda, providing a scalable way to interact with the underlying Bayesian network model, build charts and reports, and validate user data via REST API.

The application’s underlying infrastructure was implemented with Terraform, providing a repeatable and declarative model of the solution architecture. Terraform workspaces were used to provision development, staging and production environments, with deployment and application life-cycle automated with GitHub Actions.

The front-end user interface for the application was reconstructed using HTML, CSS and JavaScript. This was a significant body of work that involved building out replacements for each of the widgets that we wanted to retain from the prototype shiny application and making them accessible. For example, every widget needed to be operable with a keyboard as well as by a mouse and touch input.

The “Advanced” section was also updated, with an interactive SVG displaying a graphical representation of the network. The user is now able to choose a node they want to edit by clicking on it, with a dropdown-menu providing a keyboard-and-screen-reader-friendly alternative. The subsequent model-editing process — following selection of a node — was also made more intuitive, based on feedback from usability tests of the original Shiny application.

Our Results

The WCAG 2.1 compliant application is now live and free-to-use at https://diagram.nationalarchives.gov.uk/. The short video clip below shows the new interface for the “Advanced” section in action.

All code associated with this project is publicly available on the National Archive GitHub pages (front-end code, back-end code, infrastructure as code).