Web components for making creative tools more accessible.
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!
Copy the packaged file in dist/acc-components.js into your html file and you will receive the following HTML elements:
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();
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
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
aria-liveattribute to the element directly in the HTML. When its message changes (or show() is invoked) it will display for its set
durationin 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
AbstractModalso 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