Automatica11y NPM

automatica11y

Automatic A11y — let's make the web accessible to everyone.

Important!

Learning how to make your website accessible is highly encouraged. Understanding accessibility (aka a11y) is of paramount importance for web developers. See Learn A11y section.

automatica11y is intended to help developers implement accessibility with the minimum amount of effort because an accessible web is urgent and will benefit everyone.

Contributions are always welcome! Let's make the web accessible to everyone, together.

Requirements

The key words "MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL" in this document are to be interpreted as described in RFC 2119.

automatica11y:

MUST be in accordance with Web Content Accessibility Guidelines and WAI-ARIA Authoring Practices
MUST work with minimal configuration
MUST NOT depend on the markup structure
MUST NOT overwrite id attributes
SHOULD use custom data-* attributes instead of class attributes
SHOULD make the attribute names customizable

Examples

Tab Panel

reference

Installation

npm

npm install --save automatica11y

Yarn

yarn add automatica11y

CDN

<script src="https://unpkg.com/automatica11y/dist/automatica11y.min.js"></script>

Usage

Include automatica11y.min.js in your page. Put the script tag at the bottom of the body element just before the closing tag </body>. We want to run automatica11y after the DOM construction is completed and we don't want do block the parser.
Add the custom data-* attributes to inaccessible components.
Voilà!

<body>
  <article data-a11y-tabpanel>
    <ul data-a11y-tabpanel-tablist>
      <li data-a11y-tabpanel-tab>Tab 0</li>
      <li data-a11y-tabpanel-tab>Tab 1</li>
      <li data-a11y-tabpanel-tab>Tab 2</li>
      <li data-a11y-tabpanel-tab>Tab 3</li>
    </ul>
    <section data-a11y-tabpanel-pane>
      <h1>Pane 0</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </section>
    <section data-a11y-tabpanel-pane>
      <h1>Pane 1</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </section>
    <section data-a11y-tabpanel-pane>
      <h1>Pane 2</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </section>
    <section data-a11y-tabpanel-pane>
      <h1>Pane 3</h1>
      <p>Lorem ipsum dolor sit amet.</p>
    </section>
  </article>

  <script src="automatica11y.min.js"></script>
</body>

Configuration

You can configure automatica11y using the object literal automatica11yConfig. You can omit any properties.

Default values

const automatica11yConfig = {
  components: {
    tabPanel: {
      data: {  // custom data-* attributes
        identifier: 'a11y-tabpanel', // custom data-* attribute used to identify a tab panel
        tabList: 'a11y-tabpanel-tablist', // custom data-* attribute used to identify a tab list
        tab: 'a11y-tabpanel-tab', // custom data-* attribute used to identify a tab
        pane: 'a11y-tabpanel-pane' // custom data-* attribute used to identify a pane
      },
      selected: { // selected/active state identifiers
        enable: false, // enable it if your component uses classes or attributes to indicate selected state
        tab: { // selected tab identifiers
          attributes: [], // an array of all attributes originally used by the component to indicate a selected tab
          classes: [] // an array of all classes originally used by the component to indicate a selected tab
        },
        pane: { // selected pane identifiers
          attributes: [], // an array of all attributes originally used by the component to indicate a selected pane
          classes: [] // an array of all classes originally used by the component to indicate a selected pane
        }
      }
    }
  }
}

Example

<div data-tabs>
  <div data-list>
    <a data-tab selected>Tab</a>
    <a data-tab>Tab</a>
    <a data-tab>Tab</a>
  </div>
  <div data-pane class="is-active">
    Pane
  </div>
  <div data-pane>
    Pane
  </div>
  <div data-pane>
    Pane
  </div>
</div>
<script>
const automatica11yConfig = {
  components: {
    tabPanel: {
      data: {
        identifier: 'tabs',
        tabList: 'list',
        tab: 'tab',
        pane: 'pane'
      },
      selected: {
        enable: true,
        tab: {
          attributes: ['selected']
        },
        pane: {
          classes: ['is-active']
        }
      }
    }
  }
}
</script>
<script src="automatica11y.min.js"></script>

Learn A11y

I learn a lot from these invaluable resources

A11ycasts with Rod Dodson
Web Accessibility - Udacity course by Alice Boxhall and Rob Dodson
Accessibility - Web Fundamentals

License

@charbelrami

accessibility a11y

0.1.1

9 years ago