A11yFirst Help

This plugin adds the A11yFirst Help menu button to the editor toolbar, which launches a dialog box that provides explanatory text on topics that help authors understand the accessibility issues of editing web documents.

It compliments and provides specific information on the use of the full suite of A11yFirst plugins: Heading / Paragraph, Character Style, A11yFirst Image and A11yFirst Link.

Overview

Each of the A11yFirst plugins embodies a new approach to authoring accessible web documents. Rather than relying upon a reactive model that detects problems after they exist, the A11yFirst approach is proactive. It enables authors to create content that is accessible during the authoring process, by providing feedback and validation on a feature-by-feature basis.

For example, once an author becomes familiar with the requirements for, say, adding images to documents, it becomes second nature to provide alternative text when the image is added, and to consider whether the image needs a longer description in the document.

Features

The A11yFirst Help dialog box contains the following information:

  • How to get started using A11yFirst for CKEditor and why accessibility is important

  • How to work with the A11yFirst features, as well as a few of the standard features included in CKEditor that are important for accessibility

  • The purpose of, and contributors to, the A11yFirst Project

In particular, it includes the following topics and subtopics:

Heading / Paragraph

  • Menu items
  • About headings
  • About paragraph formats
  • Why headings and paragraph formats are important
  • More information

List

  • Working with lists
  • List properties via context menu
  • About lists
  • Why lists are important

Image

  • Accessible image descriptions
  • Alternative text
  • Long descriptions for complex images
  • Adding a long description in the document
  • Insert a caption text box below the image
  • Writing effective alternative text
  • Why image descriptions are important
  • More information

Character Style

  • Working with character styles
  • About character styles
  • Character styles vs. headings, lists and paragraph formats

Link

  • Display Text
  • About links
  • Why links are important
  • More information

Getting Started

  • What is A11yFirst?
  • Commitment to accessibility
  • Document accessibility
  • A different way of thinking

About A11yFirst

  • Project Description & Goals
  • Project Information
  • Contributors
  • Sponsors
  • Acknowledgements

 

a11yfirsthelp

360 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 1.2.3

DownloadRelease notes

v1.2.3 — 16 Sep 2019

Updates

  • Toolbar button tooltips

    • Added 'A11yFirst' prefix to 'Image' and 'Link' tooltips to differentiate them from standard plugins.
  • Changed default toolbar groups to existing groups that are used by Builder, to fix problem with two plugins not showing up in default toolbar:

    • 'Heading' button default group is 'paragraph'
    • 'A11yFirstHelp' button default group is 'mode'
  • Character Styles plugin

    • Updated list of default styles by removing 'u' and 'strike', which seem redundant when 'ins' and 'del' are also in the list.
  • A11yFirst Link plugin

    • Updated styling of 'Help' button to match A11yFirst Image
  • Created A11yFirst Documentation Wiki website that includes the following four pages:

 

A11yFirst Link

This plugin adds the A11yFirst Link button to the editor toolbar. It provides authors with features for ensuring that the display text of a link is accessible for people with disabilities.

It is a replacement for the standard Link plugin.

Overview

The A11yFirst Link plugin has all the features of the standard Link plugin, but adds additional validation of the link display text to check for common accessibility issues.

For example, the plugin checks for display text that does not describe the target of the link, e.g "click here", "more", etc.

It prompts the author when a URL is used as the display text, as they are typically not very descriptive of the link target. However, they are allowed through a confirm dialog box, which warns the user of the accessibility problems of using the URL.

In general, this plugin helps authors understand the importance of display text in describing the target of a link as accurately and succinctly as possible.

Features

Display Text Validation

  • Does not allow empty Display Text
  • Does not default to using the URL as the Display Text
  • Warns when a URL is used as the Display Text
  • Detects the use of ‘click here,’ ‘more’ et al.

Help

The help command opens the A11yFirst Help plugin option to help authors learn more about the accessibility issues related to the display text for links and the importance of descriptive display text.

NOTE: The help feature is dependent on the A11yFirst Help plugin being installed.

 

a11ylink

293 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 1.2.3

DownloadRelease notes

v1.2.3 — 16 Sep 2019

Updates

  • Toolbar button tooltips

    • Added 'A11yFirst' prefix to 'Image' and 'Link' tooltips to differentiate them from standard plugins.
  • Changed default toolbar groups to existing groups that are used by Builder, to fix problem with two plugins not showing up in default toolbar:

    • 'Heading' button default group is 'paragraph'
    • 'A11yFirstHelp' button default group is 'mode'
  • Character Styles plugin

    • Updated list of default styles by removing 'u' and 'strike', which seem redundant when 'ins' and 'del' are also in the list.
  • A11yFirst Link plugin

    • Updated styling of 'Help' button to match A11yFirst Image
  • Created A11yFirst Documentation Wiki website that includes the following four pages:

 

A11yFirst Image

