CKEditor Accessibility Checker

About

CKSource has created an Accessibility Checker that lets you inspect the accessibility level of content created in CKEditor and immediately solve any accessibility issues that are found.  This checker makes use of the QUAIL jQuery plugin (which is included).

 

Video demonstrating the integration in Sakai

 
 
CKSource also has a working demo of the Accessibility Checker on their website https://cksource.com/ckeditor/services#accessibility-checker 

 

Guide to installing CKSource Accessibility Checker Plugin

 The CKSource Accessibility Checker Plugin is available commercially or as a GPL licensed work.  It is not available in a license that can be distributed alongside Sakai’s ECL2 license.  Individuals are free to combine these two great products for their use, just not for redistribution together.

Step 1. Obtain CK Source Accessibility Checker

Download a copy of the the checker from http://ckeditor.com/addon/a11ychecker

You will also need a copy of the balloonpanel plugin which can be obtained from http://ckeditor.com/addon/panel 

Step 2. Deploy

Deploy the zip files to webapps/library/editor/ckextraplugins/ by uncompressing all files in the archive "a11ychecker" and "balloonpanel" zip archives. The process should create a folder for both “a11ychecker” and “balloonpanel”.

Step 3. Make Sakai 10 Modifications (Sakai 11 should be able to skip sub-steps 1-3)


  1. Edit the file a11ychecker/plugin.js

  2. At the top of the file add the following to ensure jQuery is always available

    function loadjQueryLibraries() {if (typeof(jQuery) === 'undefined') {CKEDITOR.scriptLoader.load('//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js', function() {jQuery.noConflict();})}}
    
  3. Search the (compressed) file for the text
     

    onLoad:function(){
    
    Replace this text with
    onLoad:function(){loadjQueryLibraries();
  4. Edit ckeditor.launch.js. Around line 110 add to the toolbar ['A11ychecker'],   For example
     

              ['A11ychecker'],
               '/',
               ['Styles','Format','Font','FontSize'],
  5. Around line 175 with other CKEDITOR.plugins.addExternal add:

          CKEDITOR.plugins.addExternal('a11ychecker',basePath+'a11ychecker/', 'plugin.js');
          CKEDITOR.plugins.addExternal('balloonpanel',basePath+'balloonpanel/', 'plugin.js');
  6. Around line 190 modify ckconfig.extraPlugins and add a11ychecker to the end so it may look like this:
     

              ckconfig.extraPlugins+="audiorecorder,movieplayer,wordcount,fmath_formula,a11ychecker";
    

Step 4. Refresh and Test

 The modified files are likely to be cached by web browsers.  User web browsers need to have their caches expire or naturally expire.


Build Automatically

This plugin can be included in your Sakai build with the following command

mvn -Pckeditor-extras install sakai:deploy

There are more details in  SAK-32075 - Getting issue details... STATUS