# Custom Keyboard Navigation

### **Introduction**

The email, page, and popup builders use ARIA APG patterns, following accessibility best practices, for keyboard navigation. Reference the [ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/patterns/) documentation for more information on these patterns.

In addition to the ARIA APG patterns, the builder also includes a few custom keyboard navigation patterns. These patterns were created with an optimal end user experience in mind, and serve as additional key options for a smooth navigation experience. This page lists and discusses these additional keyboard options and when to use them.   

### **Stage**

When the stage is focused:

* **ArrowUp** and **ArrowDown** move through rows
* **Enter** focuses the inner block
* **ArrowUp** and **ArrowDown** move through blocks
* **Enter** starts editing text blocks or moves the focus to the action buttons in placeholder blocks
* **Escape** navigates back through levels
* In textual blocks, **Alt+F10** (or **Option+F10** on Mac) moves focus to the toolbar

### **Drag & Drop**

**Stage elements and sidebar sortable elements** (e.g., social icons, icons, form fields, menu items, and carousel slides):

* Draggable elements usually have a **drag handle**. When a drag handle is focused, press **Enter** to start dragging.
* Once dragging has started, **ArrowUp** and **ArrowDown** cycle through possible drop positions.
* While dragging **in the stage**, you can press **t** (top) or **b** (bottom) to switch between dropping **above or below** the target element.
* Press **Enter** to drop the element in the new position, or **Escape** to cancel.

### **Sidebar Sortable Elements**

(Social icons, icons, form fields, menu items, and carousel slides):

* When focus is on a drag handle, **ArrowUp** and **ArrowDown** can be used to jump from one element to another.