Accessibility support
CKEditor 5 incorporates various accessibility features, including keyboard navigation, screen reader support (ARIA attributes), and robust semantic output markup. This guide provides a detailed overview and presents the current status of editor accessibility.
# Conformance with WCAG 2.x and Section 508
CKEditor 5 is compliant with Web Content Accessibility Guidelines 2.2 (WCAG) 2.2 levels A and AA and Section 508 of the Rehabilitation Act unless stated otherwise in the Accessibility Conformance Report.
- Web Content Accessibility Guidelines 2.2 (WCAG) provides international standards for making web content accessible to individuals with disabilities, ensuring that web applications are perceivable, operable, understandable, and robust for all users.
- Section 508 of the Rehabilitation Act mandates that federal agencies’ electronic and information technology is accessible to people with disabilities, establishing guidelines to achieve this goal.
CKEditor 5 strives for conformance with these standards and we welcome your feedback on the accessibility of our software.
# Recommended software
For optimal screen reader experience, we recommend using Google Chrome and NVDA (Windows) or Safari and VoiceOver (macOS).
# Accessibility Conformance Report (VPAT)
In our ongoing commitment to accessibility, we provide a report based on the ITI Voluntary Product Accessibility Template (VPAT®), a standardized format for evaluating the accessibility of computer software. This document serves as a comprehensive resource detailing the accessibility features of CKEditor 5, including compliance with accessibility standards and guidelines: Web Content Accessibility Guidelines 2.2 (WCAG) 2.2 levels A and AA and Section 508 of the Rehabilitation Act.
We continuously update the VPAT® report to reflect any changes or improvements. You can download the latest version of the VPAT® document below.
# Keyboard shortcuts
CKEditor 5 supports various keyboard shortcuts that boost productivity and provide necessary accessibility to screen reader users.
Keyboard support is enabled by default for all editor types and core editor features.
Below is a list of the most important keystrokes supported by CKEditor 5 and its features.
# Content editing keystrokes
These keyboard shortcuts allow for quick access to content editing features.
| Action | PC | Mac |
|---|---|---|
| Insert a hard break (a new paragraph) | Enter | |
Insert a soft break (a <br> element) |
Shift+Enter | ⇧Enter |
| Copy selected content | Ctrl+C | ⌘C |
| Paste content | Ctrl+V | ⌘V |
| Paste content as plain text | Ctrl+Shift+V | ⌘⇧V |
| Undo | Ctrl+Z | ⌘Z |
| Redo | Ctrl+Y, Ctrl+Shift+Z | ⌘Y, ⌘⇧Z |
| Bold text | Ctrl+B | ⌘B |
| Change text case | Shift+F3 | ⇧F3 (may require Fn) |
| Create link | Ctrl+K | ⌘K |
| Move out of a link | ←←, →→ | |
| Move out of an inline code style | ←←, →→ | |
| Select all | Ctrl+A | ⌘A |
| Find in the document | Ctrl+F | ⌘F |
| Italic text | Ctrl+I | ⌘I |
| Strikethrough text | Ctrl+Shift+X | ⌘⇧X |
| Underline text | Ctrl+U | ⌘U |
| Revert autoformatting action | Backspace | |
# Keystrokes that can be used when a widget is selected (such as image, table, etc.)
| Action | PC | Mac |
|---|---|---|
| Insert a new paragraph directly after a widget | Enter | |
| Insert a new paragraph directly before a widget | Shift+Enter | ⇧Enter |
| Move the caret to allow typing directly before a widget | ↑, ← | |
| Move the caret to allow typing directly after a widget | ↓, → | |
| After entering a nested editable, move the selection to the closest ancestor widget. For example: move from an image caption to the whole image widget. | Tab then Esc | |
# Keystrokes that can be used in a list
| Action | PC | Mac |
|---|---|---|
| Increase list item indent | ⇥ | |
| Decrease list item indent | Shift+⇥ | ⇧⇥ |
# Keystrokes for navigating through documents
| Action | PC | Mac |
|---|---|---|
| Go to the previous page (also move selection) | Shift+Page Up | ⇧Page Up (may require Fn) |
| Go to the next page (also move selection) | Shift+Page Down | ⇧Page Down (may require Fn) |
# Keystrokes that can be used in a table cell
| Action | PC | Mac |
|---|---|---|
| Move the selection to the next cell | ⇥ | |
| Move the selection to the previous cell | Shift+⇥ | ⇧⇥ |
| Insert a new table row (when in the last cell of a table) | ⇥ | |
| Navigate through the table | ↑, →, ↓, ← | |
# User interface and content navigation keystrokes
Use the following keystrokes for more efficient navigation in the CKEditor 5 user interface.
| Action | PC | Mac |
|---|---|---|
| Close contextual balloons, dropdowns, and dialogs | Esc | |
| Open the accessibility help dialog | Alt+0 | ⌥0 |
| Move focus between form fields (inputs, buttons, etc.) | ⇥, Shift+⇥ | ⇥, ⇧⇥ |
| Move focus to the toolbar, navigate between toolbars | Alt+F10 | ⌥F10 (may require Fn) |
| Navigate through the toolbar or menu bar | ↑, →, ↓, ← | |
| Navigate to the next focusable field or an element outside the editor | Tab, Shift+Tab | |
| Execute the currently focused button. Executing buttons that interact with the editor content moves the focus back to the content. | Enter, Space | |
| Move focus to the menu bar, navigate between menu bars | Alt+F9 | ⌥F9 (may require Fn) |
| Move focus in and out of an active dialog window | Ctrl+F6 | ⌘F6 (may require Fn) |
# Displaying keyboard shortcuts in the editor
CKEditor 5 offers a dedicated Accessibility help plugin that displays a list of all available keyboard shortcuts in a dialog. It can be opened by pressing Alt + 0 (on Windows) or ⌥0 (on macOS). Alternatively, you can use the toolbar button to open the dialog.
Press Alt+0 (⌥0 on Mac) while editing to display the list of available keyboard shortcuts.
The Accessibility help plugin is enabled by the Essentials plugin from the @ckeditor/ckeditor5-essentials package (which also enables other common editing features).
Learn how integrators can add keyboard shortcuts to their features and supply shortcut information to the Accessibility help dialog.
# Accessibility feedback and bugs
We welcome your feedback on the accessibility of CKEditor 5. You can find the current list of accessibility issues on GitHub. Learn how to report issues.
Every day, we work hard to keep our documentation complete. Have you spotted outdated information? Is something missing? Please report it via our issue tracker.