Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
libs Pinning the angular2 dependency, and including licenses. (#893) Feb 2, 2017
media Reverse deprecated argument order to womtoblock in accessible. Apr 17, 2018
README.md Update config options for sidebar buttons. Nov 30, 2016
app.component.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
audio.service.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
block-connection.service.js Reverse deprecated argument order to womtoblock in accessible. Apr 17, 2018
block-options-modal.component.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
block-options-modal.service.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
commonModal.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
field-segment.component.js Reverse deprecated argument order to womtoblock in accessible. Apr 17, 2018
keyboard-input.service.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
messages.js Further cleanup and removal of unnecessary functions. Pull some strin… Jan 19, 2017
notifications.service.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
sidebar.component.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
toolbox-modal.component.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
toolbox-modal.service.js Reverse deprecated argument order to womtoblock in accessible. Apr 17, 2018
translate.pipe.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
tree.service.js Fixing the tree service so it doesn't treat unknown block deletion (#… Jun 22, 2017
utils.service.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
variable-add-modal.component.js Reverse deprecated argument order to womtoblock in accessible. Apr 17, 2018
variable-modal.service.js Fixing the tree service so it doesn't treat unknown block deletion (#… Jun 22, 2017
variable-remove-modal.component.js Reverse deprecated argument order to womtoblock in accessible. Apr 17, 2018
variable-rename-modal.component.js Reverse deprecated argument order to womtoblock in accessible. Apr 17, 2018
workspace-block.component.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017
workspace.component.js Setting up accessible Blockly for Closure compilation. (#1134) May 26, 2017

README.md

Accessible Blockly

Google's Blockly is a web-based, visual programming editor that is accessible to blind users.

The code in this directory renders a version of the Blockly toolbox and workspace that is fully keyboard-navigable, and compatible with most screen readers. It is optimized for NVDA on Firefox.

In the future, Accessible Blockly may be modified to suit accessibility needs other than visual impairments. Note that deaf users are expected to continue using Blockly over Accessible Blockly.

Using Accessible Blockly in Your Web App

The demo at blockly/demos/accessible covers the absolute minimum required to import Accessible Blockly into your web app. You will need to import the files in the same order as in the demo: utils.service.js will need to be the first Angular file imported.

When the DOMContentLoaded event fires, call ng.platform.browser.bootstrap() on the main component to be loaded. This will usually be blocklyApp.AppComponent, but if you have another component that wraps it, use that one instead.

Customizing the Sidebar and Audio

The Accessible Blockly workspace comes with a customizable sidebar.

To customize the sidebar, you will need to declare an ACCESSIBLE_GLOBALS object in the global scope that looks like this:

var ACCESSIBLE_GLOBALS = {
  mediaPathPrefix: null,
  customSidebarButtons: []
};

The value of mediaPathPrefix should be the location of the accessible/media folder.

The value of 'customSidebarButtons' should be a list of objects, each representing buttons on the sidebar. Each of these objects should have the following keys:

  • 'text' (the text to display on the button)
  • 'action' (the function that gets run when the button is clicked)
  • 'id' (optional; the id of the button)

Limitations

  • We do not support having multiple Accessible Blockly apps in a single webpage.
  • Accessible Blockly does not support the use of shadow blocks.