how to evaluate accessibility with automatic
DESCRIPTION
패턴인식, 머신러닝, 팬텀JS를 활용하여 웹서비스의 사용성과 같은 정성적인 항목들의 검출 및 인식 방법을 알아봅니다.TRANSCRIPT
웹접근성����������� ������������������ 자동화����������� ������������������ 어디까지����������� ������������������ 해봤니?
접근성����������� ������������������ 점검����������� ������������������ 자동화����������� ������������������ 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
만들자!
‘새창열림’에 대한 알림 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
만들자!
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>
Keywords 캡차 대체수단
Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … switch, change, alternative, sound, play, player, 음성, 대체..O X
만들자!
<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>
Keywords 캡차 대체수단
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>
Keywords 캡차 대체수단
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
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
잘 만들자!
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
잘 만들자!
오류확률����������� ������������������ -����������� ������������������ 90%
문자열(text) 탐색
Javascript 탐색
인공지능(?)이 필요한 탐색
DATAPa
ttern Probability
WebAccessibility
統攝 Consilience
nuli.nhncorp.com
facebook@bythehuman