1. 접근성 빅? 데이터
새로운 법칙의 발견
김용원

2. 접근성 데이터가 뭔가요?
고대비

3. NWCAG 1.0
Automated
Manual
ouput
Client-Side Resources Analysis
(HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input

4. NWCAG 1.0
Automated
Manual
ouput
Client-Side Resources Analysis
(HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input

5. NWCAG 1.0
Automated
Manual
ouput
Client-Side Resources Analysis
(HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input

6. NWCAG 1.0
Automated
Manual
ouput
Client-Side Resources Analysis
(HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input

7. NWCAG 1.0
Automated
Manual
ouput
Client-Side Resources Analysis
(HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input

8. NWCAG 1.0
Automated
Manual
ouput
Client-Side Resources Analysis
(HTML, CSS, JS, Image… )
Expert Judgment
Web Service URL
Web Service URL
Web Service URL
Sample
NAVER A11Y Tools
DATA
Storage
input

9. 사내용 서비스

10. 목업용 폰트 사용 출처 : BLOKK - http://blokkfont.com/
사내용 서비스

11. 데이터에 어떤 것이 담겨 있나요?

12. DATA
Storage
Code snippets
HTML
CSS
JS
Performance info
Network
DOM
Headers
URL
ISSUE
Diagnosis info
…

13. DATA
Storage
Code snippets
HTML
CSS
JS
Performance info
Network
DOM
Headers
URL
ISSUE
Diagnosis info
…

14. DATA
Storage
Code snippets
HTML
CSS
JS
Performance info
Network
DOM
Headers
URL
ISSUE
Diagnosis info
…

15. DATA
Storage
Code snippets
HTML
CSS
JS
Performance info
Network
DOM
Headers
URL
ISSUE
Diagnosis info
…

16. 어떻게 모니터링하고 통제 하나요?

17. PASS
FAIL
Guideline Checklist

18. 특정 주기로 수집된 데이터를 비교분석, 사이트의 접근성 이슈와 현황을 파악

19. 잘 개선이 잘 진행되고 있는지
이슈 건수 변동이 심하지 않은지
어떤유형의 오류가 가장 많이 발생하는지

20. 잘 개선이 잘 진행되고 있는지
이슈 건수 변동이 심하지 않은지
어떤유형의 오류가 가장 많이 발생하는지

21. 잘 개선이 잘 진행되고 있는지
이슈 건수 변동이 심하지 않은지
어떤유형의 오류가 가장 많이 발생하는지

22. 합당한 솔루션을 제공한다.
리포트를 통한 이슈 인지시키기
좀 더 구체적이고 효율적인 해결책 제시
세분화된 교육 ( UX, UI, FE, BE ) …

23. 하지만 이렇게만 활용하기에 데이터가 너무 가치있다.

24. 어떤 다른 분석을 할 수 있나요?
Coke
Coke

25. 키워드 분석을 통한 서비스 분야 파악
Code snippets
HTML
CSS
JS
쇼핑
가격
구매
장바구니
배송
환불
통신판매
HTML Code
Shopping Keyword
네이버 지식쇼핑 캡쳐 (shopping.naver.com)

26. CSS 속성을 분석하여 사이트에 사용된 컬러 추출
Colorfy(www.colorflyit.com)로 확인한 m.naver.com
Code snippets
HTML
CSS
JS
분석요소
•선언빈도
•Color속성
•Background-color속성

27. CSS 선언된 @midea Queries 분석 어떤 스크린 사이즈까지 커버하고 있는지 파악
Code snippets
HTML
CSS
JS
크롬 확장 프로그램 (Responsive Inspector) 으로 확인한 m.naver.com

28. 브라우저 호환성 이슈 검출
Code snippets
HTML
CSS
JS
HTML5 Semantic Tags
CSS Vendor Prefixses
MS extensions Methods
참조 : http://www.w3schools.com/Html/html5_semantic_elements.asp, http://peter.sh/experiments/vendor-prefixed-css-property-overview/, http://quirksmode.org/dom/core/
…

29. 사이트 전반의 URL 형태를 분석 이해가 쉽고 접근이 용이한지 파악
URL
ISSUE
Diagnosis info
…
http://news.naver.com/main/main.nhn?mode=LSD&mid=shm&sid1=102
네이버 뉴스
메인?
메인?
탬플릿 형태?
탬플릿 형태?
색션 아이디
http://news.naver.com/section/?sid=society
제안

30. Navigation Timing API로 Network과 DOM관련 Timing 정보를 측정
Performance info
Network
DOM
Headers
크롬 Dev tools Console에서 확인
Processing Model 참조 : http://www.w3.org/TR/navigation-timing/

31. Automated
Manual
1
2
3
4
5
R
P R N D S

32. 이런 분석결과를 어디에 활용할 수 있나요?

33. SEO 최적화
브랜드 아이덴티티 강화
코드 리팩토링
성능 최적화
사용성 개선
…

34. 이런 분석이 접근성과 무슨 관련이 있나요?

35. 직접적인 관련이 없을 수 있습니다.

36. 하지만 좀 더 넓은 의미를 생각하면?

37. … 모든 사용자는 정보와 기능에 동등하게 접근할 수 있다.
동등하고 + 편리하고
+ 빠르게
Universal web Accessibility
웹 접근성의 정의

38. Thank You kimyongwon@nhn.com