Need help with creatability-components?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

263 Stars 41 Forks Other 48 Commits 14 Opened issues


Web components for making creative tools more accessible.

Services available


Need anything else?

Contributors list

Creatability Accessible Web Components

Creatability is a set of experiments made in collaboration with creators and allies in the accessibility community. They explore how creative tools – drawing, music, and more – can be made more accessible using web and AI technology. We hope they inspire others to make new projects, so we've started open-sourcing components here for anyone to use. Note this repo is under development. Contributions welcome!

using input tracking


Copy the packaged file in dist/acc-components.js into your html file and you will receive the following HTML elements:

  • - standard button
  • - a container for main content. Easily pairs with inputs such as
     and displays webcam for using body as cursor input.
  • - a group of UI controls
  • - used to select the current input method (i.e. mouse/keyboard/touch or body pose).
  • - data used to populate an
     dropdown or an 
  • - an input that combines mouse/keyboard/touch into one normalized input.
  • - similar to
     a method of nesting within an 
  • - an element providing easy tracking of a selected body part to use as a cursor input.
  •  - a group of radio buttons
  • - a slider / range element
  • - a select / dropdown element
  • - collapsable panel that you can place UI components in, also includes tabbable "skip to content" shortcut.
  •  - data to use as a slide within 
  • - a slideshow with next/previous navigation
  • - a floating temporary UI notification system. Ideal for use with ARIA-LIVE.
  • - similar to a checkbox


A simple example of including the library then supporting mouse/keyboard and body tracking inputs.


        <acc-mouse-input amplification="10"></acc-mouse-input>
        <acc-pose-input smoothing="0.5" selected></acc-pose-input>

        const inputSelector = document.querySelector('acc-input-mode-select');

        // all of the input's events bubble up to the selector
        inputSelector.addEventListener('input', function onInput(event){
            const input =;
            // position mapped to the content's coordinate space
            // by default this is document.body, it can be set to any
            // element with inputSelector.contentElement = htmlElement;
            // or <acc-input-mode-select contentselector="#content">
            // exists on individual inputs as well
            const x = input.contentX;
            const y = input.contentY;

In pure JavaScript these elements behave like normal HTMLElement's:

const input = document.createElement('acc-pose-input');
//or use document.querySelector('acc-pose-input')

input.addEventListener('input', (event)=>{ console.log(; });

//this triggers the loading and initialization of any resources input.initialize();

Input Event Cycle

All input types dispatch the following events:

  • 'initializing'
    when the input begins to load and initialize any necessary resources.
  • 'ready'
    when the input has completed initializing and is now operating
  • 'input'
    dispatched every time the input has a new value
  • 'stop'
    dispatched if the input has stopped such as by switching inputs or calling
  • 'change'
    dispatched when an attribute/property changes values

Side Panel and Content

Quickly scaffold an application with a collapsable sidebar and content area that resizes accordingly and can display webcam when in use.



Snackbar is meant to be a temporary notification UI. Snackbar is ideal for ARIA Live Regions. To use as a Live Region YOU must add the

attribute to the element directly in the HTML. When its message changes (or show() is invoked) it will display for its set

in seconds. Typically there is only one per application, the code below is for demonstration purposes.
    Example 1 will show for 5 seconds every time this content changes or until "DISMISS" is clicked

    Example 2 will show up indefinitely until "DISMISS" is clicked and will be styled boldly as an error alert.

    Example 3 will show up for 4 seconds every time its content changes.


The tutorial element gives you a simple slide show. It extends

so it can be added to the screen by adding an "open" attribute. Each of the
 children will be rendered as a slide-show.


This is not an official Google product

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.