how to evaluate accessibility with automatic

웹접근성�� 자동화�� 어디까지�� 해봤니?

접근성�� 점검�� 자동화�� 100%를�� 향하여...

NHN Technology Services 접근성팀.박태준

와이프�� 또는�� 여자친구의��

잔소리�� !

Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. Wikipedia®

웹접근성�� 점검��

어떻게�� 하고�� 계신가요?

웹접근성 점검 어떻게 하세요?

KWCAG

WCAG

NWCAG

} Sampling Scoring + Report

주요페이지 NWAX K-WAH

전문가 평가


점검 진행

접근성팀 리소스 확인서비스 운영의 점검 요청1 2

점검 일자 협의3

4

점검 내용 등록5

User Test 진행4-

리포트 생성/공유6

Feedback

Automation

NAVER


6page / 1day

이대로는�� 안된다.��

이대로는 안된다!


서비스 x 페이지 x 개편

?


점검 진행

접근성팀 리소스 확인서비스 운영의 점검 요청1 2

점검 일자 협의3

4

점검 내용 등록5

User Test 진행4-

리포트 생성/공유6

Feedback

Automation

NAVER


점검 진행4

접근성팀서비스1 2

점검3

점검5

User Test

4-

리포트6

Feedback

Automation

NAVER


N-WAX(Naver Web Accessibility eXtension)

Accessibility Test Coverage

그럼�� 필요한걸�� 만들자!��

만들자!

한계限界정성적 평가定性

On manual

만들자!

수작업 단계를 최대한 작게 분류하고,

나눠진 항목은 최대한 자동화 해본다.

AS-IS TO-BE

특징

1. HTML/CSS ‣ 1Scraping 2Sorting

1. HTML/CSS ‣ 1Scraping 2Sorting 3filtering!

2. Inspect Javascript ‣ PhantomJS를�� 이용한�� 사용자�� 정의�� function�� 탐색�� ‣ 자동갱신�� 컨텐츠,포커스�� 이동,�� 레이어�� 생성�� 등에�� 활용�� ‣ !

3. Pattern Recognition and Analysis ‣ 정성적�� 판단으로만�� 결정되는�� 접근성�� 이슈를�� 모아�� 패턴화하고해당�� 특징을�� 기반으로�� 분석

형태 Add-on (FF, Chrom) Online (Node.js)

동작 접근성 담당자가 필요할 경우 개별 페이지를 검사 설정한 주기에 따라 자동 트래킹

대상 표본 페이지(sampling) 모든 페이지

산출물 별도의 리포트 작업 필요 대시보드 및 리포트 자동 생성

만들자!

문자열(text) 탐색 Javascript 탐색 인공지능(?)이 필요한 탐색

만들자!

문자열(text) 탐색 <img src="http://img.naver.net/up.gif" alt="up" width="16" height="16" class="a">

일반적인 검출 방법 alt=null 유무 인식

조금 더 이미지명과 alt 값 비교

오류문자 필터링 (의미 없는 문자)

이미지 유형에 따른 이미지명 DB 구축 (코딩 컨벤션 구축 시 효과 극대화)

조금만 더 src와 alt의 상관관계 (src가 같은데 alt가 다른 경우 또는 그 반대의 경우)

같은 값(src, alt, name)을 갖는 이미지 끼리 Sorting

http://img.naver.net/static/w9/blank.gif

만들자!

‘새창열림’에 대한 알림 window.open()으로 인한 새창 열림시 target=”blank” 설정 필요

User-defined function’s body 값 추출

추출 된 function body에서 window.oepn 키워드 색인

자동갱신 컨텐츠나 포커스 이동 및 레이어 생성 등에 활용 가능

Javascript 탐색 <a href="javascript:goLogin(‘’,false,’’);" class="login_link4">

PhantomJSHEADLESS WEBSITE TESTING

http://img.naver.net/static/w9/blank.gif

만들자!

Javascript 탐색 <img src="/web/images/ico_menu.png" alt=”menu” class="overimg">

MouseOve

OnFocus

+function () {this.src ... =overimgsrc;}

onfocus event not found

만들자!

land.naver.com

만들자!