This plugin adds the A11yFirst Image button to the editor toolbar. It provides authors with additional features for ensuring image accessibility for people with disabilities.

It is a replacement for the standard Image and Enhanced Image plugins.

Overview

The A11yFirst Image plugin is a modification of the Enhanced Image (image2) plugin to include important accessibility features for validating Alternative Text and allowing the author to identify the location within the document of a longer description of the image.

People with visual impairments need descriptions of informative images to understand the purpose of the image. Each informative image must at least have Alternative Text and may require a longer description, especially if the image is a chart or graph.

Alternative Text should be succinct and should not include redundant or irrelevant information (e.g. "image of .."). An image that is purely decorative should have empty Alternative Text, but since this is rare the plugin requires the author to confirm that the image is purely decorative.

A complex informative image should have a long description in the page, adjacent to the image. The plugin provides a way for the author to provide a reference to the location of the long description in the page, which can provide a more semantically meaningful description. For example, a table may be provided that includes the data used to generate a chart or graph.

Features

Alternative Text Validation

The following conditions for Alternative Text are checked:

  • Empty
  • More than 100 char. in length
  • Starts with the phrases ‘image of,’ ‘photo of’ et al.
  • Includes file name or size
  • For a decorative image, allows the user to confirm that Alternative Text is not required

Identifying Long Description

A select box allows the author to indicate if a longer description of the image exists in the document, and if so, its location (i.e. before, after or before and after the location of the image in the document).

Help

The help command opens a dialog box that contains information to help authors learn more about the accessibility issues related creating alternative text and long descriptions.

NOTE: The help feature is dependent on the A11yFirst Help plugin being installed.

 

a11yimage

333 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 1.2.3

DownloadRelease notes

v1.2.3 — 16 Sep 2019

Updates

  • Toolbar button tooltips

    • Added 'A11yFirst' prefix to 'Image' and 'Link' tooltips to differentiate them from standard plugins.
  • Changed default toolbar groups to existing groups that are used by Builder, to fix problem with two plugins not showing up in default toolbar:

    • 'Heading' button default group is 'paragraph'
    • 'A11yFirstHelp' button default group is 'mode'
  • Character Styles plugin

    • Updated list of default styles by removing 'u' and 'strike', which seem redundant when 'ins' and 'del' are also in the list.
  • A11yFirst Link plugin

    • Updated styling of 'Help' button to match A11yFirst Image
  • Created A11yFirst Documentation Wiki website that includes the following four pages:

 

A11yFirst Character Style

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.

Overview

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.

Features

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.

Remove Styles

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.

Help

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.

a11ystylescombo

375 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 1.2.3

DownloadRelease notes

v1.2.3 — 16 Sep 2019

Updates

  • Toolbar button tooltips

    • Added 'A11yFirst' prefix to 'Image' and 'Link' tooltips to differentiate them from standard plugins.
  • Changed default toolbar groups to existing groups that are used by Builder, to fix problem with two plugins not showing up in default toolbar:

    • 'Heading' button default group is 'paragraph'
    • 'A11yFirstHelp' button default group is 'mode'
  • Character Styles plugin

    • Updated list of default styles by removing 'u' and 'strike', which seem redundant when 'ins' and 'del' are also in the list.
  • A11yFirst Link plugin

    • Updated styling of 'Help' button to match A11yFirst Image
  • Created A11yFirst Documentation Wiki website that includes the following four pages:

 

A11yFirst Heading / Paragraph

This plugin adds the Heading / Paragraph menu button to the editor toolbar, which supports authors in the proper use of headings and other block-level paragraph formats within web documents.

It is a replacement for the Format plugin, and is intended to be used in conjunction with the A11yFirst Character Style plugin.

Overview

What makes a web document accessible to people with disabilities? One important requirement involves the use of headings (h1, h2, h3, etc.), which add structure to your document by hierarchically labeling and grouping its content sections and subsections.

The presence of properly nested headings allows screen reader users to obtain a list of headings in the form of an outline, which in turn allows them to quickly and easily identify the types of content in the document, in the same way that sighted users can visually scan the headings in the document for the same purpose.

Features

The Heading / Paragraph plugin supports the proper use of headings via the following features:

  • Headings are made prominent by appearing first in the Heading / Paragraph menu.
  • Only heading levels that result in proper nesting are enabled in the menu (based on cursor position).
  • The heading menu items indicate the typical usage for various heading levels, for example:
    • H1 - Document title
    • H2 - Section title
    • H3 - Subsection title
  • The distraction of styling the heading menu items with different font sizes is avoided. All are styled the same, which reinforces their use as structural elements rather than for their visual effect.
  • The menu includes a Help item, described below.

Help

Selecting the Help menu item opens the A11yFirst Help dialog, which provides information to help authors better understand the accessibility issues related to headings and other block level elements.

NOTE: The Help feature is dependent on the A11yFirst Help plugin being installed.

 

a11yheading

399 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 1.2.3

DownloadRelease notes

