> For the complete documentation index, see [llms.txt](https://docs.beefree.io/end-user-guide/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.beefree.io/end-user-guide/accessibility/custom-keyboard-navigation.md).

# 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.  &#x20;

### **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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.beefree.io/end-user-guide/accessibility/custom-keyboard-navigation.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
