Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

[7/27 접근성세미나] 웹 접근성 진단 100% 자동화, 그 가능성을 말하다

3,974 views

Published on

Published in: Technology
  • Login to see the comments

[7/27 접근성세미나] 웹 접근성 진단 100% 자동화, 그 가능성을 말하다

  1. 1. WEB ACCESSIBILITY 진 단 자 동 화 1 0 0 % 그 가 능 성 을 말 하 다 2013.07.27 최인숙
  2. 2. Contents.
  3. 3. 접근성 현황: 문제의 근원은... 장애인 사용자에 대한 인식 부족 접근성 가이드에 대한 지식 부족 접근성을 별도의 기능으로 생각 경비가 많이 들고 지루한 웹 사이트
  4. 4. 접근성 진단 현황 제한적 기구 또는 서비스사용 컨설팅 의뢰 수정 컨텐츠 변화 인력과 경비 소모
  5. 5. 기존 툴 진단 현황 WAX K-WAH PAJET WAVEA-CheckerCoolCheck 기준: NWCAG 25 체크리스트 점검 불가 오류 판단 가능 점검 보조/관련 요소 추출 접근성 점검 범위
  6. 6. 기존 툴의 형태별 한계점 Add-on 형태  특정 브라우저에서만 가능  페이지별 진단필요  진단 결과의 저장의 어려움  상세한 진단결과를 보여주기 어려움 (공간 부족) Online 서비스 (URL 입력)  진단 범위가 HTML, CSS정도로 한정됨  접근 범위가 한정되어 있음 (로그인이 필요한 경우(X)) 설치형  컴퓨터별로 설치해야 하는 불편함  업데이트가 용이하지 않음  진단 범위가 한정됨
  7. 7. 진단 자동화 100%, 그 가능성 HTML code (DOM) 검색 사용자정의 JavaScript 검색 패턴 분석  진단 결과의 노이즈 제거 (예: 5x5미만의 이미지)  텍스트의 진정성 검사 (alt, label, title..)  Window object를 이용한 사용자 정의 JavaScript 진단  HTML DOM 탐색만으로는 검출이 어려운 요소(캡차, 미디어)들은 패턴 분석을 이용하여 진단
  8. 8. HTML code (DOM) 탐색: 이미지 대체 텍스트 PASS?!No Filter
  9. 9. HTML code (DOM) 탐색: 이미지 대체 텍스트 “이미지” “image” “사진” “alt” “.” “!“
  10. 10. JavaScript 탐색: 새 창 링크
  11. 11. JavaScript 탐색: 새 창 링크 <a href="javascript:goLoginPop('',false,'');" class="login link4"> <span class="e_bl">로그인</span> </a> <a href="javascript:mobileAppPopup();"> <img src="http://.....mobile.gif" alt="모바일앱 다운로드"> </a> <a href="javascript:fnEmailColNotPop('FT_LINK_01_03');" class="footerlink5"> <span class="e_bl">이메일무단수집거부</span> </a>  기존의 툴에서 검색되지 않는 부분들
  12. 12. JavaScript 탐색: 새 창 링크
  13. 13. JavaScript 탐색: 새 창 링크  사용자정의(user-defined) function을 저장  검출된 href값에서 function을 찾아냄 <a href="javascript:goLoginPop('',false,'');" class="login link4"> <span class="e_bl">로그인</span> </a> <a href="javascript:mobileAppPopup();"> <img src="http://.....mobile.gif" alt="모바일앱 다운로드"> </a> <a href="javascript:fnEmailColNotPop('FT_LINK_01_03');" class="footerlink5"> <span class="e_bl">이메일무단수집거부</span> </a>
  14. 14. JavaScript 탐색: 새 창 링크  Headless(srciptable) browser 를 이용하여 function body값을 얻어냄  찾고자 하는 키워드 (예: window.open)가 검출되면 오류/경고판정
  15. 15. Pattern 분석: 캡차 이미지로만 제공되는 오류 사례 이미지 및 음성(대체수단)으로 제공되는 바른 사례
  16. 16. Pattern 분석: 캡차 캡차 관련: Captcha, 캡챠, 켑챠, 캡차, 보안 문자 … 대체수단 관련: switch, change, alternative, sound, play, player, 음성, 대체.. Keywor ds <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">
  17. 17. Pattern 분석: 캡차 <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>
  18. 18. Pattern 분석: 캡차 <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> captcha keyword 검출 대체수단을 위한 keyword 검출 안됨
  19. 19. <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> </dl>
  20. 20. <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> </dl> captcha keyword 검출 대체수단을 위한 keyword 검출
  21. 21. Offline 접근성(New York) 횡단보도로 내려오고 올라 가기 쉽게 만든 낮은경사면 턱이 없어 진입이 쉬운 상점입구
  22. 22. Offline 접근성(Chicago) 휠체어를 탄 고객을 위한 문열림 버튼
  23. 23. Offline 접근성(London) 휠체어를 탄 고객을 위한 문열림 버튼
  24. 24. Offline 접근성(강남역) 계단을 이용해야만 진입 할 수 있는 입구
  25. 25. Offline 접근성(분당) 횡단보도 위에 주차 휠체어 접근 불가
  26. 26. Offline 접근성(분당) 횡단보도 위에 주차
  27. 27. “The power of the web is in its universality. Access by everyone regardless of disability is an essential aspect” - Tim Berners-Lee -

×