접근성 빅? 데이터 새로운 법칙의 발견

김용원

접근성 데이터가 뭔가요?

고대비

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

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

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

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

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

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

사내용 서비스

목업용 폰트 사용 출처 : BLOKK - http://blokkfont.com/

사내용 서비스

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

DATA

Storage

Code snippets

HTML

CSS JS

Performance info

Network DOM

Headers

URL

ISSUE

Diagnosis info

…

DATA

Storage

Code snippets

HTML

CSS JS

Performance info

Network DOM

Headers

URL

ISSUE

Diagnosis info

…

DATA

Storage

Code snippets

HTML

CSS JS

Performance info

Network DOM

Headers

URL

ISSUE

Diagnosis info

…

DATA

Storage

Code snippets

HTML

CSS JS

Performance info

Network DOM

Headers

URL

ISSUE

Diagnosis info

…

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

PASS FAIL

Guideline Checklist

특정 주기로 수집된 데이터를 비교분석,

사이트의 접근성 이슈와 현황을 파악

잘 개선이 잘 진행되고 있는지 이슈 건수 변동이 심하지 않은지

어떤유형의 오류가 가장 많이 발생하는지

잘 개선이 잘 진행되고 있는지

이슈 건수 변동이 심하지 않은지 어떤유형의 오류가 가장 많이 발생하는지

잘 개선이 잘 진행되고 있는지

이슈 건수 변동이 심하지 않은지

어떤유형의 오류가 가장 많이 발생하는지

합당한 솔루션을 제공한다.

리포트를 통한 이슈 인지시키기

좀 더 구체적이고 효율적인 해결책 제시

세분화된 교육 ( UX, UI, FE, BE )

…

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

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

Co

ke

Coke

키워드 분석을 통한 서비스 분야 파악

Code snippets

HTML

CSS

JS

쇼핑

가격

구매

장바구니

배송

환불

통신판매

HTML Code

Shopping Keyword

네이버 지식쇼핑 캡쳐 (shopping.naver.com)

CSS 속성을 분석하여 사이트에 사용된 컬러 추출

Colorfy(www.colorflyit.com)로 확인한 m.naver.com

Code snippets

HTML

CSS

JS

분석요소

• 선언빈도

• Color속성

• Background-color속성

CSS 선언된 @midea Queries 분석 어떤 스크린 사이즈까지 커버하고 있는지 파악

Code snippets

HTML

CSS

JS

크롬 확장 프로그램 (Responsive Inspector) 으로 확인한 m.naver.com

브라우저 호환성 이슈 검출 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/

…

사이트 전반의 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

제안

Navigation Timing API로 Network과 DOM관련 Timing 정보를 측정

Performance info

Network DOM

Headers

크롬 Dev tools Console에서 확인 Processing Model 참조 :

http://www.w3.org/TR/navigation-timing/

Automated Manual

1

2

3

4

5

R

P R N D S

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

SEO 최적화

브랜드 아이덴티티 강화

코드 리팩토링

성능 최적화

사용성 개선

…

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

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

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

… 모든 사용자는 정보와 기능에 동등하게 접근할 수 있다.

동등하고 + 편리하고 + 빠르게

Universal web Accessibility

웹 접근성의 정의

Thank You kimyongwon@nhn.com