---
title: "Keyboard and screen reader use"
manual: "Frontend Edit"
version: "2.6"
source: "Usage/Keyboard.rst"
rendered: "2026-10-01T07:11:45+00:00"
---

# Keyboard and screen reader use {#keyboard}

The editing UI is operable without a mouse. This page lists the keys that are
implemented and names the places where support is deliberately limited.

## Content element toolbar {#keyboard-toolbar}

The buttons attached to a content element form a single tab stop. Once focused,
you move between the buttons with the arrow keys — the same pattern the TYPO3
backend uses.

| Key | Action |
| --- | --- |
| `Tab` | Move to the element toolbar; the first button receives focus |
| `←` / `→` | Move between the buttons of that toolbar, wrapping at both ends |
| `Enter` | Activate the focused button |

## Edit Menu {#keyboard-menu}

The three-dot button opens the menu. Inside it:

| Key | Action |
| --- | --- |
| `↓` / `↑` | Move to the next / previous entry, wrapping at both ends |
| `Home` / `End` | Jump to the first / last entry |
| `Enter` | Activate the focused entry |
| `Esc` | Close the menu and return focus to the three-dot button |

## Dialogs and the inline editing panel {#keyboard-dialogs}

The delete confirmation dialog and the [inline editing](InlineEditing.html#inline-editing)
panel behave as modal dialogs:

-   `Esc` closes them.
-   `Tab` cycles **within** the dialog and does not escape to the page
    behind it.
-   Closing returns focus to the element that opened the dialog.

The delete dialog names the record it is about to remove — including its
identifier, e.g. `My Element [tt_content:42]` — so the target is
unambiguous when the dialog is announced.

## Known limitations {#keyboard-limitations}

-   **Drag & drop reordering**

    Native browser drag & drop is pointer-only. The drag handle is therefore
    kept out of the tab order and hidden from assistive technology on purpose,
    so it does not offer a focusable control that cannot be operated. Use the
    **move** entry in the Edit Menu instead — it opens the backend move dialog,
    which is fully keyboard-accessible. See [Drag & Drop Reordering](DragAndDrop.html#drag-and-drop).

-   **FormEngine inside the panel**

    Inside the [inline editing](InlineEditing.html#inline-editing) panel the TYPO3 edit form
    runs outside its usual context. Context menus are not available; the
    **Expand** button opens the record in the regular backend when you need the
    full form.

## Respecting user preferences {#keyboard-preferences}

| Preference | Behavior |
| --- | --- |
| Colour scheme | Follows the operating system by default and can be pinned to light or dark via [frontendEdit.colorScheme](../Configuration/SiteSettings.html#confval-frontendedit-colorscheme). |
| Hover outline | The outline drawn around the hovered element can be switched off entirely via [frontendEdit.enableOutline](../Configuration/SiteSettings.html#confval-frontendedit-enableoutline). |

> [!TIP]
> If the editing UI interferes with testing your site, switch it off with the
> eye icon in the [toolbar](Toolbar.html#toolbar) rather than working around it.