Web Accessibility Checker

Release 2.4.0 and above.

A plugin that inspects web accessibility when creating content using Synap Editor.

Web accessibility example

Inspection Items

Element	Content
`IMG`	Images need alternative text.
`A`	Links should have a `title` attribute that provides additional information about the link's purpose.
`TABLE`	Data tables should have a `<caption>` element.
`TABLE`	Data tables should have `<th>` elements.
`VIDEO`	Release 2.7.0 and above. Videos should have a `title` attribute that provides additional information about the video.
`FRAME`, `IFRAME`	Release 2.7.0 and above. Frames should have a `title` attribute.

How to Use

Loading Plugin Files

<!-- The SynapEditor object must exist for this to take effect,
     so include after the editor script files. -->
<script src="url of webAccessibilityChecker.min.js"></script>
<link rel="stylesheet" href="url of webAccessibilityChecker.min.css">

UI

Using the plugin name 'WebAccessibilityChecker', you can add a button to the toolbar area or the menu area.

Add to Toolbar

// Editor configuration
//...
'editor.toolbar': [
    //...,
    'webAccessibilityChecker',
    //...
],
// ...

Add to Menu

// Editor configuration
//...
'editor.menu.definition': {
    //...,
    'tools': [
        //...,
        'webAccessibilityChecker',
        //...
    ],
    //...
},
//...

API

`editor.checkWebAccessibility(callback, rules)`

Release 2.7.0 and above.

Performs the web accessibility check and returns the result through the callback function received as an argument.

Parameters:

name	Type	Description
`callback`	Function	Callback function to receive the inspection result. `result` value — `true`: pass, `false`: fail
`rules`	String[]	Release 2.10.3 and above. Specifies the items to inspect. When items are specified, the inspection items set in the editor (`webAccessibilityChecker.config`) are ignored. When not specified, the inspection items set in the editor are used.

Inspection items:

Item	Description
`image-alt`	Image alternative text (alt) inspection
`se-custom-image-alt`	Image alternative text (alt) inspection
`se-custom-table-has-th`	Table title cell (th) inspection
`se-custom-table-has-caption`	Table caption inspection
`se-custom-link-has-title-attr`	Link title attribute inspection
`se-custom-video-has-title-attr`	Video title attribute inspection
`frame-title`	Frame title attribute inspection
`se-custom-iframe-has-title-attr`	Frame title attribute inspection

Example:

editor.checkWebAccessibility(function (result) {
    if (!result) {
        // If web accessibility check does not pass, open the web accessibility check dialog
        editor.getUIManager().showDialog('WebAccessibilityChecker');
    }
});

// Check only image alt text
var rules = ['image-alt', 'se-custom-image-alt'];
editor.checkWebAccessibility(function (result) {
    .....
}, rules);

// Check only TABLE CAPTION
var rules = ['se-custom-table-has-caption'];
editor.checkWebAccessibility(function (result) {
    .....
}, rules);

Config

Release 2.10.3 and above.

You can configure inspection items through editor settings.

The configured contents are equally applied to the web accessibility check dialog and the editor.checkWebAccessibility() API.

// Editor configuration
'webAccessibilityChecker.config': {
    rules: ['image-alt', 'se-custom-image-alt', ...]
}