# Keyboard, accessibility and touch

Run every command from the keyboard, draw without a mouse, use a screen reader, and work on a touch screen.

_Shortcuts are written for Windows and Linux. On a Mac, use ⌘ Cmd where they say Ctrl, and ⌥ Option for Alt._

Everything in pxstud.io can be done from the keyboard: every command is in the command palette,
every shortcut can be changed, and the canvas itself can be drawn on with the arrow keys. On a
touch screen, one finger draws, two fingers zoom and pan, and a two-finger tap undoes.

## Finding and running any command

Press `Ctrl+K` (or choose Edit > Command Palette...) and type part of a command's
name. The list shows each command's menu path and shortcut, and dims the ones that can't run right
now. Use the arrow keys to pick one and `Enter` to run it. With nothing typed, the commands you
ran most recently come first.

## Changing shortcuts

Settings > Keyboard Shortcuts... lists every command with its shortcuts. Search by command, menu or
key, then:

- click **Add** (or an existing shortcut) and press the new key combination; `Esc`
  cancels;
- if the combination already belongs to another command, choose **Reassign** to move it, or
  **Cancel**;
- **Reset** puts one command back to its default, and **Reset all** puts back every one;
- **Export...** saves your set as a JSON file, and **Import...** loads one, for example in another
  browser.

