Keyboard shortcuts can be an incredible timesaver. For instance, if you need to quickly highlight a word, you can hold down the shift key while pressing the right arrow, and then release it to stop highlighting. Saves you having to reach for the mouse!
In web design, keyboard-only accessibility is essential. Why? Because both users with disabilities and those with temporary mobility limits need it. And for users who like to move around an interface efficiently, there’s no better alternative. Accessibility has been a part of text entry since the invention of text entry devices, after all.
When building a web application, your users must be able to move between links, buttons, forms, and other elements using a few keystrokes...say the tab key and arrow keys for instance.
It’s not just a good idea to follow. The W3C Accessibility Initiative – the organization that brings together experts in design to develop and maintain core standards for accessibility – recommends the use of keyboard navigation.
At TinyMCE, we follow the Web Accessibility Initiative – Accessible Rich Internet Applications (WAI-ARIA) specifications – which are published and maintained by W3C. The specifications make our rich text editor interface easy to navigate with just a keyboard, and this guide steps you through how to navigate the TinyMCE editor with your keyboard.
Why you need to know about focus
When we refer to focusing on the editor, it means that the cursor is in the editor space, and it’s ready to receive text input. When you click on an element, or in the TinyMCE editor space, it has ‘focus’. When you click off it, it loses focus. This is true for all keyboard navigation.
As long as you have focus inside the TinyMCE editor, you can use keyboard shortcuts and navigation to activate features, and move around the menu bar.
How to navigate into the editor
The three essential key combinations to know about are the three function keys: F9, F10, and F11. You will also need to use the arrow keys for movement, and the Escape key for returning to the editor.
|
Editor Action |
PC |
macOS |
|
Go directly to the menu bar |
Alt + F9 |
Option + F9 |
|
Navigate into the toolbar (followed by the arrow keys to move across icons) |
Alt + F10 |
Option + F10 |
|
Focus on an element path |
Alt + F11 |
Option + F11 |
Focus on the editor
When you’re on your application page, use the tab key to select the text editor, and place the cursor inside the text editor. From there, you can focus on the menu bar by using the Alt + F9 or Option + F9 key combinations.
Navigate the menu bar
Once the focus changes to the menu bar, you can then use the right arrow key and left arrow key to move around. Use Enter, Return, Spacebar, or the down arrow keys to open a menu item when it’s highlighted.
Navigate the toolbar
You can select the toolbar icons with the Alt + F10 or Option + F10 key and use the left and right arrow keys to jump from icon to icon. If the toolbar is separated into icon groups, use the Shift + tab or just the tab key to move to another group of toolbar icons. The selection wraps around, so that when you reach the end of the toolbar, pressing the right key again will return to the start of the toolbar.
Return to the editor
You can return to writing in the editor after accessing the menu by pressing the escape key. This works from both the menu bar and toolbar.
Custom shortcuts
It’s possible to set up a custom shortcut by configuring an editor.addshortcut function. For example, you can set up a shortcut to highlight text in yellow:
<script src="https://cdn.tiny.cloud/1/add-your-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
plugins: [
"advlist autolink lists checklist link image charmap print preview anchor",
"searchreplace visualblocks code fullscreen",
"insertdatetime media table contextmenu paste" ],
menubar: "view",
toolbar: "preview | insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | checklist",
setup: function (editor) { /* use setup: function */
editor.addShortcut( /* add.Shortcut incorporates a shortcut function into your rich text editor. Set up the keyboard shortcut, and use a function () with the editor.execCommand. */
'meta+alt+y', 'Add yellow highlight to selected text.',
function () { editor.execCommand('hilitecolor', false, '#FFFF00'); /* Include the effects of the keyboard shortcut you need here */
});
},
});
Our documentation delivers more information on custom keyboard shortcuts. If you’re looking for more information about how TinyMCE deliverse accessibility for users, contact us, or read more about our accessibility initiatives.
