How to evaluate accessibility with automatic

1. 웹접근성

2. 자동화

3. 어디까지

4. 해봤니? 접근성

5. 점검

6. 자동화

7. 100%를

8. 향하여... NHN Technology Services 접근성팀.박태준

10. 와이프

11. 또는

12. 여자친구의

14. 잔소리

16. 와이프

17. 또는

18. 여자친구의

20. 잔소리

22. 와이프

23. 또는

24. 여자친구의

26. 잔소리

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

30. 웹접근성

31. 점검

33. 어떻게

34. 하고

35. 계신가요?

36. 웹접근성 점검 어떻게 하세요? KWCAG WCAG NWCAG }Sampling Scoring + Report 주요페이지 NWAX K-WAH 전문가 평가

37. 웹접근성 점검 어떻게 하세요? 점검 진행 접근성팀 리소스 확인서비스 운영의 점검 요청 1 2 점검 일자 협의 3 4 점검 내용 등록 5 User Test 진행 4- 리포트 생성/공유 6 Feedback Automation NAVER

38. 웹접근성 점검 어떻게 하세요? 6page / 1day

39. 이대로는

40. 안된다.

42. 이대로는 안된다!

43. 이대로는 안된다! 서비스 x 페이지 x 개편 ?

44. 웹접근성 점검 어떻게 하세요? 점검 진행 접근성팀 리소스 확인서비스 운영의 점검 요청 1 2 점검 일자 협의 3 4 점검 내용 등록 5 User Test 진행 4- 리포트 생성/공유 6 Feedback Automation NAVER

45. 웹접근성 점검 어떻게 하세요? 점검 진행 4 접근성팀서비스 1 2 점검 3 점검 5 User Test 4- 리포트 6 Feedback Automation NAVER

46. 이대로는 안된다! N-WAX (Naver Web Accessibility eXtension) Accessibility Test Coverage

47. 그럼

48. 필요한걸

49. 만들자!

51. 만들자! 한계限界 정성적 평가定性 On manual

52. 만들자! 수작업 단계를 최대한 작게 분류하고, 나눠진 항목은 최대한 자동화 해본다.

53. AS-IS TO-BE 특징 1. HTML/CSS ‣ 1Scraping 2Sorting 1. HTML/CSS ‣ 1Scraping 2Sorting 3ﬁltering  ! 2. Inspect Javascript ‣ PhantomJS를

54. 이용한

55. 사용자

56. 정의

57. function

58. 탐색

59. ‣ 자동갱신

60. 컨텐츠,포커스

61. 이동,

62. 레이어

63. 생성

64. 등에

65. 활용

66. ‣ ! 3. Pattern Recognition and Analysis ‣ 정성적

67. 판단으로만

68. 결정되는

69. 접근성

70. 이슈를

71. 모아

72. 패턴화하고  해당

73. 특징을

74. 기반으로

75. 분석  형태 Add-on (FF, Chrom) Online (Node.js) 동작 접근성 담당자가 필요할 경우 개별 페이지를 검사 설정한 주기에 따라 자동 트래킹 대상 표본 페이지(sampling) 모든 페이지 산출물 별도의 리포트 작업 필요 대시보드 및 리포트 자동 생성

76. 만들자! 문자열(text) 탐색 Javascript 탐색 인공지능(?)이 필요한 탐색

77. 만들자! 문자열(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

78. 만들자! ‘새창열림’에 대한 알림 window.open()으로 인한 새창 열림시 target=”blank” 설정 필요 User-defined function’s body 값 추출 추출 된 function body에서 window.oepn 키워드 색인 자동갱신 컨텐츠나 포커스 이동 및 레이어 생성 등에 활용 가능 Javascript 탐색 a href=javascript:goLogin(‘’,false,’’); class=login_link4 PhantomJS HEADLESS WEBSITE TESTING

79. 만들자! Javascript 탐색 img src=/web/images/ico_menu.png alt=”menu” class=overimg MouseOve OnFocus + function () {this.src ... =overimgsrc;} onfocus event not found

80. 만들자! land.naver.com

81. 만들자! 눈으로 확인해야 하는 상황 경험에 의해서 알 수 있는 내용을 패턴화 DB 규모와 품질에 따라, 검출 정밀도 비례 Text검색 기반으로, 노이즈 제거 및 선택적 구간 탐색으로 효율화 필요 인공지능(?)이 필요한 탐색

82. 만들자! 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=oDxvbZHUw20KQ3a3qtype=0size=1dtype=4 img width=200 height=125 alt=캡챠이미지 src=http://captcha.naver.com/nhncaptcha2.gif? key=pv1LbMOpw2wVJPt4qtype=0size=1dtype=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, 음성, 대체..

83. 만들자! 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

84. 만들자! 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_imgimg 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, 음성, 대체..

85. 만들자! 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_imgimg 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

86. 만들자! Google account

87. 만들자! 빨간(색상, 방향)1 글씨 or 숫자 or 텍스트2 항목 or 내용 or 부분3 필수 or 반드시 or 꼭4 입력 or 표기 or 사항 or 내용5 Form tag6 1 and 2 3 4 5 Error (Sensory Information) 6 Types + 51% 80% 99% Probability +

88. 잘 만들자! 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

89. 잘 만들자! 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. 잘 만들자! 오류확률

92. 90%

93. 문자열(text) 탐색 Javascript 탐색 인공지능(?)이 필요한 탐색 DATA Pattern Probability

94. Web Accessibility 統攝 Consilience

96. nuli.nhncorp.com facebook@bythehuman

How to evaluate accessibility with automatic

More Related Content

Viewers also liked (6)

Similar to How to evaluate accessibility with automatic (20)

How to evaluate accessibility with automatic