# DiAGRAM: An accessible R application for The National Archives

## Client
### The National Archives

## Sector
### Public Sector

### The Challenge

Having [previously worked with The National Archives](/content/case-studies/shiny-react-github-national-archives/index.html) 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](https://www.w3.org/WAI/standards-guidelines/wcag/)) was a requirement for the final application. Specifically, [WCAG 2.1](https://www.w3.org/TR/WCAG21/) 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](https://aws.amazon.com/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](https://developer.hashicorp.com/terraform/intro), 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/](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](https://github.com/nationalarchives/) pages ([front-end code](https://github.com/nationalarchives/DiAGRAM/tree/live/app), [back-end code](https://github.com/nationalarchives/DiAGRAM/tree/live/api), [infrastructure as code](https://github.com/nationalarchives/DiAGRAM-terraform/)).