Deview2013 a11y automation
Transcript of Deview2013 a11y automation
![Page 1: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/1.jpg)
웹접근성����������� ������������������ 자동화����������� ������������������ 어디까지����������� ������������������ 해봤니?
접근성����������� ������������������ 점검����������� ������������������ 자동화����������� ������������������ 100%를����������� ������������������ 향하여...
NHN Technology Services접근성팀.박태준
13년 10월 14일 월요일
![Page 2: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/2.jpg)
13년 10월 14일 월요일
![Page 3: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/3.jpg)
와이프����������� ������������������ 또는����������� ������������������ 여자친구의����������� ������������������
잔소리����������� ������������������ !
13년 10월 14일 월요일
![Page 4: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/4.jpg)
와이프����������� ������������������ 또는����������� ������������������ 여자친구의����������� ������������������
잔소리����������� ������������������ !
13년 10월 14일 월요일
![Page 5: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/5.jpg)
와이프����������� ������������������ 또는����������� ������������������ 여자친구의����������� ������������������
잔소리����������� ������������������ !
13년 10월 14일 월요일
![Page 6: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/6.jpg)
13년 10월 14일 월요일
![Page 7: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/7.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/8.jpg)
웹접근성����������� ������������������ 점검����������� ������������������
어떻게����������� ������������������ 하고����������� ������������������ 계신가요?
13년 10월 14일 월요일
![Page 9: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/9.jpg)
웹접근성 점검 어떻게 하세요?
KWCAG
WCAG
NWCAG
} Sampling Scoring + Report
주요페이지 NWAX K-WAH
전문가 평가
13년 10월 14일 월요일
![Page 10: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/10.jpg)
웹접근성 점검 어떻게 하세요?
점검 진행
접근성팀 리소스 확인서비스 운영의 점검 요청1 2
점검 일자 협의3
4
점검 내용 등록5
User Test 진행4-1
리포트 생성/공유6
Feedback
Automation
NAVER
13년 10월 14일 월요일
![Page 11: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/11.jpg)
웹접근성 점검 어떻게 하세요?
6page / 1day
13년 10월 14일 월요일
![Page 12: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/12.jpg)
이대로는����������� ������������������ 안된다.
13년 10월 14일 월요일
![Page 13: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/13.jpg)
이대로는 안된다!
13년 10월 14일 월요일
![Page 14: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/14.jpg)
이대로는 안된다!
서비스 x 페이지 x 개편
?
13년 10월 14일 월요일
![Page 15: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/15.jpg)
웹접근성 점검 어떻게 하세요?
점검 진행
접근성팀 리소스 확인서비스 운영의 점검 요청1 2
점검 일자 협의3
4
점검 내용 등록5
User Test 진행4-1
리포트 생성/공유6
Feedback
Automation
NAVER
13년 10월 14일 월요일
![Page 16: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/16.jpg)
이대로는 안된다!
N-WAX(Naver Web Accessibility eXtension)
Accessibility Test Coverage
13년 10월 14일 월요일
![Page 17: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/17.jpg)
그럼����������� ������������������ 필요한걸����������� ������������������ 만들자!
13년 10월 14일 월요일
![Page 18: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/18.jpg)
만들자!
한계限界정성적 평가定性
On manual
13년 10월 14일 월요일
![Page 19: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/19.jpg)
만들자!
수작업 단계를 최대한 작게 분류하고,
나눠진 항목은 최대한 자동화 해본다.
13년 10월 14일 월요일
![Page 20: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/20.jpg)
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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/21.jpg)
만들자!
문자열(text) 탐색 Javascript 탐색 인공지능(?)이 필요한 탐색
13년 10월 14일 월요일
![Page 22: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/22.jpg)
만들자!
문자열(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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/23.jpg)
만들자!
‘새창열림’에 대한 알림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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/24.jpg)
만들자!
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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/25.jpg)
만들자!
land.naver.com
13년 10월 14일 월요일
![Page 26: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/26.jpg)
만들자!
눈으로 확인해야 하는 상황경험에 의해서 알 수 있는 내용을 패턴화
DB 규모와 품질에 따라, 검출 정밀도 비례
Text검색 기반으로, 노이즈 제거 및 선택적 구간 탐색으로 효율화 필요
인공지능(?)이 필요한 탐색
13년 10월 14일 월요일
![Page 27: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/27.jpg)
만들자!
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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/28.jpg)
만들자!
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>
Keywords 캡차 대체수단
Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … switch, change, alternative, sound, play, player, 음성, 대체..O X
13년 10월 14일 월요일
![Page 29: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/29.jpg)
만들자!
<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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/30.jpg)
만들자!
<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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/31.jpg)
만들자!
Google account
13년 10월 14일 월요일
![Page 32: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/32.jpg)
만들자!
빨간(색상, 방향)
글씨 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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/33.jpg)
잘 만들자!
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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/34.jpg)
잘 만들자!
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](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/35.jpg)
잘 만들자!
오류확률����������� ������������������ -����������� ������������������ 90%
13년 10월 14일 월요일
![Page 36: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/36.jpg)
문자열(text) 탐색
Javascript 탐색
인공지능(?)이 필요한 탐색
DATAPa
ttern
Probability
13년 10월 14일 월요일
![Page 37: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/37.jpg)
WebAccessibility
統攝 Consilience
13년 10월 14일 월요일
![Page 38: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/38.jpg)
13년 10월 14일 월요일
![Page 39: Deview2013 a11y automation](https://reader033.fdocuments.in/reader033/viewer/2022052412/558fcd101a28abf8388b47ba/html5/thumbnails/39.jpg)
nuli.nhncorp.com
facebook@bythehuman
13년 10월 14일 월요일