Creatability Accessible Web Components

in active development

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!

Basics

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

Usage

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

    
        
        
        

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

    <script>
        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 = event.target;
            // 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;
        }
    </script>

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(event.target.position);
});
//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

  input.stop()

  .

• '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

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

aria-live

duration

    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.

Tutorial

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

AbstractModal

Contributors

• Kyle Phillips
• Yotam Mann
• Use All 5

This is not an official Google product