Accessibility Support and Keyboard Shortcuts Documentation
CKEditor 4 is compliant with several accessibility standards, including WCAG, Section 508 and WAI-ARIA. It is easy to use in High Contrast Mode and with assistive technologies like screen readers.
CKEditor 4 also offers very good keyboard support which makes it accessible and usable at the same time. The entire user interface and all editor features are available through keyboard and most editor functions implement the key combinations that a user would naturally employ.
Accessibility Features
The Accessibility Support in CKEditor 4 article explains CKEditor 4 compliance with most important standards and supported platforms as well as gives an overview of some accessibility-related features that are implemented in CKEditor 4. You can test them in the editor instance below.
Keyboard Support
A complete list of all supported keyboard shortcuts is available here. Meanwhile, you can try some of the following ideas to get a feel for using CKEditor with your keyboard:
- Use Alt+0 to open the Accessibility Instructions dialog window.
- Use Alt+F10 to enter the editor toolbar, then use Tab and Shift+Tab to move between toolbar groups and Arrow keys to move between buttons within a toolbar group.
- Use Alt+F11 to enter the elements path, then use Tab and Shift+Tab to move between the elements path items and Space or Enter to select them.
- Use Ctrl+L to open the Link dialog window.
- Use Ctrl+B, Ctrl+I and Ctrl+U for bold, italic and underline formatting, respectively.
Related Features
- Accessibility Support – Page Navigation Using the "Tab" Key
- Accessibility Support – Managing Content Accessibility with Accessibility Checker
- Styling and Formatting – Creating Multilingual Content
Get Sample Source Code
- Accessibility support and keyboard shortcuts
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="robots" content="noindex, nofollow"> <title>Accessibility support and keyboard shortcuts</title> <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script> </head> <body> <textarea cols="80" id="editor1" name="editor1" rows="10"><p>This is some <strong>sample text</strong>. You are using <a href="https://ckeditor.com/">CKEditor</a>.</p></textarea> <script> CKEDITOR.replace('editor1', { height: 500, removeButtons: 'PasteFromWord' }); </script> </body> </html>