Page Navigation Using the “Tab” Key
To ease page navigation by using keyboard and further boost accessibility, CKEditor 4 can be reached by using the Tab and Shift+Tab shortcuts that are commonly used for navigating between page elements.
This is a default behavior that works for both classic and inline editors. For classic,
iframe-based editors, you will simply enter the editing area. For inline editors, the toolbar will appear for each editable element that you navigate to and editing it will become enabled.
# Influencing Tab Index
You can customize the place that CKEditor 4 will take in the Tab order of a web page that it is embedded in. Use the CKEDITOR.config.tabIndex option to assign a custom
tabindex value to a CKEditor 4 instance. For example:
config.tabIndex = 3;
This will cause CKEditor 4 to become the third page element that you will enter when using the Tab key, no matter what its position could be in the page source.
Please note that this configuration setting is an equivalent of adding the standard
tabindex attribute to the element that is being replaced with CKEditor 4.
# “Tab” Key Based Navigation Demo
See the working “Page Navigation Using the “Tab” Key” sample where you can try this page navigation method in practice.
# Related Features
Refer to the following resources for more information about accessibility in CKEditor 4:
- The Accessibility Support in CKEditor article explains CKEditor 4 compliance with some well-known accessibility standards and gives an overview of available accessibility-related features.
- The Managing Content Accessibility with Accessibility Checker article describes an innovative Accessibility Checker plugin that lets you inspect the accessibility level of content created in CKEditor 4 and immediately solve any accessibility issues that are found.
- The Keyboard Shortcuts article lists all keyboard shortcuts supported in CKEditor 4.
- The CKEditor Section 508 Compliance article describes CKEditor 4 compatibility with Section 508 Amendment to the Rehabilitation Act of 1973.
- The CKEditor WCAG 2.0 Compliance article describes CKEditor 4 compatibility with the Web Content Accessibility Guidelines (WCAG) 2.0 standard.