Keyboard Navigation for Module Menu & Context Menu

Oliver Bartsch

28 June 2022

Hands typing on a keyboard with a cup of coffee nearby, set against a dark background featuring abstract arrows and circles.

Navigate your TYPO3 installation with fewer clicks.

This post is part of our TYPO3 Version 11 Series. We’re shining a spotlight on some of the really useful features in version 11 and why you should upgrade.

Accessibility has always been one of TYPO3’s key priorities. The TYPO3 Accessibility Team was founded some years ago and is an important and valued part of the TYPO3 project. Their work has introduced significant improvements to the backend, such as adding keyboard support to the SVG-based page tree in TYPO3 v10.

Continuing in this vein, TYPO3 version 11 brings proper keyboard support to several more components in the backend—making it more accessible to more users.

Module Menu

The module menu is the main menu of every TYPO3 backend. It’s also the entry point, since it’s the first component that receives focus when navigating with the keyboard. The module menu now supports keyboard navigation as suggested by the ARIA Authoring Practices. This means that the correct HTML attributes are used to describe the items and the different levels in the menu.

While tabbing through the module menu was already possible, version 11 now brings the following features to support you in your daily workflow:

Use the “Space” and “Enter” keys to collapse and expand submenus. This can be extended by simultaneously pressing the “right arrow” key to move the focus to the first item of the submenu.
Use the “Up” and “Down” arrow keys to navigate within the current level of the menu.
As an extension to the ARIA pattern, use the “Ctrl” key with the “Home” or “End” keys to navigate through the first level of the main menu.
Use the “Left” and “Right” arrow keys within a submodule to move to the previous or next submodule.
Use the “Esc” key to move to the parent item of a submodule item.

Help Menu

The Help menu in the topbar of the backend now supports keyboard navigation as well, with the same features as the module menu.

A dropdown menu displaying options such as Show, Edit, New, Info, Copy, Cut, and more, with the "Create New" wizard highlighted. — Active context-sensitive menu

Context Menu

The context-sensitive menu, which provides specific actions for each record, is displayed when clicking on the record’s icon. This functionality can be found across the whole backend. To improve the accessibility of this frequently-used component, following the ARIA Authoring Practices, keyboard support was added in version 11. Therefore it is now possible to use this component solely with a keyboard. It also means that screen readers can now recognize the context menu properly. To open the context menu on a record with the keyboard, focus on the record (icon) and press “Shift+F10”.

In the opened menu, you can use the arrow keys, as well as the “Home” and “End” keys to navigate. Using the “Space” key will activate an action or open a second level menu.

File and Folder trees

In TYPO3 v11, the folder and file trees got updated and now also rely on the SVG-based tree component (which was introduced in v9 and used by the page tree). Since the SVG-based tree component was equipped with proper keyboard support in v10, the folder and file trees now also benefit from it and provide the same functionality.

All trees provide keyboard support

With TYPO3 v11 a huge step forward in terms of accessible trees has been achieved. All trees now fully support keyboard navigation, following the ARIA Authoring Practices.

Sidebar menu displaying various sections including "Dashboard," "Web," "Site Management," "File," and "Admin Tools." The "Filelist" section shows a directory structure with folders such as "fileadmin," "documentation," and "user_upload." — Keyboard aware folder tree in filelist

Multi record selection and clipboard

As described in the dedicated post about the new multi record selection component it is now possible—thanks to TYPO3 v11 - to manage the clipboard just with the keyboard. When integrating the multi record selection component, accessibility was one of the main priorities. This therefore led to full keyboard support as well as a couple of keyboard shortcuts that you don’t want to miss.

Improve everyone’s workflow

Many people use only the keyboard to navigate—either through preference or circumstance. The possibility of using just the keyboard to navigate through the backend of TYPO3 supports any backend user, making their workflows more efficient. The work done to improve keyboard support flows through to screen readers and other assistive technologies. Do you already use the new keyboard support? If not, you should definitely try it out.