Video Demo of Ally IDE

Back to Table of Contents

Overview of Ally IDE

Ally IDE is a web-based, accessible Python IDE for non-visual programming. It is still a research prototype and may have bugs. It is tested in Chrome Web browser with NVDA and VoiceOver screen readers.

Ally IDE has five components: two editors, two views, and an output window. The shortcut to select each component is Control plus a number from one to five. Each component serves a special purpose and is well-integrated to minimize the need for visual cues during programming.

The first editor is a plain Text Editor, which is similar to writing code in a Notepad or TextEdit. The shortcut to select Text Editor is Control + 1. The second editor is a spreadsheet-like interface to read and write code in grid cells. We call it Grid Editor (shortcut: Control + 2). The user can seamlessly transition between Text and Table Editors to read/write codes.

Code Output window (shortcut: Control + 5) shows the textual output. To compile/run the code, a user presses ALT + ENTER.

Context Menu (shortcut: Control + 0) provides a list of helpful information, such as the current line and scope, frequently used actions like bookmarking a line, and changing the default settings. Finally, Ally Editor provides different audio cues to keep the user informed and oriented at all times.

The following sections describe each component and associated shortcuts in detail.

Back to Table of Contents

---

Common Shortcuts and Cues

Shortcuts for Navigation

Shortcut Key	Purpose
Control + 0	Open Context Menu or Right-click menu
Control + 1	Switch to Text Editor. The cursor is set at the current line
Control + 2	Switch to Grid Editor. The cursor is set at the current line
Control + 5	Switch to Code Output Window
Control + l	Announce the line number, level of the statement, and the name of the view at the current cursor
Control + g	Go to a particular line. A user types the line number and presses ENTER to commit
ALT + ENTER	Compile or Run the code. The cursor is taken to the output window by default

Shortcuts for Interaction

Shortcut Key	Text Editor	Grid Editor	Code Output Window
UP Arrow	Move the cursor to previous line	Go to the cell above the current cell at the same column	Move the cursor to previous line
DOWN Arrow	Move the cursor to next line	Go to the cell below the current cell at the same column	Move the cursor to next line
LEFT Arrow	Move the cursor to previous character	Go to the left cell in the same row of the current cell	Move the cursor to previous character
RIGHT Arrow	Move the cursor to next character	Go to the right cell in the same row of the current cell	Move the cursor to next character
ENTER	Create a new line. If current line is empty, then ignore	Make a cell editable (if allowed)	No Action
BACKSPACE	Remove the character (or indetation) at the cursor position.	In Navigation mode, remove the current statement cell and the corresponding row. Block Statements and the first stamentent inside a block cannot be removed. Cursor will point to the statement cell in the previous row.	No Action
ESCAPE	No Action	Make a statement cell non-editable, or dismiss the suggestion drop-down	No Action
DELETE	Delete the character at the cursor position	Delete the character in a statement cell while editing	No Action
PAGE UP	Move cursor to the first line	From an Empty cell, go to the nearest Statement cell or Indentation cell in the upward direction at the same level. From an Indentation cell, go to the Statement cell that creates the indentation. From a Statement cell, skip over consecutive statement cells or Blank Cells in the upward direction at the same level.	No Action
PAGE DOWN	Move cursor to the last line	From an Empty cell or Indentation Cell, go to the nearest Statement cell in the downward direction at the same level. From a Statement cell, skip over consecutive Statement cells, Indentation Cells or Blank Cells in the downward direction at the same level.	No Action
HOME	Move cursor to the start of current line	From an Empty cell, go to the Statement cell in the same row. From a Statement cell or Indentation cell, go to the Line Number cell in the same row.	No Action
END	Move cursor to the end of current line	From an Indentation cell or Line Number cell, go to the Statement cell in the same row. From a Statement cell, Empty cell, go to the Right Most cell in the same row.	No Action

Audio Cues

Ally IDE provides a real-time error cue (a beep sound) when editing the code in Grid Editor to indicate a syntax error. This cue is provided when the current editing cell contains a syntax error and the user tries to go out of Edit mode or create a new cell by pressing Enter. In addition, a periodical error alert every 45 seconds (configurable) will notify the user of any error with a prompt, e.g., 'Error at Line 3'. The user can disable these cues from the Settings. A list of other audio cues is described in the following table.

