This plugin adds the Character Style menu button to the editor toolbar, which enables you to add and remove inline character styling to the text content of your web document.
This plugin is a replacement for the Styles Combo plugin, and is intended to be used in conjunction with the A11yFirst Heading / Paragraph plugin.
How does the visual styling of your document contribute to its accessibility for people with disabilities?
The use of this plugin together with the Heading / Paragraph plugin separates block formats and inline styling into two separate toolbar menus. This separation benefits authors by presenting them with two logically distinct menus where the actions of each have different implications.
Block formats such as headings and lists, carry with them semantics that enhance document accessibility by making metadata available to screen reader users. For example, when a heading is encountered, its heading level in the hierarchy of available levels is communicated; when a list is encountered, the number of items it contains is announced.
Character styling, on the other hand, is primarily visual, and does not always contribute to accessibility. For example, the use of bold and italic styling may not translate to anything meaningful for screen reader users.
By separating block formats from inline styling, the proper use of each is encouraged, which can result in web documents that are more accessible.
Inline Character Styles
The Character Style plugin applies an inline styling element to selected text or, if no text is selected, toggles on the selected character style until the author switches to a different style or a new line is inserted.
The default set of character styles include:
- Strong (strong)
- Emphasis (em)
- Marker (marker)
- Inline quotation (q)
- Cited work (cite)
- Computer code (code)
- Subscript (sub)
- Superscript (sup)
- Deleted Text (del)
- Inserted Text (ins)
NOTE: The set of character styles can be customized through configuration settings and should only contain inline elements.
The "Remove Styles" menu option removes the character styling of the text containing the insert cursor. If the text containing the insert cursor does not have any inline styling no action is taken.
The help command opens the A11yFirst Help plugin option to provide additional information to the authors to help them understand the accessibility issues related to using inline styling of text content.
NOTE: The help feature is dependent on the A11yFirst Help plugin being installed.
The recommended way to install all CKEditor add-ons is to create a custom build by using Online builder. To do that, click the Add to my editor button on the plugin page. When you are done, click the Build my editor button on the right side of the page to go to Online builder.
Note: This add-on is already selected to be a part of your current build.
Add-on installation instructions
If you want to add the plugin manually, you will need to:
- Extract the downloaded plugin
pluginsfolder of your CKEditor installation. Example:
- Enable the plugin by using the
extraPluginsconfiguration setting. Example:
config.extraPlugins = 'a11ystylescombo';
- Download and configure all its dependencies, too.
Note: The plugin may have additional requirements. Check the add-on page and documentation for more details.