The JavaScript for the example buttons on this page uses the IDL Interface defined in ARIA 1.2. The purpose of these examples is to illustrate how to use ARIA Attribute Reflection and provide a test case for browser and assistive technology interoperability. Specifically, the role and ariaPressed attributes are accessed using dot notation instead of setAttribute() and getAttribute(). In all other respects, these examples are identical to the Button Examples.

This Print action button uses a div element.

Print Page

This Mute toggle button uses an a element.

Mute

Go to original example.

Lessons learned:

  • This example page has a link to aria-at, a repo that contains a test suite and harness for assessing assistive technology (AT) support of ARIA. Seems very useful so I'll be learning more about this effort.
  • Reflected properties aren't there yet, but I believe you could achieve the same with the MutationObserver API
  • The original example used a callout to denote that the example requires certain browser APIs. I instead reused the AlertDialog component from the other example instead if users' browser doesn't support the required APIs.