Interaction	Audio Cue
Making a cell editable/Going to the child node or statement
Making a cell non-editable/Going to the parent statement or node
Hitting a table boundary
Navigating with arrows
Editing a table cell
Auto-completing a block
Switching Editors or Views
Error Beep
Code is executing

Back to Table of Contents

---

Text Editor (Control + 1)

Text Editor is similar to Nodepad to edit code. It has the following features:

• Indentation Size: 1 Space (by default). Tabs are replaced by Spaces. Indentation size can be changed from the Settings in Context Menu.
• Auto Indentation: Enabled (by default). This feature can be disabled from the Settings in Context Menu. Backspace key will remove the spaces equal to the indentation size.
• No consecutive Empty New Lines: Consecutive empty new lines are confusing. Thus, the editor prevents pressing Enter on an empty line to create additional empty lines.

Back to Table of Contents

---

Grid Editor (Control + 2)

Grid Editor is the core component of Ally Editor. It is a spreadsheet-like tabular environment for reading and writing code in grid cells. Each row contains a single line of code, and each column represents a statement at a different scope or level. The first column corresponds to the code at the global scope (level: 1). Conditions and Loops create a new scope or level. For example, the body of an if block creates a new scope. In this case, it is at level 2. The body of a for block within this if block will create another scope, level 3.

The table grows dynamically as new lines and levels are added to the code. The right-most column will contain the code at the highest level. If a source code has ten lines and the highest level is four, Grid Editor will have ten rows and four columns -- in total, forty cells. The table cells can be of three types:

• Statement cells : Contain actual code statement. For example, a variable declaration or an assignment expression. These cells are editable so that the user make change to a statement.
• Indentation cells: Represent an indentation in the code. These cells are mostly non-editable to preserve the scope of a code block (e.g., If condition, for loop). Indentation cells are read out with semantically meaningful information, such as within if , within else, and within for. An indentation cell always precedes a statement cell in a row.
• Empty cells : Pads the statement cells to the right (if necessary) to make the number of columns equals to the highest level in any rows. These cells are non-editable, read out as BLANK , and used only to maintain the tabular structure.

The following sections describe how to use different features of Grid Editor.

Navigating and Editing Code in Grid Editor

Grid Editor has two mode of operations: (a) Navigation mode to read and explore code risk-free; and Edit mode to make changes in the code.

• Navigation mode : This is the default mode and allows users to navigate table cells using four arrow keys. A user can press ENTER to get out of this mode and edit a statement cell.
• Edit mode : In this mode, a user can edit a statement in a single cell or press Enter to create a new statement (e.g. row). The LEFT and RIGHT arrow keys move the cursor between the characters within a cell, and the UP and DOWN arrow keys are ignored. To get out of this mode, users must press ESCAPE.

Auto Completion of Variable and Code block in Grid Editor

While editing, Grid Editor provides a suggestion drop-down list with variables that match the typed text. The user can choose variable or a code block (e.g., If block , For block ) from this list by pressing UP or DOWN arrow and commit the selection by pressing ENTER.

If a code block is selected, Grid Editor automatically inserts necessary keywords and creates an indentation cell in the next row. Then, a user types the conditions and presses ENTER to go to the body automatically.

A user can also write a block (e.g., if/loop block) manually. For example, to write an if block, a user types if keyword, the condition, colon, and finally, presses ENTER. Then, Grid Editor creates an indentation cell (e.g., 'within if') in the next row and brings the cursor to the appropriate statement cell to continue typing the body of that block.

Going out of Indentation in Grid Editor

First, a user presses ESCAPE to get in the Navigation mode, then presses LEFT arrow to go to the target cell, and finally presses ENTER to edit (if allowed). For example, the first indentation cell after a block cannot be edited because doing so creates an indentation error. The plain Text Editor is recommended over the Grid Editor to remove nested code blocks or restructure a code.

Back to Table of Contents