웹 접근성 검사

2.4.0 버전부터 지원합니다.

Synap Editor를 사용하여 내용 작성 시 웹 접근성을 검사하는 플러그인입니다.

1.00

점검 항목

요소	내용
`IMG`	이미지는 대체 텍스트가 필요합니다.
`A`	링크에는 링크의 목적에 대한 추가 정보를 제공하는 `title` 속성이 있어야 합니다.
`TABLE`	데이터 표에는 `<caption>` 요소가 있어야 합니다.
`TABLE`	데이터 표에는 `<th>` 요소가 있어야 합니다.
`VIDEO`	2.7.0 버전부터 지원합니다. 동영상에는 동영상에 대한 추가 정보를 제공하는 `title` 속성이 있어야 합니다.
`FRAME`, `IFRAME`	2.7.0 버전부터 지원합니다. 프레임에는 `title` 속성이 있어야 합니다.

사용 방법

플러그인 파일 불러오기

<!-- 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

플러그인 이름 'WebAccessibilityChecker'를 사용하여 툴바 영역이나 메뉴 영역에 버튼을 추가할 수 있습니다.

툴바에 추가

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

메뉴에 추가

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

API

`editor.checkWebAccessibility(callback, rules)`

2.7.0 버전부터 지원합니다.

웹 접근성 검사를 수행하고, 인자로 받은 콜백 함수를 통해 결과를 반환합니다.

Parameters:

이름	타입	설명
`callback`	함수	검사 결과를 받는 콜백 함수입니다. `result` 값 — `true`: 통과, `false`: 실패
`rules`	String[]	2.10.3 버전부터 지원합니다. 검사할 항목을 지정합니다. 항목이 지정되면 에디터에 설정된 검사 항목(`webAccessibilityChecker.config`)은 무시됩니다. 지정하지 않으면 에디터에 설정된 검사 항목이 사용됩니다.

Inspection items:

항목	설명
`image-alt`	이미지 대체 텍스트(alt) 검사
`se-custom-image-alt`	이미지 대체 텍스트(alt) 검사
`se-custom-table-has-th`	표 제목 셀(th) 검사
`se-custom-table-has-caption`	표 캡션 검사
`se-custom-link-has-title-attr`	링크 title 속성 검사
`se-custom-video-has-title-attr`	동영상 title 속성 검사
`frame-title`	프레임 title 속성 검사
`se-custom-iframe-has-title-attr`	프레임 title 속성 검사

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);

구성

2.10.3 버전부터 지원합니다.

에디터 설정을 통해 검사 항목을 구성할 수 있습니다.

구성된 내용은 웹 접근성 검사 다이얼로그와 editor.checkWebAccessibility() API에 동일하게 적용됩니다.

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