creatability-components

by googlecreativelab

googlecreativelab / creatability-components

Web components for making creative tools more accessible.

229 Stars 34 Forks Last release: Not found Other 46 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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!

using input tracking

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
attribute to the element directly in the HTML. When its message changes (or show() is invoked) it will display for its set

duration
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.




Tutorial

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

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

Contributors

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.