CKEditor Ecosystem Documentation
Search
Home/CKEditor 5/API
Class

Accessibility (core)

@ckeditor/ckeditor5-core/src/accessibility

class
See source

A common namespace for various accessibility features of the editor.

Information about editor keystrokes

Filtering

Properties

  • readonly

    keystrokeInfos : KeystrokeInfos

    See source

    Stores information about keystrokes brought by editor features for the users to interact with the editor, mainly keystroke combinations and their accessible labels.

    This information is particularly useful for screen reader and other assistive technology users. It gets displayed by the Accessibility help dialog.

    Keystrokes are organized in categories and groups. They can be added using (addKeystrokeInfoCategory, addKeystrokeInfoGroup, and addKeystrokeInfos) methods.

    Please note that:

    • two categories are always available:
      • 'contentEditing' for keystrokes related to content creation,
      • 'navigation' for keystrokes related to navigation in the UI and the content.
    • unless specified otherwise, new keystrokes are added into the 'contentEditing' category and the 'common' keystroke group within that category while using the addKeystrokeInfos method.

  • private readonly

    _editor : Editor

    See source

    The editor instance.

Methods

  • constructor( editor )

    See source

    Parameters

    editor : Editor

  • addKeystrokeInfoCategory( __namedParameters ) → void

    See source

    Adds a top-level category in the keystroke information database with a label and optional description.

    Categories organize keystrokes and help users to find the right keystroke. Each category can have multiple groups of keystrokes that narrow down the context in which the keystrokes are available. Every keystroke category comes with a 'common' group by default.

    By default, two categories are available:

    • 'contentEditing' for keystrokes related to content creation,
    • 'navigation' for keystrokes related to navigation in the UI and the content.

    To create a new keystroke category with new groups, use the following code:

    class MyPlugin extends Plugin {
	// ...
	init() {
		const editor = this.editor;
		const t = editor.t;

		// ...

		editor.accessibility.addKeystrokeInfoCategory( {
			id: 'myCategory',
			label: t( 'My category' ),
			description: t( 'My category description.' ),
			groups: [
				{
					id: 'myGroup',
					label: t( 'My keystroke group' ),
					keystrokes: [
						{
							label: t( 'Keystroke label 1' ),
							keystroke: 'Ctrl+Shift+N'
						},
						{
							label: t( 'Keystroke label 2' ),
							keystroke: 'Ctrl+Shift+M'
						}
					]
				}
			]
		};
	}
}

    See keystrokeInfos, addKeystrokeInfoGroup, and addKeystrokeInfos.

    Parameters

    __namedParameters : AddKeystrokeInfoCategoryData

    Returns

    void

  • addKeystrokeInfoGroup( __namedParameters ) → void

    See source

    Adds a group of keystrokes in a specific category to the keystroke information database.

    Groups narrow down the context in which the keystrokes are available. When categoryId is not specified, the group goes to the 'contentEditing' category (default).

    To create a new group within an existing category, use the following code:

    class MyPlugin extends Plugin {
	// ...
	init() {
		const editor = this.editor;
		const t = editor.t;

		// ...

		editor.accessibility.addKeystrokeInfoGroup( {
			id: 'myGroup',
			categoryId: 'navigation',
			label: t( 'My keystroke group' ),
			keystrokes: [
				{
					label: t( 'Keystroke label 1' ),
					keystroke: 'Ctrl+Shift+N'
				},
				{
					label: t( 'Keystroke label 2' ),
					keystroke: 'Ctrl+Shift+M'
				}
			]
		} );
	}
}

    See keystrokeInfos, addKeystrokeInfoCategory, and addKeystrokeInfos.

    Parameters

    __namedParameters : AddKeystrokeInfoGroupData

    Returns

    void

  • addKeystrokeInfos( __namedParameters ) → void

    See source

    Adds information about keystrokes to the keystroke information database.

    Keystrokes without specified groupId or categoryId go to the 'common' group in the 'contentEditing' category (default).

    To add a keystroke brought by your plugin (using default group and category), use the following code:

    class MyPlugin extends Plugin {
	// ...
	init() {
		const editor = this.editor;
		const t = editor.t;

		// ...

		editor.accessibility.addKeystrokeInfos( {
			keystrokes: [
				{
					label: t( 'Keystroke label' ),
					keystroke: 'CTRL+B'
				}
			]
		} );
	}
}

    To add a keystroke in a specific existing 'widget' group in the default 'contentEditing' category:

    class MyPlugin extends Plugin {
	// ...
	init() {
		const editor = this.editor;
		const t = editor.t;

		// ...

		editor.accessibility.addKeystrokeInfos( {
			// Add a keystroke to the existing "widget" group.
			groupId: 'widget',
			keystrokes: [
				{
					label: t( 'A an action on a selected widget' ),
					keystroke: 'Ctrl+D',
				}
			]
		} );
	}
}

    To add a keystroke to another existing category (using default group):

    class MyPlugin extends Plugin {
	// ...
	init() {
		const editor = this.editor;
		const t = editor.t;

		// ...

		editor.accessibility.addKeystrokeInfos( {
			// Add keystrokes to the "navigation" category (one of defaults).
			categoryId: 'navigation',
			keystrokes: [
				{
					label: t( 'Keystroke label' ),
					keystroke: 'CTRL+B'
				}
			]
		} );
	}
}

    See keystrokeInfos, addKeystrokeInfoGroup, and addKeystrokeInfoCategory.

    Parameters

    __namedParameters : AddKeystrokeInfosData

    Returns

    void