deview2013 a11y automation

Post on 28-Jun-2015

1.385 Views

Category:

Documents

2 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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

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

NHN Technology Services접근성팀.박태준

13년 10월 14일 월요일

13년 10월 14일 월요일

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

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

13년 10월 14일 월요일

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

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

13년 10월 14일 월요일

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

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

13년 10월 14일 월요일

13년 10월 14일 월요일

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

13년 10월 14일 월요일

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

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

13년 10월 14일 월요일

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

KWCAG

WCAG

NWCAG

} Sampling Scoring + Report

주요페이지 NWAX K-WAH

전문가 평가

13년 10월 14일 월요일

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

점검 진행

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

점검 일자 협의3

4

점검 내용 등록5

User Test 진행4-1

리포트 생성/공유6

Feedback

Automation

NAVER

13년 10월 14일 월요일

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

6page / 1day

13년 10월 14일 월요일

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

13년 10월 14일 월요일

이대로는 안된다!

13년 10월 14일 월요일

이대로는 안된다!

서비스 x 페이지 x 개편

?

13년 10월 14일 월요일

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

점검 진행

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

점검 일자 협의3

4

점검 내용 등록5

User Test 진행4-1

리포트 생성/공유6

Feedback

Automation

NAVER

13년 10월 14일 월요일

이대로는 안된다!

N-WAX(Naver Web Accessibility eXtension)

Accessibility Test Coverage

13년 10월 14일 월요일

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

13년 10월 14일 월요일

만들자!

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

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

13년 10월 14일 월요일

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일 월요일

만들자!

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

13년 10월 14일 월요일

만들자!

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

만들자!

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

만들자!

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일 월요일

만들자!

land.naver.com

13년 10월 14일 월요일

만들자!

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

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

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

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

13년 10월 14일 월요일

만들자!

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일 월요일

만들자!

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일 월요일

만들자!

<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일 월요일

만들자!

<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일 월요일

만들자!

Google account

13년 10월 14일 월요일

만들자!

빨간(색상, 방향)

글씨 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일 월요일

잘 만들자!

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일 월요일

잘 만들자!

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일 월요일

잘 만들자!

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

13년 10월 14일 월요일

문자열(text) 탐색

Javascript 탐색

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

DATAPa

ttern

Probability

13년 10월 14일 월요일

WebAccessibility

統攝 Consilience

13년 10월 14일 월요일

13년 10월 14일 월요일

nuli.nhncorp.com

facebook@bythehuman

13년 10월 14일 월요일

top related