SlideShare a Scribd company logo

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

Nts Nuli
Nts Nuli
1 of 30
[7/27 접근성세미나] 웹 접근성 진단 100% 자동화, 그 가능성을 말하다
WEB ACCESSIBILITY
진 단 자 동 화 1 0 0 %
그 가 능 성 을 말 하 다
2013.07.27
최인숙
Contents.
접근성 현황: 문제의 근원은...
장애인
사용자에 대한
인식 부족
접근성
가이드에 대한
지식 부족
접근성을
별도의 기능으로
생각
경비가 많이 들고
지루한
웹 사이트
접근성 진단 현황
제한적 기구
또는
서비스사용
컨설팅
의뢰
수정
컨텐츠
변화
인력과
경비 소모
기존 툴 진단 현황
WAX K-WAH PAJET
WAVEA-CheckerCoolCheck
기준: NWCAG 25 체크리스트
점검 불가
오류 판단 가능
점검 보조/관련
요소 추출
접근성 점검 범위

Recommended

[2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!
[2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견![2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!
[2014널리세미나] 접근성 빅(?) 데이터, 새로운 법칙의 발견!Nts Nuli
 
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝![2014널리세미나] 웹 서비스분석 MEAN Stack과  PhantomJS만 알면 끝!
[2014널리세미나] 웹 서비스분석 MEAN Stack과 PhantomJS만 알면 끝!Nts Nuli
 
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Nts Nuli
 
[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기
[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기
[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기Nts Nuli
 
[2012널리세미나] 오빠~ 네이버 왜 이렇게 늦게 떠?
[2012널리세미나] 오빠~ 네이버 왜 이렇게 늦게 떠?[2012널리세미나] 오빠~ 네이버 왜 이렇게 늦게 떠?
[2012널리세미나] 오빠~ 네이버 왜 이렇게 늦게 떠?Nts Nuli
 
Html5 시맨틱태그
Html5 시맨틱태그Html5 시맨틱태그
Html5 시맨틱태그은심 강
 
[7/27 접근성세미나] 웹 접근성 가이드라인의 사각 지대를 말하다
[7/27 접근성세미나] 웹 접근성 가이드라인의 사각 지대를 말하다[7/27 접근성세미나] 웹 접근성 가이드라인의 사각 지대를 말하다
[7/27 접근성세미나] 웹 접근성 가이드라인의 사각 지대를 말하다Nts Nuli
 

More Related Content

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

[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기Jeado Ko
 
Deview2013 a11y automation
Deview2013 a11y automationDeview2013 a11y automation
Deview2013 a11y automationNAVER D2
 
Object Parameters Ws Yjj
Object Parameters Ws YjjObject Parameters Ws Yjj
Object Parameters Ws YjjDaniel D.J. UM
 
Modern web application with meteor
Modern web application with meteorModern web application with meteor
Modern web application with meteorJaeho Lee
 
Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료joonseokkim11
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드Jong-hyun Park
 
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지yongwoo Jeon
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Eulsoo Jung
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기Jeado Ko
 
자바 웹 개발 시작하기 (7주차 : 국제화, 확인검증, 예외처리)
자바 웹 개발 시작하기 (7주차 : 국제화, 확인검증, 예외처리)자바 웹 개발 시작하기 (7주차 : 국제화, 확인검증, 예외처리)
자바 웹 개발 시작하기 (7주차 : 국제화, 확인검증, 예외처리)DK Lee
 
딥러닝(Deep Learing) using DeepDetect
딥러닝(Deep Learing) using DeepDetect딥러닝(Deep Learing) using DeepDetect
딥러닝(Deep Learing) using DeepDetectJunyi Song
 
Xe3.0 frontend validator
Xe3.0 frontend validatorXe3.0 frontend validator
Xe3.0 frontend validator승훈 오
 
리눅스와 웹표준(2004)
리눅스와 웹표준(2004)리눅스와 웹표준(2004)
리눅스와 웹표준(2004)Channy Yun
 
Knock out - 삽질은 그만 #1
Knock out - 삽질은 그만 #1Knock out - 삽질은 그만 #1
Knock out - 삽질은 그만 #1Hyo Da Seo
 
Spring camp 발표자료
Spring camp 발표자료Spring camp 발표자료
Spring camp 발표자료수홍 이
 
Opensource apm scouter in practice
Opensource apm scouter in practiceOpensource apm scouter in practice
Opensource apm scouter in practicedonghoonlee18659041
 

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

[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
 
Deview2013 a11y automation
Deview2013 a11y automationDeview2013 a11y automation
Deview2013 a11y automation
 
Object Parameters Ws Yjj
Object Parameters Ws YjjObject Parameters Ws Yjj
Object Parameters Ws Yjj
 
Meteor2015 codelab
Meteor2015 codelab Meteor2015 codelab
Meteor2015 codelab
 
Modern web application with meteor
Modern web application with meteorModern web application with meteor
Modern web application with meteor
 
Pp3 devweb
Pp3 devwebPp3 devweb
Pp3 devweb
 
Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료Opinion 프로젝트 발표 자료
Opinion 프로젝트 발표 자료
 
Html5 소개 가이드
Html5 소개 가이드Html5 소개 가이드
Html5 소개 가이드
 
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
Html5 앱과 웹사이트를 보다 빠르게 하는 50가지
 
Web Standards HTML5_CSS3
Web Standards HTML5_CSS3Web Standards HTML5_CSS3
Web Standards HTML5_CSS3
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기자바스크립트 프레임워크 살펴보기
자바스크립트 프레임워크 살펴보기
 
Performance test
Performance testPerformance test
Performance test
 
자바 웹 개발 시작하기 (7주차 : 국제화, 확인검증, 예외처리)
자바 웹 개발 시작하기 (7주차 : 국제화, 확인검증, 예외처리)자바 웹 개발 시작하기 (7주차 : 국제화, 확인검증, 예외처리)
자바 웹 개발 시작하기 (7주차 : 국제화, 확인검증, 예외처리)
 
딥러닝(Deep Learing) using DeepDetect
딥러닝(Deep Learing) using DeepDetect딥러닝(Deep Learing) using DeepDetect
딥러닝(Deep Learing) using DeepDetect
 
Xe3.0 frontend validator
Xe3.0 frontend validatorXe3.0 frontend validator
Xe3.0 frontend validator
 
리눅스와 웹표준(2004)
리눅스와 웹표준(2004)리눅스와 웹표준(2004)
리눅스와 웹표준(2004)
 
Knock out - 삽질은 그만 #1
Knock out - 삽질은 그만 #1Knock out - 삽질은 그만 #1
Knock out - 삽질은 그만 #1
 
Spring camp 발표자료
Spring camp 발표자료Spring camp 발표자료
Spring camp 발표자료
 
Opensource apm scouter in practice
Opensource apm scouter in practiceOpensource apm scouter in practice
Opensource apm scouter in practice
 

More from Nts Nuli

Link branding & brand identity overview
Link branding & brand identity overviewLink branding & brand identity overview
Link branding & brand identity overviewNts Nuli
 
Link branding & brand identity overview
Link branding & brand identity overviewLink branding & brand identity overview
Link branding & brand identity overviewNts Nuli
 
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성Nts Nuli
 
[2019널리세미나] 듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
[2019널리세미나]  듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선[2019널리세미나]  듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
[2019널리세미나] 듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선Nts Nuli
 
[2019널리세미나] 접근성은 별책 부록
[2019널리세미나] 접근성은 별책 부록[2019널리세미나] 접근성은 별책 부록
[2019널리세미나] 접근성은 별책 부록Nts Nuli
 
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성Nts Nuli
 
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성Nts Nuli
 
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​Nts Nuli
 
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트Nts Nuli
 
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성Nts Nuli
 
[2018널리세미나] 4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
[2018널리세미나]  4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제[2018널리세미나]  4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
[2018널리세미나] 4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제Nts Nuli
 
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 IINts Nuli
 
[2017널리세미나] 네이버 접근성 진단솔루션
[2017널리세미나] 네이버 접근성 진단솔루션[2017널리세미나] 네이버 접근성 진단솔루션
[2017널리세미나] 네이버 접근성 진단솔루션Nts Nuli
 
[2017널리세미나] Accessibility at Microsoft
[2017널리세미나] Accessibility at Microsoft[2017널리세미나] Accessibility at Microsoft
[2017널리세미나] Accessibility at MicrosoftNts Nuli
 
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성Nts Nuli
 
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각Nts Nuli
 
[2016널리세미나] 웹 접근성 체험관을 소개합니다!
[2016널리세미나] 웹 접근성 체험관을 소개합니다![2016널리세미나] 웹 접근성 체험관을 소개합니다!
[2016널리세미나] 웹 접근성 체험관을 소개합니다!Nts Nuli
 
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자Nts Nuli
 
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405Nts Nuli
 
[2016널리세미나] 남의 문제 나의 문제 우리의 문제
[2016널리세미나] 남의 문제 나의 문제 우리의 문제[2016널리세미나] 남의 문제 나의 문제 우리의 문제
[2016널리세미나] 남의 문제 나의 문제 우리의 문제Nts Nuli
 

More from Nts Nuli (20)

Link branding & brand identity overview
Link branding & brand identity overviewLink branding & brand identity overview
Link branding & brand identity overview
 
Link branding & brand identity overview
Link branding & brand identity overviewLink branding & brand identity overview
Link branding & brand identity overview
 
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
 
[2019널리세미나] 듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
[2019널리세미나]  듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선[2019널리세미나]  듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
[2019널리세미나] 듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
 
[2019널리세미나] 접근성은 별책 부록
[2019널리세미나] 접근성은 별책 부록[2019널리세미나] 접근성은 별책 부록
[2019널리세미나] 접근성은 별책 부록
 
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
 
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
 
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
 
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
 
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
 
[2018널리세미나] 4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
[2018널리세미나]  4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제[2018널리세미나]  4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
[2018널리세미나] 4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
 
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
 
[2017널리세미나] 네이버 접근성 진단솔루션
[2017널리세미나] 네이버 접근성 진단솔루션[2017널리세미나] 네이버 접근성 진단솔루션
[2017널리세미나] 네이버 접근성 진단솔루션
 
[2017널리세미나] Accessibility at Microsoft
[2017널리세미나] Accessibility at Microsoft[2017널리세미나] Accessibility at Microsoft
[2017널리세미나] Accessibility at Microsoft
 
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
 
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
 
[2016널리세미나] 웹 접근성 체험관을 소개합니다!
[2016널리세미나] 웹 접근성 체험관을 소개합니다![2016널리세미나] 웹 접근성 체험관을 소개합니다!
[2016널리세미나] 웹 접근성 체험관을 소개합니다!
 
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
 
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
 
[2016널리세미나] 남의 문제 나의 문제 우리의 문제
[2016널리세미나] 남의 문제 나의 문제 우리의 문제[2016널리세미나] 남의 문제 나의 문제 우리의 문제
[2016널리세미나] 남의 문제 나의 문제 우리의 문제
 

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

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