1. Overview

Overview - How to use Thunder-Access

If you have npm available in your project, just run npm i @thundersolutions/access in your terminal to install the package. Although a lot of features are provided, there is only one exported function. It is both a named and a default export, so both of the following imports are valid, and they both import the same function.

import { addAccessibilityRules } from '@thundersolutions/access'

import myFnName from '@thundersolutions/access'

If you are not able to use native module imports or your project does not use npm, you can add this as a UMD module instead by using the unpkg URL.

<script src="https://unpkg.com/@thundersolutions/access/umd/addAccessibilityRules.min.js"></script>
<script>
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
  const { addAccessibilityRules } = AccessibilityLayer
</script>

The function accepts a configuration object as its only argument, in which you can add three properties: rules, methods, and root.

• The rules property contains an object using CSS selectors as keys, and as values, objects are used to configure the accessibility for all elements matching that selector. Read more about that in the rules documentation.

• The methods property contains your own custom methods which can be connected to rules. This separation allows them to be reused by many different rules. Learn how to use them in the methods documentation.

• The root property allows us to scope the rules to a root element, which is document.body by default. Read more about this in the root documentation.

So instead of adding attributes and functionality the old fashioned way:

<button
  class="menuBtn"
  aria-owns="Content"
  aria-haspopup="true"
  aria-expanded="false"
>
  <img
    class="menuIcon"
    src="bars.png"
    alt=""
    tabindex="-1"
    aria-hidden="true"
  /> Menu
</button>
<script>
  const menuBtn = document.querySelector('.menuBtn')
  const menu = document.querySelector('#Menu')
  menuBtn.addEventListener('click', () => {
    const expanded = menuBtn.getAttribute('aria-expanded') === 'true'
    menuBtn.setAttribute('aria-expanded', !expanded)
    menu.setAttribute('aria-hidden', expanded)
  })
</script>

... You can write it this way instead, by using this package:

<button class="menuBtn">
  <img class="menuIcon" src="bars.png"> Menu
</button>

addAccessibilityRules({

  methods: {
    toggleMenu: utils => utils.toggleExpanded('.menuBtn', '#Menu')
  },

  rules: {

    '.menuBtn': {
      aria: {
        owns: 'Menu',
        haspopup: true,
        expanded: false
      },
      mouse: {
        click: ['toggleMenu']
      }
    },

    '.menuIcon': {
      aria: {
        hidden: true
      },
      attr: {
        alt: '',
        tabindex: -1
      }
    }

  }
})

For more detailed usage, please read the related sections in this Wiki.