# 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. --- # Agent Instructions: 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: ``` GET https://docs.beefree.io/end-user-guide/accessibility/custom-keyboard-navigation.md?ask= ``` The question should be specific, self-contained, and written in natural language. 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.