검사항목

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

사용방법

플러그인 파일 불러오기

<!-- SynapEditor 객체가 존재해야 적용할 수 있기 때문에 에디터 스크립트 파일 아래에 include 해야 합니다 -->

<script src="webAccessibilityChecker.min.js의 url"></script>
<link rel="stylesheet" href="webAccessibilityChecker.min.css의 url">

UI

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

툴바에 추가

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

메뉴에 추가

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

API

editor.checkWebAccessibility(callback, rules)

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

Parameters:

name

Type

Description

callback

Function

웹 접근성 검사 결과를 받을 콜백함수입니다. 검사 결과가 Boolean 으로 반환됩니다.

function (result) {
    // result 값 true: 통과, false: 실패
}

rules

String[]

검사할 항목을 지정합니다.

항목이 지정된 경우 에디터에 설정된 검사항목(webAccessibilityChecker.config)은 무시되고, 지정하지 않으면 에디터에 설정된 검사항목으로 검사됩니다.

검사항목:

항목	설명
image-alt	이미지 대체텍스트(alt) 검사
se-custom-image-alt	이미지 대체텍스트(alt) 검사
se-custom-table-has-th	테이블 제목 셀(th) 검사
se-custom-table-has-caption	테이블 제목(caption) 검사
se-custom-link-has-title-attr	링크 title 속성 검사
se-custom-video-has-title-attr	비디오 title 속성 검사
frame-title	frame title 속성 검사
se-custom-iframe-has-title-attr	frame title 속성 검사

Example:

editor.checkWebAccessibility(function (result) {
	if (!result) {
		// 웹 접근성 검사가 통과되지 않으면 웹 접근성 검사 다이얼로그 열기
		editor.getUIManager().showDialog('WebAccessibilityChecker');
	}
});

// 이미지 대체텍스트만 검사하기
var rules = ['image-alt', 'se-custom-image-alt'];
editor.checkWebAccessibility(function (result) {
    .....
}, rules);

// TABLE CAPTION만 검사하기
var rules = ['se-custom-table-has-caption'];
editor.checkWebAccessibility(function (result) {
    .....
}, rules);

Config

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

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

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