CKEditor Ecosystem Documentation
Search
Contribute to this guideReport an issue
Home/CKEditor 4/Examples

Managing Content Accessibility with Accessibility Checker Documentation

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

This solution is based on two optional plugins (Accessibility Checker and Balloon Panel) that you can install with CKBuilder. By default, it uses Quail as its accessibility tests library, but you can integrate any other similar library to achieve comparable results.

Accessibility Checker is available under a GPL or commercial license. Contact us for more details.
Quail, the default accessibility tests library, requires jQuery 1.x or later to run. You thus need to add jQuery to any site that is going to use Accessibility Checker.

When the Accessibility Checker plugin is enabled, the   button is automatically added to the toolbar. Once clicked, it starts checking your content for accessibility issues as defined in the tests library. All issues become highlighted and the Accessibility Checker panel will let you not only navigate through them, but also fix them as you go. Thanks to the Quick Fix feature you can correct common problems directly in the panel, sometimes with just one click of a button!

Accessibility Checker comes with good keyboard support. A complete list of all supported keyboard shortcuts is available here.

Related Features

Get Sample Source Code

  • Accessibility Checker 
    <!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="robots" content="noindex, nofollow">
  <title>Accessibility Checker</title>
  <script src="https://cdn.ckeditor.com/4.25.0-lts/standard-all/ckeditor.js"></script>
</head>

<body>
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
  <textarea cols="80" id="editor1" name="editor1" rows="10">&lt;p&gt;This is some &lt;strong&gt;sample text&lt;/strong&gt;. You are using &lt;a href=&quot;https://ckeditor.com/&quot;&gt;CKEditor&lt;/a&gt;.&lt;/p&gt;</textarea>
  <script>
    CKEDITOR.plugins.addExternal('a11ychecker', 'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/plugins/a11ychecker/', 'plugin.js');

    // Performance optimization:
    // Send a request for tests JSON file ASAP, so it's likely to be ready when the user runs Acessibility Checker.
    $.getJSON('https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/plugins/a11ychecker/libs/quail/tests.json');

    CKEDITOR.replace('editor1', {
      extraPlugins: 'a11ychecker',
      removePlugins: 'scayt',
      height: 500,
      a11ychecker_quailParams: {
        jsonPath: 'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/plugins/a11ychecker/libs/quail',
        // Override Accessibility Checker guidelines from the default configuration.
        guideline: [
          'imgNonDecorativeHasAlt',
          'imgImportantNoSpacerAlt',
          'aTitleDescribesDestination',
          'aAdjacentWithSameResourceShouldBeCombined',
          'aImgAltNotRepetitive',
          'aMustNotHaveJavascriptHref',
          'aSuspiciousLinkText',
          'blockquoteNotUsedForIndentation',
          'documentVisualListsAreMarkedUp',
          'headerH1',
          'headerH2',
          'headerH3',
          'headerH4',
          'imgAltIsDifferent',
          'imgAltIsTooLong',
          'imgAltNotEmptyInAnchor',
          'imgAltTextNotRedundant',
          'imgHasAlt',
          'imgShouldNotHaveTitle',
          'linkHasAUniqueContext',
          'pNotUsedAsHeader',
          'tableDataShouldHaveTh',
          'imgWithEmptyAlt'
        ],
        removeButtons: 'PasteFromWord'
      },
      contentsCss: [
        'http://cdn.ckeditor.com/4.25.0-lts/full-all/contents.css',
        'https://ckeditor.com/docs/ckeditor4/4.25.0-lts/examples/assets/accessibilitychecker/contents.css'
      ]
    });
  </script>
</body>

</html>