OpenWAX웹 접근성 평가도구 뜯어보기

SK 플래닛 RecoPick 팀 김군우 (a.k.a. 겨미겨미 )

김군우웹 ( 프론트엔드 ) 개발자

• "OpenWAX" 개발

• NCsoft, NHN 에서 일했음 .

• 현 SK 플래닛 RecoPick 팀 소속

오늘 다룰 이야기• OpenWAX 란 ?• K-WAH, OpenWAX 의 차이점 . 도구별 장단점 .• OpenWAX 뜯어보기

(OpenWAX 의 평가 결과는 어떻게 만들어지는가 ?)

• OpenWAX 의 한계 , 로드맵 . 기여 방법

OpenWAX 란 ?http://openwax.net

OpenWAX(Open Web Accessibility eXten-sion) 는웹 페이지의 접근성 진단을 쉽게 할 수 있도록 제작된 도구And Open Source!

크롬 확장 파이어폭스 확장 북마클릿 (IE)

OpenWAX 란 ? – 제작 배경

PAJET

N-WAXOpen-WAX!

K-WAH 와의 차이점

K-WAH OpenWAX

윈도우 설치 프로그램 브라우저 확장한번에 사이트 전체 검사 가능 로그인 상태의 페이지 쉽게 검사검사 결과 보고서 형태로 확인 자바스크립트 코드도 반영하여

검사오류 위치 쉽게 확인

OpenWAX 뜯어보기

OpenWAX 뜯어보기 – 1. 적절한 대체 텍스트 (img)페이지의 <img>, <input type="image">, <area> 요소를 표시1. alt 속성이 아예 없으면

2. alt 속성이 있지만 비어 있으면

3. alt 속성이 있고 값이 있는 경우

4. longdesc 가 정의된 경우

오류

오류가 의심됨

이미지에 대체 텍스트가제대로 입력되었는지 검사

longdesc 는 링크 클릭하여페이지 확인

OpenWAX 뜯어보기 – 1. 적절한 대체 텍스트 (img) 대안 : Web Developer Extension

OpenWAX 뜯어보기 – 오류의 위치 확인하기 ( 파이어폭스 )

OpenWAX 뜯어보기 – 오류의 위치 확인하기 ( 크롬 , IE 등 )

OpenWAX 뜯어보기 – 1. 적절한 대체 텍스트 (bg)페이지의 CSS Background Image 가 사용된 요소를 표시

1. 대체 콘텐츠가 없으면

2. 대체 콘텐츠가 있으면

display: none 된 콘텐츠 해당 요소에 포함된 모든 텍스트

OpenWAX 뜯어보기 – 1. 적절한 대체 텍스트 (object)

페이지의 object, embed, video, audio, canvas, svg 요소를 표시

1. 표시만 합니다 .;;

OpenWAX 뜯어보기 – 1. 적절한 대체 텍스트 (object) 대안 : UIA Verify (UI Automation Verify)

OpenWAX 뜯어보기 – 3. 색에 무관한 콘텐츠 인식

" 흑백 토글 " 기능을 제공합니다 .

1. CSS 3 의 grayscale filter 기능 (Firefox, Chrome , IE9++)2. IE/FireFox 예전 버전은 각 브라우저 전용 필터 기능으로 흑백 기능 구현

OpenWAX 뜯어보기 – 5. 텍스트 콘텐츠의 명도 대비

Chrome, FireFox 확장 전용 기능

대안 : Colour Contrast Analyzer

OpenWAX 뜯어보기 – 5. 텍스트 콘텐츠의 명도 대비

대안 : Color Contrast Analyzer ( 크롬 확장 )

OpenWAX 뜯어보기 – 5. 텍스트 콘텐츠의 명도 대비

대안 : Color Contrast Analyzer ( 크롬 확장 )

OpenWAX 뜯어보기 – 5. 텍스트 콘텐츠의 명도 대비

OpenWAX 뜯어보기 – 8. 초점 이동

onfocus="this.blur()"

onfocus, onclick 속성에 blur() 라는 텍스트가 포함되는 경우를 검출CSS 의 outline-width

속성이 0 으로 지정된 경우를 검출

OpenWAX 뜯어보기 – 8. 초점 이동

대안 : Naver 의 NULI 주최 세미나 중 ...OpenWAX 가 검사를 못하는 유형 ...

지정된 자바스크립트함수를 headlessbrowser 를 이용하여포함된 자바스크립트파일에서 찾아볼 수있다 !

OpenWAX 뜯어보기 – 11. 깜빡임과 번쩍임 사용 제한

대안 : PEAT (Photosensitive Epilepsy Analysis Tool)

OpenWAX 뜯어보기 – 12. 건너뛰기 링크

<a href="#content1"></a><a href="#content2"></a>

<div id="content1"></div><a name="content2"></a>

OpenWAX 뜯어보기 – 12. 건너뛰기 링크

목록에 건너뛰기 링크만 나오는 게 아닌 것 같은데 .......? -> 기계적으로는 href="#blah" 같은 링크 ( 해시링크 ) 중 어떤 게 건너뛰기 링크인지 아닌지 모릅니다 . 그래서 최초 링크 10 개 중 해시링크들만 표시합니다 .

OpenWAX 뜯어보기 – 13. 제목 제공 (<title>)

현재 페이지

포함된 프레임의 제목들

OpenWAX 뜯어보기 – 13. 제목 제공 (frame)

OpenWAX 뜯어보기 – 13. 제목 제공 (<h1>~<h6>)

OpenWAX 뜯어보기 – 14. 적절한 링크 텍스트

OpenWAX 뜯어보기 – 15. 기본 언어 표시

XHTML 인데 lang 만 있으면 ...

lang, xml:lang 이 없으면 ...

OpenWAX 뜯어보기 – 16. 사용자 요구에 따른 실행

알림 없는 새창 링크링크 텍스트에 알림 포함

title 속성 포함

OpenWAX 뜯어보기 – 18. 표의 구성

caption, summary, th 가 모두사용된 경우

summary 는 있는데caption, th 가 없는 경우

OpenWAX 뜯어보기 – 19. 레이블 제공

<label>, title 속성모두 없는 경우

title 속성만사용된 경우

OpenWAX 뜯어보기 – 21. 마크업 오류 방지

OpenWAX 뜯어보기 – 21. 마크업 오류 방지

HTML4/XHTML 1 오류 유형

- end tag for [TAGNAME] omitted. (self-closing 태그 제외 )- end tag for [TAGNAME] which is not finished.- end tag for element [TAGNAME] which is not opened.- ID [ID] already defined.- duplicate specification of attribute [ATTRIBUTE]

HTML5 오류 유형

- End tag [TAGNAME] seen, but there were open elements.- Unclosed element [TAGNAME]- Stray end tag [TAGNAME]- Duplicate ID [ID]- Duplicate attribute [ATTRIBUTE]

OpenWAX 뜯어보기 – 21. 마크업 오류 방지

HTML Validator 가 해석하지 말아야 할자바스크립트 코드를 해석하는 경우

OpenWAX 뜯어보기 – WAX Score

OpenWAX 가 제공하는 접근성 점수입니다 ..

WAX Score 는 기계적으로 검사할 수 있는 접근성 관련 항목들을100 점 만점으로 수치화하여 표시합니다 .

from http://openwax.net/#guide_score

앞으로의 OpenWAX

1.불완전한 기능 개선

2.WAI-ARIA 지원

3.가이드 개선

4.영문 가이드 제작

5.사이트를 한 번에 평가

도와주세요 .

도와주세요 .

감사합니다