diff --git a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js
index 74cbf47547..63d68f4aa1 100644
--- a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js
+++ b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/barchart-enhancement.js
@@ -10,11 +10,20 @@ window.GOVUK = window.GOVUK || {};
   }
 
   BarchartEnhancement.prototype.init = function () {
-    // the not selectors are protection against initialising twice since that
+    // this is protection against initialising twice since that
     // causes quite a mess. The not .mc-chart is because it creates a second
     // .js-barchart-table element with .mc-chart and then the
     // .js-barchart-table-init is given when we initialise
-    var $barcharts = this.$element.querySelectorAll('.js-barchart-table:not(.mc-chart):not(.js-barchart-table-init)')
+    // we'd use :not selectors but for IE8, previously worked before jquery removal
+    var $barchartsOriginal = this.$element.querySelectorAll('.js-barchart-table')
+    var $barcharts = []
+
+    for (var j = 0; j < $barchartsOriginal.length; j++) {
+      var styles = $barchartsOriginal[j].className
+      if (styles.indexOf('mc-chart') === -1 && styles.indexOf('js-barchart-table-init') === -1) {
+        $barcharts.push($barchartsOriginal[j])
+      }
+    }
 
     for (var i = 0; i < $barcharts.length; i++) {
       var $table = $barcharts[i]
diff --git a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
index 493ac07e93..c11203e2bf 100644
--- a/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
+++ b/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js
@@ -1,5 +1,4 @@
-// Based on magna-charta: https://github.com/alphagov/magna-charta
-
+// non-jquery version of magna-charta: https://github.com/alphagov/magna-charta
 window.GOVUK = window.GOVUK || {}
 window.GOVUK.Modules = window.GOVUK.Modules || {};
 
@@ -29,7 +28,11 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
 
     // lets make what will become the new graph
     this.$graph = document.createElement('div')
-    this.$graph.setAttribute('aria-hidden', 'true') // FIXME this never gets updated
+
+    // set the graph to aria-hidden, which isn't changed at any point
+    // the graph is totally inaccessible, so we let screen readers navigate the table
+    // and ignore the graph entirely
+    this.$graph.setAttribute('aria-hidden', 'true')
 
     // copy over classes from the table, and add the extra one
     this.$graph.setAttribute('class', this.$table.className)
@@ -257,7 +260,13 @@ window.GOVUK.Modules = window.GOVUK.Modules || {};
       var $this = trs[i]
 
       // the first td is going to be the key, so ignore it
-      var $bodyCells = $this.querySelectorAll('.mc-td:not(:first-child)')
+      // we'd use $this.querySelectorAll('.mc-td:not(:first-child)') but for IE8
+      var $bodyCellsOriginal = $this.querySelectorAll('.mc-td')
+      var $bodyCells = []
+      for (var k = 1; k < $bodyCellsOriginal.length; k++) {
+        $bodyCells.push($bodyCellsOriginal[k])
+      }
+
       var bodyCellsLength = $bodyCells.length
 
       // might be the row containing th elements, so we need to check