npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@thundersolutions/access

v0.1.16

Published

A tool that provides accessibility features as a separate layer from the main application markup and scripts.

Downloads

4

Readme

Thunder-Access

standard-readme compliant

This package separates accessibility features from your scripts and templates. Basically, it comes down to a separation of concerns, for better readability and maintainability.

HTML content is machine-readable, whereas CSS styles visually present that content in a human-readable way. By the same token, accessibility features exist to present that content to the blind. In this way, you might even say these features are like styles for the blind. At this point, it's common knowledge among developers that embedding styles in HTML is a bad practice. So, why do we still do it for accessibility? Not only is it distracting to read, but it quickly becomes repetitive and difficult to maintain. We need a solution that provides an extra layer to presentation, an "accessibility layer," if you will. That's where this package comes in.

For more information and documentation, visit the GitHub Wiki page.

Table of Contents

Install

npm i @thundersolutions/access

If npm is not used in your project, you can add this as a UMD module instead with the unpkg URL.

<script src="https://unpkg.com/@thundersolutions/access/umd/addAccessibilityRules.min.js"></script>

Usage

Although a lot of features are provided, there is only one exported function in the package. 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'

Or, if you are not able to use native module imports:

<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 documentation.

Maintainers

@jonathandewitt-dev

License

MIT © 2020 Jonathan DeWitt