눈으로 확인해야 하는 상황 경험에 의해서 알 수 있는 내용을 패턴화

DB 규모와 품질에 따라, 검출 정밀도 비례

Text검색 기반으로, 노이즈 제거 및 선택적 구간 탐색으로 효율화 필요

인공지능(?)이 필요한 탐색

만들자!

Completely Automated Public Turing test to tell Computers and Humans Apart

CAPTCHA

<img id="captchaImg" width="200" height="125" alt="캡차이미지" name="captchaImg" src="http://captcha.naver.com/nhncaptcha2.gif?key=oDxvbZHUw20KQ3a3&qtype=0&size=1&dtype=4">

<img width="200" height="125" alt="캡챠이미지" src="http://captcha.naver.com/nhncaptcha2.gif?key=pv1LbMOpw2wVJPt4&qtype=0&size=1&dtype=6">

<span class="sound_playing">음성으로 안내되고 있습니다.</span>

<a onclick="javascript:changeCaptchaMode(); return false;" href="#">음성으로 듣기</a>

<img id="captchaImg" width="200" height="125" alt="음성캡차이미지" name="captchaImg" src="http://cafeimgs.naver.net/cafe4/section/create/@captcha2.gif">

Keywords 캡차 대체수단

Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … switch, change, alternative, sound, play, player, 음성, 대체..

만들자!

Completely Automated Public Turing test to tell Computers and Humans Apart

CAPTCHA

<table> <tbody> <tr bgcolor="#FFFFFF"> <td width="160" height="28" class="m_title"> <img id="kcaptcha_image" title="글자가 잘 안보이시는 경우 클릭하시면 새로운 글자가 나옵니다." width="120" style="cursor: pointer;" height="60" src="../bbs/kcaptcha_image.php?t=1370325187302"> </td> <td class="m_padding"> <input type="input" class="ed" size="10" name="wr_key" itemname="자동등록방지" required="" style="background-image: url(http://www.booknreader.com/js/wrest.gif); background-position: 100% 0%; background-repeat: no-repeat no-repeat;"> 왼쪽의 글자를 입력하세요. </td> </tr> </tbody> </table>


Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … switch, change, alternative, sound, play, player, 음성, 대체..O X

http://www.booknreader.com/js/wrest.gif

만들자!

<dl class="list_info list_captcha2"> <dt class="info_tit"> <span class="imgcaptcha tit_captcha">자동입력방지문자</span> </dt> <dd class="info_cont"> <div id="captchaText" class="cont_captcha" style="display: none;"> <span class="captcha_img"><img src="/login/captcha.jpg?dummy=1370324869482" width="196" height="49" alt="보안그림문자" id="guessImage"></span> <button type="button" class="img_captcha btn_voice" id="btnAudioCaptchaLoad">음성으로 듣기</button> <button type="button" class="img_captcha btn_refresh" id="btnImgRefresh">새로고침</button> <div class="captcha_input"> <label for="labCaptcha1" class="screen_out">자동입력방지문자</label> <input type="text" name="labCaptcha1" id="labCaptcha1" class="tf_txt" title="순서대로 입력" maxlength="5"> <em id="labCaptcha1Msg"></em> </div> </div> <div id="captchaVoice" class="cont_captcha" style="display: block;"> <div class="captcha_text"> <span class="inner_g"> <span class="img_captcha txt_g">음성으로 안내중입니다.</span> <span class="screen_out">음성으로 전달되는 숫자 5자리를 입력해 주세요.</span> </span> </div> <button type="button" class="img_captcha btn_text" id="btnImgCaptchaLoad">문자로 보기</button> <button type="button" class="img_captcha btn_refresh" id="btnAudioRefresh">새로고침</button> <div class="captcha_input"> <label for="labCaptcha2" class="screen_out">자동입력방지문자</label> <input type="text" name="labCaptcha2" id="labCaptcha2" class="tf_txt" title="순서대로 입력" maxlength="5"> <em id="labCaptcha2Msg"></em> </div> </div> <object type="application/x-shockwave-flash" id="captchaPlayer" name="captchaPlayer" data="/contents/flash/CaptChaPlayer.swf" width="1" height="1"> <param name="allowscriptaccess" value="always"> <param name="quality" value="high"> <param name="loop" value="false"> <param name="menu" value="false"> <param name="wmode" value="transparent"> <param name="swliveconnect" value="true"> <param name="flashvars" value="url=/login/captcha.mp3?dummy=1370324814246"> </object> </dd>


Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … switch, change, alternative, sound, play, player, 음성, 대체..

