Contribute to this guideReport an issue

Accessibility Support and Keyboard Shortcuts Documentation

CKEditor is compliant with several accessibility standards, including WCAG, Section 508 and WAI-ARIA. It is easy to use in High Contrast Mode and with assisstive technologies like screen readers.

CKEditor 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 article explains CKEditor compliance with most important standards and supported platforms as well as gives an overview of some accessibility-related features that are implemented in CKEditor. You can test them in the editor instance below.

Additionally, check the new Accessibility Checker plugin introduced in CKEditor 4.6. It is an innovative tool that lets you inspect the content created in the editor and fix any accessibility issues that are found — often fully automatically.

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.
The Accessibility Support dialog window is provided through the Accessibility Help plugin which by default is available in the Standard and Full distributions.

Related Features

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.11.1/standard-all/ckeditor.js"></script>
    </head>
    
    <body>
      <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
      <script>
        CKEDITOR.replace('editor1', {
          height: 500
        });
      </script>
    </body>
    
    </html>