Add a11y.css

resources/assets/es6/a11y.js

@@ -0,0 +1,45 @@
+//a11y.css.js
+
+let checkbox = document.querySelector('input[name="a11y.css"]');
+
+checkbox.addEventListener('change', function () {
+    if (this.checked) {
+        addA11yCss();
+    } else {
+        removeA11yCss();
+    }
+});
+
+function addA11yCss() {
+    let exists = a11yCssExists();
+    if (exists == false) {
+        //add a11y.css link
+        let link = document.createElement('link');
+        link.setAttribute('rel', 'stylesheet');
+        link.setAttribute('href', '/assets/frontend/a11y.css/a11y-en.css');
+        let head = document.querySelector('head');
+        head.appendChild(link);
+    }
+}
+
+function removeA11yCss() {
+    let exists = a11yCssExists();
+    if (exists == true) {
+        //remove a11y.css link
+        let link = document.querySelector('link[href="/assets/frontend/a11y.css/a11y-en.css"]');
+        let head = document.querySelector('head');
+        head.removeChild(link);
+    }
+}
+
+function a11yCssExists() {
+    let css = document.querySelectorAll('link[rel=stylesheet]');
+    let exists = false;
+    for (let link of css) {
+        if (link.attributes.href.nodeValue == '/assets/frontend/a11y.css/a11y-en.css') {
+            exists = true;
+        }
+    }
+
+    return exists;
+}

resources/views/master.blade.php

@@ -56,10 +56,12 @@
             </form>
             @include('templates.colour-scheme')
             <p>The code for <code>{{ config('app.longurl') }}</code> can be found on <a href="https://github.com/jonnybarnes/jonnybarnes.uk">GitHub</a>.</p>
+            <p><label for="a11y.css"><code>a11y.css</code></label>: <input type="checkbox" name="a11y.css" id="a11y.css"></p>
             <p>Built with love: <a href="/colophon">Colophon</a></p>
             <p><a href="https://indieweb.org"><img src="/assets/img/iwc.png" alt="Indie Web Camp logo" class="iwc-logo"></a></p>
         </footer>
         <script src="/assets/js/colours.js" async defer></script>
+        <script src="/assets/js/a11y.js" async defer></script>
         @if (config('app.piwik') === true)
         <!-- Piwik -->
         <script src="https://analytics.jmb.lv/piwik.js" async defer></script>