a11y-aware

A11yAware

I'm the micro-library and custom element that rewards accessible, semantic HTML and minimal, well-formed ARIA!

Given HTML containing a <button> and <dialog>:

<button
  id="triggerButton"
  aria-controls="myDialog"
  aria-expanded="false"> Click me! </button>

<dialog id="myDialog">
  <p> Hello, I’m a native dialog box! </p>
</dialog>

You can use this Javascript:

import A11yAware from 'A11yAware';

const buttonProxy = new A11yAware('#triggerButton');

buttonProxy.addToggleListener();

… To show and hide the dialog box, while correctly updating the state of the ARIA attributes, for example, aria-expanded.

Missing or incorrect ARIA is reported via helpful assertion errors in the browser console.

Aligning functionality with accessibility has to be a good thing 💡♿️

Neat, huh?

• Demo: nfreear.github.io/a11y-aware/test
• CDN: unpkg.com/a11y-aware

Custom element

The library exports the <a11y-aware> custom element – see the demo.

<a11y-aware>
  <button … > … </button>
  <dialog … > … </dialog>
</a11y-aware>

Guided mode

And, you can make accessibility issues more visible with a guided mode:

<a11y-aware guided="true">
  <button … > … </button>
  <dialog … > … </dialog>
</a11y-aware>

Support

The library currently tests for and/or supports(*) the following HTML elements and attributes:

• <dialog> element, and the show(), showModal() and close() methods on the HTMLDialogElement class,
• hidden global attribute,
• aria-controls, aria-expanded and aria-haspopup attributes,
• role="listbox", role="dialog" …