만들자!

<dl class="list_info list_captcha2"> <dt class="info_tit"> <span class="imgcaptcha tit_captcha">자동입력방지문자</span> </dt> <dd class="info_cont"> <div id="captchaText" class="cont_captcha" style="display: none;"> <span class="captcha_img"><img src="/login/captcha.jpg?dummy=1370324869482" width="196" height="49" alt="보안그림문자" id="guessImage"></span> <button type="button" class="img_captcha btn_voice" id="btnAudioCaptchaLoad">음성으로 듣기</button> <button type="button" class="img_captcha btn_refresh" id="btnImgRefresh">새로고침</button> <div class="captcha_input"> <label for="labCaptcha1" class="screen_out">자동입력방지문자</label> <input type="text" name="labCaptcha1" id="labCaptcha1" class="tf_txt" title="순서대로 입력" maxlength="5"> <em id="labCaptcha1Msg"></em> </div> </div> <div id="captchaVoice" class="cont_captcha" style="display: block;"> <div class="captcha_text"> <span class="inner_g"> <span class="img_captcha txt_g">음성으로 안내중입니다.</span> <span class="screen_out">음성으로 전달되는 숫자 5자리를 입력해 주세요.</span> </span> </div> <button type="button" class="img_captcha btn_text" id="btnImgCaptchaLoad">문자로 보기</button> <button type="button" class="img_captcha btn_refresh" id="btnAudioRefresh">새로고침</button> <div class="captcha_input"> <label for="labCaptcha2" class="screen_out">자동입력방지문자</label> <input type="text" name="labCaptcha2" id="labCaptcha2" class="tf_txt" title="순서대로 입력" maxlength="5"> <em id="labCaptcha2Msg"></em> </div> </div> <object type="application/x-shockwave-flash" id="captchaPlayer" name="captchaPlayer" data="/contents/flash/CaptChaPlayer.swf" width="1" height="1"> <param name="allowscriptaccess" value="always"> <param name="quality" value="high"> <param name="loop" value="false"> <param name="menu" value="false"> <param name="wmode" value="transparent"> <param name="swliveconnect" value="true"> <param name="flashvars" value="url=/login/captcha.mp3?dummy=1370324814246"> </object> </dd>


Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … switch, change, alternative, sound, play, player, 음성, 대체..O O

만들자!

Google account

만들자!

빨간(색상, 방향)1

글씨 or 숫자 or 텍스트2

항목 or 내용 or 부분3

필수 or 반드시 or 꼭4

입력 or 표기 or 사항 or 내용5

Form tag 6

1 and

2

3

4

5

Error (Sensory Information)

6

Types+

51%80%99%

Probability+

잘 만들자!

1 and

2

3

4

5


6

Types+

51%80%99%

Probability

Output = yes/maybe/no

∝

빨간(색상, 방향)

글씨 or 숫자 or 텍스트

항목 or 내용 or 부분

필수 or 반드시 or 꼭

입력 or 표기 or 사항 or 내용

Form tag

1

2

3

4

5

6

잘 만들자!

1 and

2

3

4

5


6

Types+

51%80%99%

Probability

Output = yes/maybe/no

∝

빨간글씨 or 숫자 or 텍스트

항목 or 내용 or 부분

필수 or 반드시 or 꼭

입력 or 표기 or 사항 or 내용

Form tag

1

2

3

4

5

6

∑θ₀

θ₁

θ₂

θ₃

x

x

x

x

잘 만들자!

오류확률�� -�� 90%

문자열(text) 탐색

Javascript 탐색

인공지능(?)이 필요한 탐색

DATAPa

ttern Probability

WebAccessibility

統攝 Consilience

nuli.nhncorp.com

facebook@bythehuman