39
웹접근성 자동화 어디까지 해봤니? 접근성 점검 자동화 100%를 향하여... NHN Technology Services 접근성팀.박태준 131014월요일

Deview2013 a11y automation

Embed Size (px)

Citation preview

Page 1: Deview2013 a11y automation

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

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

NHN Technology Services접근성팀.박태준

13년 10월 14일 월요일

Page 2: Deview2013 a11y automation

13년 10월 14일 월요일

Page 3: Deview2013 a11y automation

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

잔소리����������� ������������������  !

13년 10월 14일 월요일

Page 4: Deview2013 a11y automation

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

잔소리����������� ������������������  !

13년 10월 14일 월요일

Page 5: Deview2013 a11y automation

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

잔소리����������� ������������������  !

13년 10월 14일 월요일

Page 6: Deview2013 a11y automation

13년 10월 14일 월요일

Page 7: Deview2013 a11y automation

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

13년 10월 14일 월요일

Page 8: Deview2013 a11y automation

웹접근성����������� ������������������  점검����������� ������������������  

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

13년 10월 14일 월요일

Page 9: Deview2013 a11y automation

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

KWCAG

WCAG

NWCAG

} Sampling Scoring + Report

주요페이지 NWAX K-WAH

전문가 평가

13년 10월 14일 월요일

Page 10: Deview2013 a11y automation

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

점검 진행

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

점검 일자 협의3

4

점검 내용 등록5

User Test 진행4-1

리포트 생성/공유6

Feedback

Automation

NAVER

13년 10월 14일 월요일

Page 11: Deview2013 a11y automation

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

6page / 1day

13년 10월 14일 월요일

Page 12: Deview2013 a11y automation

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

13년 10월 14일 월요일

Page 13: Deview2013 a11y automation

이대로는 안된다!

13년 10월 14일 월요일

Page 14: Deview2013 a11y automation

이대로는 안된다!

서비스 x 페이지 x 개편

?

13년 10월 14일 월요일

Page 15: Deview2013 a11y automation

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

점검 진행

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

점검 일자 협의3

4

점검 내용 등록5

User Test 진행4-1

리포트 생성/공유6

Feedback

Automation

NAVER

13년 10월 14일 월요일

Page 16: Deview2013 a11y automation

이대로는 안된다!

N-WAX(Naver Web Accessibility eXtension)

Accessibility Test Coverage

13년 10월 14일 월요일

Page 17: Deview2013 a11y automation

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

13년 10월 14일 월요일

Page 19: Deview2013 a11y automation

만들자!

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

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

13년 10월 14일 월요일

Page 20: Deview2013 a11y automation

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) 모든 페이지

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

13년 10월 14일 월요일

Page 21: Deview2013 a11y automation

만들자!

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

13년 10월 14일 월요일

Page 22: Deview2013 a11y automation

만들자!

문자열(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

13년 10월 14일 월요일

Page 23: Deview2013 a11y automation

만들자!

‘새창열림’에 대한 알림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

13년 10월 14일 월요일

Page 24: Deview2013 a11y automation

만들자!

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

MouseOver

OnFocus

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

onfocus event not found

13년 10월 14일 월요일

Page 25: Deview2013 a11y automation

만들자!

land.naver.com

13년 10월 14일 월요일

Page 26: Deview2013 a11y automation

만들자!

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

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

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

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

13년 10월 14일 월요일

Page 27: Deview2013 a11y automation

만들자!

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, 음성, 대체..

13년 10월 14일 월요일

Page 28: Deview2013 a11y automation

만들자!

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;">&nbsp;&nbsp;왼쪽의 글자를 입력하세요.       </td>     </tr>   </tbody> </table>

Keywords 캡차 대체수단

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

13년 10월 14일 월요일

Page 29: Deview2013 a11y automation

만들자!

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

Keywords 캡차 대체수단

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

13년 10월 14일 월요일

Page 30: Deview2013 a11y automation

만들자!

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

Keywords 캡차 대체수단

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

13년 10월 14일 월요일

Page 31: Deview2013 a11y automation

만들자!

Google account

13년 10월 14일 월요일

Page 32: Deview2013 a11y automation

만들자!

빨간(색상, 방향)

글씨 or 숫자 or 텍스트

항목 or 내용 or 부분

필수 or 반드시 or 꼭

입력 or 표기 or 사항 or 내용

Form tag

1

2

3

4

5

6

1 and

2

3

4

5

Error (Sensory Information)

6

Types+

51%80%99%

Probability+

13년 10월 14일 월요일

Page 33: Deview2013 a11y automation

잘 만들자!

1 and

2

3

4

5

Error (Sensory Information)

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

13년 10월 14일 월요일

Page 34: Deview2013 a11y automation

잘 만들자!

1 and

2

3

4

5

Error (Sensory Information)

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

13년 10월 14일 월요일

Page 35: Deview2013 a11y automation

잘 만들자!

오류확률����������� ������������������  -����������� ������������������  90%

13년 10월 14일 월요일

Page 36: Deview2013 a11y automation

문자열(text) 탐색

Javascript 탐색

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

DATAPa

ttern

Probability

13년 10월 14일 월요일

Page 37: Deview2013 a11y automation

WebAccessibility

統攝 Consilience

13년 10월 14일 월요일

Page 38: Deview2013 a11y automation

13년 10월 14일 월요일

Page 39: Deview2013 a11y automation

nuli.nhncorp.com

facebook@bythehuman

13년 10월 14일 월요일