Custom Quick Fixes in Accessibility Checker

This feature is provided through optional plugins (Accessibility Checker and Balloon Panel) that are not included in the CKEditor 4 presets available from the Download site and need to be added to your custom build with online builder.

Accessibility Checker is available under a GPL or commercial license. Contact us for more details.

Note: The following instructions work starting with Accessibility Checker 1.1.1 version.

Before reading this guide please make sure you read the Creating Custom Issue Types guide.

To register a custom Quick Fix you need to:

Register the Quick Fix type (class) - this defines the Quick Fix logic.
Bind the Quick Fix with Issue IDs - so that Accessibility Checker knows that a given Quick Fix applies to a particular issue type.

Quick Fixes are stored as JavaScript types in the static CKEDITOR.plugins.a11ychecker.quickFixes namespace. A new Quick Fix type must extend the base QuickFix (or inheriting) type.

# Sample Code

The code below adds a simple issue for each <strong> element. It suggests changing it into an <em> element.

The Quick Fix does the transformation for the user.

Note that this Quick Fix extends the ElementReplace type, to avoid repeating the logic.

var config = {
    height: 150,

    on: {
        instanceReady: function() {
            var editor = this,
                a11ychecker = editor._.a11ychecker;

            // Depending on whether it is a dev version or not, AC might not be available yet (#246).
            if ( a11ychecker.exec ) {
                a11yCheckerReady( editor )
            } else {
                a11ychecker.once( 'loaded', function() {
                    a11yCheckerReady( editor );
                } );
            }

            function a11yCheckerReady( editor ) {
                var a11ychecker = editor._.a11ychecker,
                    a11ycheckerStatic = CKEDITOR.plugins.a11ychecker;

                // Register Quick Fix.
                a11ycheckerStatic.quickFixes.get( {
                    name: 'ElementReplace',
                    callback: function( ElementReplace ) {
                        /**
                         * Replaces `<strong>` elements with `<em>`.
                         *
                         * @member CKEDITOR.plugins.a11ychecker.ElementReplace
                         * @class StrongReplace
                         * @constructor
                         * @param {CKEDITOR.plugins.a11ychecker.Issue} issue
                         */
                        function StrongReplace( issue ) {
                            ElementReplace.call( this, issue );
                        }

                        StrongReplace.prototype = new ElementReplace();
                        StrongReplace.prototype.constructor = StrongReplace;

                        /**
                         * Returns the name of the tag that `issue.element` should be converted to.
                         *
                         * @member CKEDITOR.plugins.a11ychecker.ElementReplace.StrongReplace
                         * @param {Object} formAttributes Form attributes from `fix` method.
                         * @returns {String}
                         */
                        StrongReplace.prototype.getTargetName = function( formAttributes ) {
                            return 'em';
                        };

                        a11ycheckerStatic.quickFixes.add( 'StrongReplace', StrongReplace );
                    }
                } );

                // Bind Quick Fix.
                a11ychecker.engine.fixesMapping.avoidStrongs = [ 'StrongReplace' ];

                a11ychecker.engine.on( 'process', function( evt ) {
                    var Issue = a11ycheckerStatic.Issue,
                        strongs = evt.data.contentElement.find( 'strong' ),
                        issues = evt.data.issues;

                    a11ychecker.engine.issueDetails.avoidStrongs = {
                        title: 'Avoid strongs',
                        descr: 'Our customers do not like <strong>strongs</strong>, use <em>emphasize</em> instead 😉'
                    }

                    CKEDITOR.tools.array.forEach( strongs.toArray(), function( strong ) {
                        issues.addItem( new Issue( {
                            originalElement: strong,
                            testability: Issue.testability.ERROR,
                            id: 'avoidStrongs'
                        }, a11ychecker.engine ) );
                    } );
                } );
            };
        }
    }
}

Refer to the following resources for more information about Accessibility Checker:

The Managing Content Accessibility with Accessibility Checker article explains how Accessibility Checker works.
The Custom Issue Types in Accessibility Checker article shows how to add custom issue types.

Custom Quick Fixes in Accessibility Checker

# Sample Code

# Related Features