Tick **Disable single-key shortcuts** to switch off every shortcut that is a single letter, digit
or punctuation key (with or without `Shift`), so a stray key press never changes tool. The
full list of defaults is in [Keyboard shortcuts](https://pxstud.io/docs/manual/reference/shortcuts.md).

`Tab` is never a shortcut and can't be assigned to one: it always moves to the next control,
so you can never get stuck in a panel or on the canvas. (That's why switching a tilemap layer
between Tiles and Pixels is `Alt+T` rather than Aseprite's Tab; see
[Tilemaps](https://pxstud.io/docs/manual/guides/tilemaps.md).)

## Moving around the editor

- **Skip to canvas.** The first thing `Tab` reaches on the page is a **Skip to canvas** link.
  Press `Enter` on it to put the keyboard focus straight on the canvas.
- **Landmarks.** The menu bar is the page's header, and every panel is a labelled region (Tools,
  Tool options, Timeline, Palette, Color picker and so on), so a screen reader's landmark list
  jumps straight to it.
- **The menu bar** is one stop for `Tab`. `Left` and `Right` (or `Home` and
  `End`) move between the menus, and `Down`, `Enter` or `Space` opens one. Inside a
  menu, `Up` and `Down` move, typing a letter jumps to the next item starting with it,
  `Right` opens a submenu and `Left` closes it, and `Esc` closes the menu. With a
  menu open, `Left` and `Right` hop to the neighboring menus. When the menu bar is docked
  down a side, `Up` and `Down` move between the menus instead.
- **Panel menus.** In any panel, `Shift+F10` or the Menu key opens the panel's menu, the same
  one a right-click opens ([The workspace](https://pxstud.io/docs/manual/guides/workspace.md#the-panel-menu)).
- **Resizing panels.** `Tab` to the line between two panels and use the arrow keys
  ([The workspace](https://pxstud.io/docs/manual/guides/workspace.md#moving-panels)).

## Drawing with the keyboard

Put the focus on the canvas (with `Tab` or the **Skip to canvas** link), and a pixel cursor
appears where the pointer last was, or in the middle of the sprite. Then:

| Key | What it does |
| - | - |
| Arrow keys | Move the cursor one pixel. |
| `Shift` with an arrow | Moves the cursor one grid cell. |
| Hold `Space` | Presses the active tool at the cursor; move with the arrows to draw, and let go of `Space` to finish. |
| `Enter` | Puts the pen down; move with the arrows, then press `Enter` (or `Space`) again to lift it. Use this if holding two keys at once is hard. |
| `Shift` or `Alt` with `Space` or `Enter` | Acts like `Shift` or `Alt` with a click, for example to add to a selection. |
| `Esc` | Cancels the stroke in progress. |
| `Tab` | Leaves the canvas. |

Every tool works this way except the Hand: brushes paint, shapes stretch from where the pen
went down to where it comes up, selection tools select, and the Move drags. The canvas
scrolls to keep the cursor in view, and in tiled mode the cursor wraps around the edges.

When a move or transform is waiting to be applied, or a multi-step tool such as the
Polygon is waiting for its last point, `Enter` finishes that instead of putting the pen
down.

Keyboard drawing starts when the canvas gets the focus from the keyboard: `Tab` to it, or use
the skip link. Clicking the canvas with the mouse turns it off again, so mouse users keep the arrow
keys, `Space` and `Enter` for their usual jobs, as in Aseprite: the arrows move the
selected pixels, or step through frames and layers; holding `Space` pans; and
`Enter` plays and pauses the animation. After a click, `Tab` away and back to
draw with the keyboard again.

**With a screen reader,** the canvas is announced with the sprite's name and size, the active tool
and the zoom. The cursor's position ("x 12, y 7") is read once it stops moving, then "Pen down",
"Pen up", or "Applied at..." for a single press, and "edge" when the cursor can't go further.

## Keyboard in the panels

**Sprite tabs.** The tabs above the canvas are one stop for `Tab`:

- `Left`, `Right`, `Home` and `End` switch sprites;
- `Alt+Left` and `Alt+Right` move the tab along the row (and say where it went);
- `F2` renames the sprite, and `Del` closes it;
- `Enter` on a sprite whose cloud copy changed lets you choose which copy to keep.

**The palette** is also one stop for `Tab`, on the selected swatch:

- the arrow keys, `Home` and `End` move between swatches, and `Shift` with an arrow
  selects a range (to sort, for example);
- `Enter` or `Space` makes the swatch the foreground color, and `Shift+Enter` the
  background color;
- `Alt` with an arrow moves the swatch in the palette;
- `F2` edits the swatch's color, and `Del` removes it.

The new foreground or background color, and a swatch's new place, are read out to screen readers.
See [Color and palettes](https://pxstud.io/docs/manual/guides/color.md).

**The timeline.** The cels form a grid with one `Tab` stop, the active cel:

- the arrow keys move to the next cel (and make its layer and frame active);
- `Shift` with an arrow extends the cel selection, and `Esc` clears it;
- `Alt+Left` and `Alt+Right` move the cel's frame (or the selected frames) one place, and
  say where they went;
- `Alt+Shift` with an arrow nudges the selected cels;
- the Menu key opens the cel's right-click menu.

On a frame number, `Alt+Left` and `Alt+Right` move that frame too. On a layer's name,
`F2` renames it. On a tag, `Enter` or `Space` makes it the tag that plays, and `Alt+Left` and
`Alt+Right` move it a frame (its ends take `Left` and `Right` to resize it). See
[Animation and the timeline](https://pxstud.io/docs/manual/guides/animation.md).

## Notifications

Messages appear in the bottom-left corner and are read out by screen readers. Errors, and messages
with a button, stay until you close them. Other messages stay for at least 8 seconds, longer the
more there is to read (up to 20 seconds), and they wait while your pointer or focus is on them, or
while the browser tab is in the background. At most five show at once.

## Touch screens

- **Drawing:** one finger (or a pen) draws with the active tool. A pen's pressure sets the brush
  size from the start (only a pen's: a finger draws at the full size). It can also drive the
  brush size, angle and a color gradient (**Dynamics** in the tool options; see
  [Tools](https://pxstud.io/docs/manual/reference/tools.md#brush-and-ink-options)). A pen's eraser end erases: the editor
  switches to the Eraser while you use it and back afterwards.
- **Drawing with a pen only:** the first time you draw with a pen on a touch screen, the editor
  asks whether to draw with the pen only. Choose **Pen only** (or turn off **Settings > Draw with
  Finger** later) and one finger pans the canvas instead of drawing, so a hand resting on the
  screen leaves no marks. Pinching and the two- and three-finger taps work the same either way.
- **Zoom and pan:** put two fingers on the canvas and pinch to zoom, or move them together to pan.
  A single finger waits a moment before it draws, so starting a pinch never leaves a mark. With the
  Hand, a second finger turns the pan into a pinch. Other fingers and your palm are ignored
  while a stroke is in progress.
- **Undo and redo:** tap the canvas with two fingers to undo, or with three fingers to redo. Tap
  quickly and keep your fingers still; a tap that moves the view slightly puts it back.
- **Colors:** tap a palette swatch for the foreground color. For the background, tap it and then
  the palette's background button (there's no right-click on a touch screen).
- **The timeline** scrolls with your finger. A tap selects a cel or frame. Press and hold for half
  a second, then drag, to select a range; press and hold and let go without moving to open the
  right-click menu.
- **Panels:** press and hold a panel for a moment before dragging it. On a phone or a small window
  the editor switches to a compact layout, where panels open as sheets over the canvas; see
  [Small screens and phones](https://pxstud.io/docs/manual/guides/workspace.md#small-screens-and-phones).

## The keystroke display

View > Show Keystrokes shows the keys you press on screen, which helps when you record a tutorial
or teach a class. Settings > Keystrokes... chooses whether it shows and which corner of the
window or the canvas it sits in.

## Known limits

- The canvas has no keyboard equivalent of a right-click, so keyboard drawing always uses the
  foreground color.
