Deview2013 a11y automation
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,536
On Slideshare
841
From Embeds
695
Number of Embeds
8

Actions

Shares
Downloads
35
Comments
0
Likes
0

Embeds 695

http://deview.kr 665
https://www.facebook.com 13
http://opentutorials.org 10
http://deview.admin.nhn.com 2
http://local.deview.kr 2
https://m.facebook.com&_=1384997646807 HTTP 1
https://m.facebook.com&_=1393578124099 HTTP 1
https://twitter.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 웹접근성
  • 2.   자동화
  • 3.   어디까지
  • 4.   해봤니? 접근성
  • 5.   점검
  • 6.   자동화
  • 7.   100%를
  • 8.   향하여... NHN Technology Services 접근성팀.박태준 13년 10월 14일 월요일
  • 9. 13년 10월 14일 월요일
  • 10. 와이프
  • 11.   또는
  • 12.   여자친구의
  • 13.    잔소리
  • 14.   ! 13년 10월 14일 월요일
  • 15. 와이프
  • 16.   또는
  • 17.   여자친구의
  • 18.    잔소리
  • 19.   ! 13년 10월 14일 월요일
  • 20. 와이프
  • 21.   또는
  • 22.   여자친구의
  • 23.    잔소리
  • 24.   ! 13년 10월 14일 월요일
  • 25. 13년 10월 14일 월요일
  • 26. Web accessibility refers to the inclusive practice of making websites usable by people of all abilities and disabilities. Wikipedia® 13년 10월 14일 월요일
  • 27. 웹접근성
  • 28.   점검
  • 29.    어떻게
  • 30.   하고
  • 31.   계신가요? 13년 10월 14일 월요일
  • 32. 웹접근성 점검 어떻게 하세요? WCAG KWCAG NWCAG 13년 10월 14일 월요일 } Sampling 주요페이지 Scoring + Report NWAX K-WAH 전문가 평가
  • 33. 웹접근성 점검 어떻게 하세요? NAVER 1 2 서비스 운영의 점검 요청 3 접근성팀 리소스 확인 User Test 진행 ack db e Fe 4 4-1 6 점검 진행 5 리포트 생성/공유 Automation 13년 10월 14일 월요일 점검 일자 협의 점검 내용 등록
  • 34. 웹접근성 점검 어떻게 하세요? 6page 13년 10월 14일 월요일 / 1day
  • 35. 이대로는
  • 36.   안된다. 13년 10월 14일 월요일
  • 37. 이대로는 안된다! 13년 10월 14일 월요일
  • 38. 이대로는 안된다! 서비스 x 페이지 x 개편 ? 13년 10월 14일 월요일
  • 39. 웹접근성 점검 어떻게 하세요? NAVER 1 2 서비스 운영의 점검 요청 3 접근성팀 리소스 확인 User Test 진행 ack db e Fe 4 4-1 6 점검 진행 5 리포트 생성/공유 Automation 13년 10월 14일 월요일 점검 일자 협의 점검 내용 등록
  • 40. 이대로는 안된다! Accessibility Test Coverage N-WAX (Naver Web Accessibility eXtension) 13년 10월 14일 월요일
  • 41. 그럼
  • 42.   필요한걸
  • 43.   만들자! 13년 10월 14일 월요일
  • 44. 만들자! 限界 한계 定性 정성적 평가 On manual 13년 10월 14일 월요일
  • 45. 만들자! 수작업 단계를 최대한 작게 분류하고, 나눠진 항목은 최대한 자동화 해본다. 13년 10월 14일 월요일
  • 46. AS-IS 1. HTML/CSS ‣ 1Scraping 2Sorting TO-BE 1. HTML/CSS ‣ 1Scraping 2Sorting 3filtering 2. Inspect Javascript ‣ PhantomJS를
  • 47.   이용한
  • 48.   사용자
  • 49.   정의
  • 50.   function
  • 51.   탐색 ‣ 자동갱신
  • 52.   컨텐츠,포커스
  • 53.   이동,
  • 54.   레이어
  • 55.   생성
  • 56.   등에
  • 57.   활용 특징 3. Pattern Recognition and Analysis ‣ 정성적
  • 58.   판단으로만
  • 59.   결정되는
  • 60.   접근성
  • 61.   이슈를
  • 62.   모아
  • 63.   패턴화하고 해당
  • 64.   특징을
  • 65.   기반으로
  • 66.   분석 형태 Online (Node.js) 동작 접근성 담당자가 필요할 경우 개별 페이지를 검사 설정한 주기에 따라 자동 트래킹 대상 표본 페이지(sampling) 모든 페이지 산출물 13년 10월 14일 월요일 Add-on (FF, Chrom) 별도의 리포트 작업 필요 대시보드 및 리포트 자동 생성
  • 67. 만들자! 문자열(text) 탐색 13년 10월 14일 월요일 Javascript 탐색 인공지능(?)이 필요한 탐색
  • 68. 만들자! 문자열(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일 월요일
  • 69. 만들자! Javascript 탐색 <a href="javascript:goLogin(‘’,false,’’);" class="login_link4"> ‘새창열림’에 대한 알림 window.open()으로 인한 새창 열림시 target=”blank” 설정 필요 User-defined function’s body 값 추출 추출 된 function body에서 window.oepn 키워드 색인 자동갱신 컨텐츠나 포커스 이동 및 레이어 생성 등에 활용 가능 PhantomJS HEADLESS WEBSITE TESTING 13년 10월 14일 월요일
  • 70. 만들자! Javascript 탐색 OnFocus <img src="/web/images/ico_menu.png" alt=”menu” class="overimg"> function () {this.src ... =overimgsrc;} + MouseOver onfocus event not found 13년 10월 14일 월요일
  • 71. 만들자! land.naver.com 13년 10월 14일 월요일
  • 72. 만들자! 인공지능(?)이 필요한 탐색 눈으로 확인해야 하는 상황 경험에 의해서 알 수 있는 내용을 패턴화 DB 규모와 품질에 따라, 검출 정밀도 비례 Text검색 기반으로, 노이즈 제거 및 선택적 구간 탐색으로 효율화 필요 13년 10월 14일 월요일
  • 73. 만들자! CAPTCHA Completely Automated Public Turing test to tell Computers and Humans Apart <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 13년 10월 14일 월요일 캡차 Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … 대체수단 switch, change, alternative, sound, play, player, 음성, 대체..
  • 74. 만들자! CAPTCHA Completely Automated Public Turing test to tell Computers and Humans Apart <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 norepeat;">&nbsp;&nbsp;왼쪽의 글자를 입력하세요.       </td>     </tr>   </tbody> </table> Keywords 13년 10월 14일 월요일 O 캡차 Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … X 대체수단 switch, change, alternative, sound, play, player, 음성, 대체..
  • 75. 만들자! <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 13년 10월 14일 월요일 캡차 Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … 대체수단 switch, change, alternative, sound, play, player, 음성, 대체..
  • 76. 만들자! <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 13년 10월 14일 월요일 O 캡차 Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … O 대체수단 switch, change, alternative, sound, play, player, 음성, 대체..
  • 77. 만들자! Google account 13년 10월 14일 월요일
  • 78. 만들자! 1 빨간(색상, 방향) 2 글씨 or 숫자 or 텍스트 3 항목 or 내용 or 부분 4 필수 or 반드시 or 꼭 5 입력 or 표기 or 사항 or 내용 6 Form tag 2 1 and 51% 80% 99% 3 4 6 5 Error (Sensory Information) 13년 10월 14일 월요일 + Probability + Types
  • 79. 잘 만들자! 빨간(색상, 방향) 1 2 3 Form tag Output = yes/maybe/no 3 4 5 Error (Sensory Information) 13년 10월 14일 월요일 입력 or 표기 or 사항 or 내용 6 and 필수 or 반드시 or 꼭 5 1 항목 or 내용 or 부분 4 + 2 글씨 or 숫자 or 텍스트 51% 80% 99% ∝ Probability 6 + Types
  • 80. 잘 만들자! 빨간(색상, 방향) 1 θ₀ x 2 글씨 or 숫자 or 텍스트 θ₁ x 3 항목 or 내용 or 부분 ∑ θ₂ x 4 필수 or 반드시 or 꼭 θ₃ x 5 입력 or 표기 or 사항 or 내용 6 + 2 1 and Output = yes/maybe/no 3 4 5 Error (Sensory Information) 13년 10월 14일 월요일 Form tag 51% 80% 99% ∝ Probability 6 + Types
  • 81. 잘 만들자! 오류확률
  • 82.   -
  • 83.   90% 13년 10월 14일 월요일
  • 84. Javascript 탐색 문자열(text) 탐색 인공지능(?)이 필요한 탐색 ity Pa tte rn il ab ob Pr 13년 10월 14일 월요일 DATA
  • 85. 統攝 Consilience Web Accessibility 13년 10월 14일 월요일
  • 86. 13년 10월 14일 월요일
  • 87. nuli.nhncorp.com facebook@bythehuman 13년 10월 14일 월요일