v1.2.3 — 16 Sep 2019

Updates

  • Toolbar button tooltips

    • Added 'A11yFirst' prefix to 'Image' and 'Link' tooltips to differentiate them from standard plugins.
  • Changed default toolbar groups to existing groups that are used by Builder, to fix problem with two plugins not showing up in default toolbar:

    • 'Heading' button default group is 'paragraph'
    • 'A11yFirstHelp' button default group is 'mode'
  • Character Styles plugin

    • Updated list of default styles by removing 'u' and 'strike', which seem redundant when 'ins' and 'del' are also in the list.
  • A11yFirst Link plugin

    • Updated styling of 'Help' button to match A11yFirst Image
  • Created A11yFirst Documentation Wiki website that includes the following four pages:

 

Widget Context Menu

A CKEditor plugin which makes it possible to edit, copy and remove widgets using the right click context menu. This overcomes the problems of some widgets that are difficult to select. The name of the widget in the context menu is the title of the outer element, if that does not exist it shows the name of the widget.

Configuration

By default no configuration is required. To disable commands use any of the following config settings:

config.widgetcontextmenu_edit = false;
config.widgetcontextmenu_copy = false;
config.widgetcontextmenu_remove = false;

Dependencies:

  1. Context Menu Plugin (http://ckeditor.com/cke4/addon/contextmenu)
  2. Widget Plugin (http://ckeditor.com/cke4/addon/widget)

Installation:

  • Add the widget to your CKEditor build 

OR

  • Extract the downloaded file into the CKEditor’s plugins folder.
  • Enable the plugin by changing or adding the extraPlugins line in your configuration (config.js): config.extraPlugins = 'widgetcontextmenu'; 

Screenshots

widgetcontextmenu

6,869 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 1.13

DownloadRelease notes

Added Copy command and added config settings

FMath Editor

Mathematics on web.  

"FMath Editor" is a WYSIWYG formula editor (an equations editor).

It is based  ONLY on JavaScript, so it runs on any browser.

Screenshots

FMathEditor

16,356 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 3.3

DownloadRelease notes

ChangesL:
     - add theme selection in View menu;
     - add "table" properties;
     - add "image" properties;
     - solve known bugs;

 

How to install:

1. Download the package and unzip the content in folder plugins.

The folder structure must be plugins/FMathEditor/dialogs/...

2. Add in config.js the line

config.extraPlugins='FMathEditor';

Accessibility Checker

Accessibility Checker is an innovative solution that lets you inspect the accessibility level of content created in CKEditor and immediately solve any accessibility issues that are found.

It is built upon three key elements:

  • User Interface optimized for quick problem solving.
  • Flexibility allowing you to use the accessibility checking engine of your choice.
  • Quick Fix feature letting you fix common problems fully automatically!

The default implementation uses Quail as its accessibility tests library, but you can integrate any other similar library to achieve comparable results.

Requirements:

  • CKEditor 4.3+.
  • Balloon Panel plugin.
  • jQuery 1.x or later to run Quail.

 

a11ychecker

17,645 downloads (view stats)

This is an official plugin provided and supported by CKEditor developers.

You can submit bug reports directly to its GitHub issues tracker and discuss any integration issues on StackOverflow.

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 1.1.1

DownloadRelease notes

New Features:

  • #240: Added Brazilian Portuguese localization. Thanks to Guilherme Alves!
  • #247: Introduced the process event in the Engine type, allowing for adding custom issue types.

Fixed Issues:

  • #233: Fixed: Balloon classes are localized, causing issues of a different testability to look the same.

Easy Keymap

A plugin for custom keymap and keyboard shortcut action. This plugin can be configured to insert special charecter using shortcut or call a function for a specific keystrok. The plugin will not override any registered keystrok in keystrokhandler.

easykeymap

8,524 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 1.2

DownloadRelease notes

Add key code in callback function

Dropdown menu manager

Dropdown menu manager

This plugin adds the feature to describe with the help of the CKEditor's configuration various dropdowns and populate them with desirable items.

Configuration example
 config.dropdownmenumanager={
        'Widgets': {
          items: [{
            name: 'textWidget',
            label: 'Text Widget',
            command: 'theCommandExecutedOnClick',
            order: 1
            }],
          label: {
            text: 'Widgets',
            width: 45
          },
          iconPath:'/images/widgetIcon.png'
        },
 };

To add the dropdowns on the toolbar use the keys in the 'config.dropdownmenumanager' object , in this case: 'Widgets'

Simple toolbar:

 config.toolbar = [
    ['Widgets']
  ];

In order to show the dropdown menu's label you should not use the default CKEditor iframe functionallity.

dropdownmenumanager

15,787 downloads (view stats)

Releases

Plugin versions CKEditor versions
4.13 4.12 4.11

Version: 2.1.0

DownloadRelease notes

Twitter Facebook Facebook Instagram Medium Linkedin GitHub Arrow down Phone Menu Close icon Check