웹 접근성 평가도구 OpenWAX 뜯어보기
•Als PPTX, PDF herunterladen•
2 gefällt mir•8,851 views
OpenWAX의 제작배경, 사용법 등에 대해 소개합니다.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie 웹 접근성 평가도구 OpenWAX 뜯어보기
Ähnlich wie 웹 접근성 평가도구 OpenWAX 뜯어보기 (20)
Mehr von Goonoo Kim
Kürzlich hochgeladen
웹 접근성 평가도구 OpenWAX 뜯어보기
- 1. OpenWAX 웹 접근성 평가도구 뜯어보기 SK플래닛 RecoPick팀 김군우 (a.k.a. 겨미겨미)
- 2. 김군우 웹 (프론트엔드) 개발자 • "OpenWAX" 개발 • NCsoft, NHN에서 일했음. • 현 SK플래닛 RecoPick팀 소 속
- 3. 오늘 다룰 이야기 • OpenWAX란? • K-WAH, OpenWAX의 차이점. 도구별 장단점. • OpenWAX 뜯어보기 (OpenWAX의 평가 결과는 어떻게 만들어지는 가?) • OpenWAX의 한계, 로드맵. 기여 방법
- 4. OpenWAX란? http://openwax.net OpenWAX(Open Web Accessibility eXtension)는 웹 페이지의 접근성 진단을 쉽게 할 수 있도록 제작된 도구 And Open Source! 크롬확장 파이어폭스확 장 북마클릿(IE)
- 5. OpenWAX란? – 제작 배경 PAJET N-WAX OpenWAX!
- 6. K-WAH와의 차이점 K-WAH OpenWAX 윈도우 설치 프로그램 브라우저 확장 한번에 사이트 전체 검사 가능 로그인 상태의 페이지 쉽게 검 사 검사 결과 보고서 형태로 확인 자바스크립트 코드도 반영하여 검사 오류 위치 쉽게 확인
- 7. OpenWAX뜯어보기
- 34. 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]
- 37. 앞으로의 OpenWAX 1.불완전한 기능 개선 2.WAI-ARIA 지원 3.가이드 개선 4.영문 가이드 제작 5.사이트를 한 번에 평가
- 38. 도와주세요.
- 39. 도와주세요.
- 40. 감사합니다
Hinweis der Redaktion
- OpenWAX 웹접근성 평가도구 뜯어보기라는 주제로 발표를 준비하였습니다.
- 저는 웹 개발자 김군우입니다. 오늘 소개해드릴 접근성 평가도구 OpenWAX을 개발했으며, 현재 SK플래닛에서 추천 플랫폼 서비스 레코픽팀에서 일하고 있습니다.
- 오늘 다룰 이야기는 OpenWAX란 무엇인지, 진흥원에서 제공되는 도구인 K-WAH와의 차이점 및 장단점을 알아보고, OpenWAX의 각 항목별 평가 결과를 만들기 위한 프로그램 로직 등을 뜯어봅니다. 마지막으로는 OpenWAX의 현재 한계, 앞으로의 로드맵, 개발에 참여하시는 방법 등을 알려드립니다.
- OpenWAX는 Open Web Accessibility eXtension라는 뜻으로 웹 페이지의 접근성 진단을 쉽게 할 수 있도록 제작된 도구입니다. OpenWAX는 구글 크롬 확장, 파이어폭스 확장 및 인터넷 익스플로러 등 다른 브라우저를 위한 북마클릿 총 3가지 형태로 설치하실 수 있습니다.
- OpenWAX는 홍윤표님과 신현석님의 주도로 제작된 도구인 PAJET(파젯)의 아이디어로 만들어졌습니다. OpenWAX는 처음에는 N-WAX라는 이름으로 네이버에서 제작되었습니다. 제가 네이버에 있었을 때 제작하였고요. N-WAX는 네이버 자체 접근성 가이드를 기준으로 제작되었던 도구였는데, 제가 네이버 퇴사 후 KWCAG 2.0의 기준에 맞추어 품질마크 평가 및 평가 대비 시 활용할 수 있도록 수정하여 OpenWAX라는 이름으로 제작하게 되었습니다.
- 정보화진흥원에서는 K-WAH라는 도구를 제공하고 있는데요. OpenWAX는 K-WAH랑은 어떻게 다른지 각각이 어떤 장점을 갖고 있는지 살펴보겠습니다. 우선 K-WAH는 윈도우에 설치하는 프로그램입니다. 설치 후 실행하여 사용하는 것이죠. 반면에 OpenWAX는 브라우저 확장 기능 혹은 브라우저에 북마크 형태로 추가되는 북마클릿의 형태를 하고 있습니다. 브라우저에서 검사할 웹 페이지를 열어놓은 상태로 실행하는 것이죠. K-WAH의 장점은 사이트를 한번에 평가할 수 있다는 것입니다. 평가할 사이트의 URL을 넣으면 그 사이트를 크롤링해서 각 페이지의 HTML 코드를 통해 검사를 수행하여 보고서를 제공해줍니다. 어떤 사이트의 접근성 수준이 어떤가 알아볼 때 딱이죠. OpenWAX의 장점은 브라우저를 통해 실행하여 오류가 어느 위치에 있는지 쉽게 파악하여 보다 쉽게 수정할 수 있다는 것입니다. 또한 이후에도 말씀드리겠지만 로그인 상태의 페이지도 쉽게 검사하다는 장점 또한 있습니다. 한 페이지, 한 페이지를 심층적으로 점검하고 싶거나 사이트의 접근성 개선하고자 하신다면 OpenWAX를 선택하시면 좋을 것이라고 생각합니다.
- 이제부터는 OpenWAX의 각 항목의 동작 원리, 결과 확인 방법 등을 알아보겠습니다. 먼저 "1. 적절한 대체 텍스트 (img)" 항목입니다. 이 항목은 검사하는 페이지에 사용된 <img>, <input type="image">, <area> 요소를 표시합니다. alt 속성이 아예 없는 경우 오류로, alt 속성이 있지만 비어 있는 경우에는 오류가 의심되는 것으로, alt 속성이 있고 값이 있는 경우에는 해당 alt 속성 값을 표시합니다. longdesc 속성이 정의된 경우 해당 링크가 alt 속성 값과 함께 제공됩니다. 오류와 오류가 의심되는 것은 현재 배경 색과 아이콘으로만 표시되고 있어 접근성 평가도구이면서 아이러니하게도 자체적인 접근성이 없는 상태입니다. 어서 개선하도록 하겠습니다.
- 이제부터는 OpenWAX의 각 항목의 동작 원리, 결과 확인 방법 등을 알아보겠습니다. 먼저 "1. 적절한 대체 텍스트 (img)" 항목입니다. 이 항목은 검사하는 페이지에 사용된 <img>, <input type="image">, <area> 요소를 표시합니다. alt 속성이 아예 없는 경우 오류로, alt 속성이 있지만 비어 있는 경우에는 오류가 의심되는 것으로, alt 속성이 있고 값이 있는 경우에는 해당 alt 속성 값을 표시합니다. longdesc 속성이 정의된 경우 해당 링크가 alt 속성 값과 함께 제공됩니다. 오류와 오류가 의심되는 것은 현재 배경 색과 아이콘으로만 표시되고 있어 접근성 평가도구이면서 아이러니하게도 자체적인 접근성이 없는 상태입니다. 어서 개선하도록 하겠습니다.
- 파이어폭스 확장을 사용하시는 경우 파이어버그가 설치되어 있는 경우 각 평가 결과를 클릭 시 파이어버그에서 해당 결과의 DOM 위치를 표시하여 어떤 위치에 있는 내용인지 찾기가 수월합니다.
- 크롬 확장이나 북마클릿을 사용하시는 경우 각 평가 결과를 클릭 시 해당 결과에 초점을 이동시키며, 개발자 콘솔에 해당하는 DOM의 XPATH를 표시합니다. 파이어폭스 확장보다는 다소 불편하여 개선이 필요한 부분입니다.
- "적절한 대체 텍스트 (bg)" 항목입니다. 이 항목은 검사하는 페이지에 사용된 요소 중 CSS 배경 이미지가 사용된 요소를 표시합니다. 대체 콘텐츠가 없으면 내용이 빈 채로 보이고, 대체 콘텐츠가 있으면 해당 대체 콘텐츠가 표시됩니다. 대체 콘텐츠는 요소가 포함하고 있는 모든 텍스트입니다. 해당 요소 안에 포함된 요소의 수가 지나치게 많은 경우에는 – 보통 wrap, container 뭐 이런 id나 클래스가 쓰인 요소들이 이에 해당되는데요. - 의미있는 이미지인 경우가 드물고 포함된 텍스트가 너무 많아서 무의미하다고 판단하여 결과에 표시되지 않게 해두었습니다.
- "적절한 대체 텍스트 (object)" 항목입니다. 이 항목에서는 페이지에 사용된 <object>, <embed>, <video>, <audio>, <canvas>, <svg> 요소를 단순히 표시만 합니다. 평가할 임베드 콘텐츠가 있다는 정도의 정보라고 생각하시면 되겠습니다.
- 이제부터는 OpenWAX의 각 항목의 동작 원리, 결과 확인 방법 등을 알아보겠습니다. 먼저 "1. 적절한 대체 텍스트 (img)" 항목입니다. 이 항목은 검사하는 페이지에 사용된 <img>, <input type="image">, <area> 요소를 표시합니다. alt 속성이 아예 없는 경우 오류로, alt 속성이 있지만 비어 있는 경우에는 오류가 의심되는 것으로, alt 속성이 있고 값이 있는 경우에는 해당 alt 속성 값을 표시합니다. longdesc 속성이 정의된 경우 해당 링크가 alt 속성 값과 함께 제공됩니다. 오류와 오류가 의심되는 것은 현재 배경 색과 아이콘으로만 표시되고 있어 접근성 평가도구이면서 아이러니하게도 자체적인 접근성이 없는 상태입니다. 어서 개선하도록 하겠습니다.
- "색에 무관한 콘텐츠 인식" 항목입니다. 이 항목에서는 "흑백 토글" 버튼이 하나 제공되며 버튼을 누르면 페이지 전체가 흑백과 원본으로 토글됩니다. 흑백 상태로 만들어 색상 정보를 제거한 후 인식이 안되는 콘텐츠가 있는지 살펴보시면 됩니다.
- "텍스트 콘텐츠의 명도 대비" 항목입니다. 파이어폭스와 구글 크롬 확장을 사용하시는 경우 이 기능을 쓸 수 있는데요. 구글 크롬은 최신 버전으로 해보니 제대로 동작이 안되더군요. 처음 제작했을 때도 매끄럽게 동작은 안되었었는데 잘 안되는 걸 보니 빠른 개선이 필요한 상태입니다. 파이어폭스 확장을 쓰시는 경우에는 잘 이용하실 수 있으리라 생각합니다.
- 이제부터는 OpenWAX의 각 항목의 동작 원리, 결과 확인 방법 등을 알아보겠습니다. 먼저 "1. 적절한 대체 텍스트 (img)" 항목입니다. 이 항목은 검사하는 페이지에 사용된 <img>, <input type="image">, <area> 요소를 표시합니다. alt 속성이 아예 없는 경우 오류로, alt 속성이 있지만 비어 있는 경우에는 오류가 의심되는 것으로, alt 속성이 있고 값이 있는 경우에는 해당 alt 속성 값을 표시합니다. longdesc 속성이 정의된 경우 해당 링크가 alt 속성 값과 함께 제공됩니다. 오류와 오류가 의심되는 것은 현재 배경 색과 아이콘으로만 표시되고 있어 접근성 평가도구이면서 아이러니하게도 자체적인 접근성이 없는 상태입니다. 어서 개선하도록 하겠습니다.
- 이제부터는 OpenWAX의 각 항목의 동작 원리, 결과 확인 방법 등을 알아보겠습니다. 먼저 "1. 적절한 대체 텍스트 (img)" 항목입니다. 이 항목은 검사하는 페이지에 사용된 <img>, <input type="image">, <area> 요소를 표시합니다. alt 속성이 아예 없는 경우 오류로, alt 속성이 있지만 비어 있는 경우에는 오류가 의심되는 것으로, alt 속성이 있고 값이 있는 경우에는 해당 alt 속성 값을 표시합니다. longdesc 속성이 정의된 경우 해당 링크가 alt 속성 값과 함께 제공됩니다. 오류와 오류가 의심되는 것은 현재 배경 색과 아이콘으로만 표시되고 있어 접근성 평가도구이면서 아이러니하게도 자체적인 접근성이 없는 상태입니다. 어서 개선하도록 하겠습니다.
- 이제부터는 OpenWAX의 각 항목의 동작 원리, 결과 확인 방법 등을 알아보겠습니다. 먼저 "1. 적절한 대체 텍스트 (img)" 항목입니다. 이 항목은 검사하는 페이지에 사용된 <img>, <input type="image">, <area> 요소를 표시합니다. alt 속성이 아예 없는 경우 오류로, alt 속성이 있지만 비어 있는 경우에는 오류가 의심되는 것으로, alt 속성이 있고 값이 있는 경우에는 해당 alt 속성 값을 표시합니다. longdesc 속성이 정의된 경우 해당 링크가 alt 속성 값과 함께 제공됩니다. 오류와 오류가 의심되는 것은 현재 배경 색과 아이콘으로만 표시되고 있어 접근성 평가도구이면서 아이러니하게도 자체적인 접근성이 없는 상태입니다. 어서 개선하도록 하겠습니다.
- "초점 이동" 항목입니다. 이 항목에서는 HTML 코드에 onfocus 또는 onclick 속성이 제공되었으며 해당 값에 blur()라는 텍스트가 포함되는 경우 오류로 표시합니다. focus, click 이벤트를 HTML 코드에 넣은 게 아니라 별도의 자바스크립트 코드나 파일로 만든 경우, 아니면 jQuery를 이용하여 이벤트를 추가한 경우는 제대로 검출하지 못하는 문제가 있습니다. 이 항목에서는 또 CSS의 outline-width 속성이 0으로 지정된 경우도 오류로 표시합니다. 이 경우에는 해당 요소에 초점 이동 시 초점이 시각적으로 구분되는지 확인하시어 확인이 된다면 오류가 아닌 것으로 판단하시면 되겠습니다.
- "초점 이동" 항목입니다. 이 항목에서는 HTML 코드에 onfocus 또는 onclick 속성이 제공되었으며 해당 값에 blur()라는 텍스트가 포함되는 경우 오류로 표시합니다. focus, click 이벤트를 HTML 코드에 넣은 게 아니라 별도의 자바스크립트 코드나 파일로 만든 경우, 아니면 jQuery를 이용하여 이벤트를 추가한 경우는 제대로 검출하지 못하는 문제가 있습니다. 이 항목에서는 또 CSS의 outline-width 속성이 0으로 지정된 경우도 오류로 표시합니다. 이 경우에는 해당 요소에 초점 이동 시 초점이 시각적으로 구분되는지 확인하시어 확인이 된다면 오류가 아닌 것으로 판단하시면 되겠습니다.
- "초점 이동" 항목입니다. 이 항목에서는 HTML 코드에 onfocus 또는 onclick 속성이 제공되었으며 해당 값에 blur()라는 텍스트가 포함되는 경우 오류로 표시합니다. focus, click 이벤트를 HTML 코드에 넣은 게 아니라 별도의 자바스크립트 코드나 파일로 만든 경우, 아니면 jQuery를 이용하여 이벤트를 추가한 경우는 제대로 검출하지 못하는 문제가 있습니다. 이 항목에서는 또 CSS의 outline-width 속성이 0으로 지정된 경우도 오류로 표시합니다. 이 경우에는 해당 요소에 초점 이동 시 초점이 시각적으로 구분되는지 확인하시어 확인이 된다면 오류가 아닌 것으로 판단하시면 되겠습니다.
- "건너뛰기 링크" 항목입니다. 여기서는 문서의 최초 10개의 링크 중 샵으로 시작하는 해시 링크와 링크의 연결 여부를 표시합니다. 연결이 되지 않은 링크는 오류로 표시됩니다.
- 표시되는 결과가 최초 10개의 링크 중 샵으로 시작하는 해시 링크가 아니라 정말 건너뛰기 링크만 나오면 좋았을텐데 기계적으로 어떤 해시 링크가 건너뛰기 링크이고 어떤 해시 링크가 그렇지 않은지 구분이 안되더군요. 그래서 최초 10개의 링크 안에 아마도 건너뛰기 링크가 다 포함되어 있으리라 가정하고 이렇게 설계했습니다. 혹시 결과 중 건너뛰기 링크가 아닌 링크가 있으면 이런 까닭에 그렇구나 하고 봐주시면 되겠습니다.
- "제목 제공(<title>)" 항목입니다. 페이지의 제목, 페이지 내에 사용된 프레임의 제목을 표시합니다. 제목이 아예 없는 경우 – 예를 들어 타이틀 태그가 없는 경우는 오류로 표시됩니다.
- "제목 제공(frame)" 항목입니다. 페이지 내에 사용된 프레임의 title 속성을 표시합니다. title 속성이 비어있거나 제공되지 않은 경우 오류로 표시됩니다. 참고로, 프레임 내의 프레임도 대상이 됩니다.
- "제목 제공(<h1>~<h6>)" 항목입니다. 페이지와 프레임 내에 제공된 헤딩 요소와 헤딩 요소의 내용을 표시합니다. 헤딩이 하나도 없다면 검사항목 13의 오류라고 판단하실 수 있으며, 결과에 표시된 헤딩 요소와 그 내용이 제대로 되었는지도 확인하실 수 있습니다.
- "적절한 링크 텍스트" 항목입니다. 페이지 내의 모든 링크(<a>, <area> 요소)와 해당 링크 텍스트, 그리고 링크에 정의된 title 속성과 accesskey를 표시합니다. 링크 텍스트가 없으면 오류로 표시됩니다. title 속성은 링크가 새 창으로 열리는 경우 알림이 제공되었는지를 쉽게 확인하실 수 있도록 들어가 있습니다.
- "기본 언어 표시" 항목입니다. 페이지와 프레임의 <html> 태그에 정의된 lang, xml:lang 속성을 표시합니다. DTD가 XHTML이 아닌 HTML(HTML 4, HTML 5 등)인 경우 lang 속성이 없으면 오류로 표시됩니다. XHTML인 경우에는 lang 속성, xml:lang 속성이 모두 없으면 오류로 표시되며, lang 속성만 있는 경우에는 오류가 의심됨으로 표시됩니다. XHTML 1.0 Transitional은 lang 속성을 쓰는 것도 허용하고 있고 XHTML 1.0 Strict, XHTML 1.1 등 그 이외의 경우에는 xml:lang 속성만을 허용하므로 XHTML이라도 그 종류에 따르게 결과를 다르게 해석해야 합니다.
- "사용자 요구에 따른 실행" 항목입니다. 링크, 버튼 및 사용자 입력서식(<a>, <area>, <input>, <button>) 중 onclick 속성에 "window.open"이라는 문자열이 포함되어 있는 요소들을 표시합니다. 링크 혹은 버튼의 내용과 정의된 title 속성, 정의된 target="_blank" 속성이 함께 표시됩니다. target="_blank"가 쓰였거나 title 속성, 링크/버튼 내용에 "새창", "팝업" 등 새 창 알림이 제공된 단서가 없으면 오류로 표시됩니다.
- "표의 구성" 항목입니다. 사용된 모든 테이블을 표시합니다. 각 테이블에는 caption summary의 사용 여부와 그 내용이 표시되며, thead, tfoot 사용 유무 및 thead, tfoot, tbody에 쓰인 제목셀이 scope 속성값과 함께 표시됩니다. 결과의 해당 테이블이 데이터 테이블인 경우에는 caption, summary, th가 모두 제공되었는지 점검하시고, 레이아웃 테이블인 경우 caption, summary, th가 모두 없는지 점검하시면 됩니다. caption, summary, th 중 일부만 있는 경우에는 어느 쪽이더라도 잘못된 것이므로 OpenWAX에서도 오류로 표시됩니다.
- "레이블 제공" 항목입니다. input, select, textarea 등 모든 입력 서식과 그 유형(input 태그의 type 속성), <label> 태그로 연결된 경우의 레이블 텍스트, title 속성값을 표시합니다. 레이블과 title 속성이 모두 없는 경우 오류로 표시됩니다. title 속성만 제공된 경우 오류가 의심됨으로 표시되고요.
- "마크업 오류 방지" 항목입니다. 페이지와 프레임의 소스 코드를 가지고 validation 검사를 한 후 품질마크에서 다루는 태그의 중첩 오류, 속성 중복 등의 오류만 필터링 해서 표시합니다. XHTML에서 script 태그 내의 소스 코드가 CDATA 섹션 처리 되지 않는 등의 경우 validator가 오작동하여 오류 결과가 잘못 나오는 경우도 있으니 참고하시기 바랍니다. 이 항목은 OpenWAX에서 특별히 자랑할만한 항목인데요. 우선 접근성 오류에 해당하는 validation 결과만 필터링 해서 보여주는 것도 그렇지만, 로그인된 상태의 페이지의 마크업 오류를 검사하는 경우 validator 사이트를 이용할 경우 브라우저에서 로그인 후 소스 코드를 다운로드 받은 후에 다운받은 소스 코드를 validator 사이트에 업로드 하는 번거로운 과정을 거쳐야 검사가 가능한데, OpenWAX는 브라우저에서 로그인 한 후 검사를 하기만 하면 로그인 된 상태의 코드로 결과를 보여줍니다. OpenWAX를 사용하신다면 마크업 오류 방지 점검이 아주 간단해지는 것이죠!
- "마크업 오류 방지" 항목입니다. 페이지와 프레임의 소스 코드를 가지고 validation 검사를 한 후 품질마크에서 다루는 태그의 중첩 오류, 속성 중복 등의 오류만 필터링 해서 표시합니다. XHTML에서 script 태그 내의 소스 코드가 CDATA 섹션 처리 되지 않는 등의 경우 validator가 오작동하여 오류 결과가 잘못 나오는 경우도 있으니 참고하시기 바랍니다. 이 항목은 OpenWAX에서 특별히 자랑할만한 항목인데요. 우선 접근성 오류에 해당하는 validation 결과만 필터링 해서 보여주는 것도 그렇지만, 로그인된 상태의 페이지의 마크업 오류를 검사하는 경우 validator 사이트를 이용할 경우 브라우저에서 로그인 후 소스 코드를 다운로드 받은 후에 다운받은 소스 코드를 validator 사이트에 업로드 하는 번거로운 과정을 거쳐야 검사가 가능한데, OpenWAX는 브라우저에서 로그인 한 후 검사를 하기만 하면 로그인 된 상태의 코드로 결과를 보여줍니다. OpenWAX를 사용하신다면 마크업 오류 방지 점검이 아주 간단해지는 것이죠!
- "마크업 오류 방지" 항목입니다. 페이지와 프레임의 소스 코드를 가지고 validation 검사를 한 후 품질마크에서 다루는 태그의 중첩 오류, 속성 중복 등의 오류만 필터링 해서 표시합니다. XHTML에서 script 태그 내의 소스 코드가 CDATA 섹션 처리 되지 않는 등의 경우 validator가 오작동하여 오류 결과가 잘못 나오는 경우도 있으니 참고하시기 바랍니다. 이 항목은 OpenWAX에서 특별히 자랑할만한 항목인데요. 우선 접근성 오류에 해당하는 validation 결과만 필터링 해서 보여주는 것도 그렇지만, 로그인된 상태의 페이지의 마크업 오류를 검사하는 경우 validator 사이트를 이용할 경우 브라우저에서 로그인 후 소스 코드를 다운로드 받은 후에 다운받은 소스 코드를 validator 사이트에 업로드 하는 번거로운 과정을 거쳐야 검사가 가능한데, OpenWAX는 브라우저에서 로그인 한 후 검사를 하기만 하면 로그인 된 상태의 코드로 결과를 보여줍니다. OpenWAX를 사용하신다면 마크업 오류 방지 점검이 아주 간단해지는 것이죠!
- "마크업 오류 방지" 항목입니다. 페이지와 프레임의 소스 코드를 가지고 validation 검사를 한 후 품질마크에서 다루는 태그의 중첩 오류, 속성 중복 등의 오류만 필터링 해서 표시합니다. XHTML에서 script 태그 내의 소스 코드가 CDATA 섹션 처리 되지 않는 등의 경우 validator가 오작동하여 오류 결과가 잘못 나오는 경우도 있으니 참고하시기 바랍니다. 이 항목은 OpenWAX에서 특별히 자랑할만한 항목인데요. 우선 접근성 오류에 해당하는 validation 결과만 필터링 해서 보여주는 것도 그렇지만, 로그인된 상태의 페이지의 마크업 오류를 검사하는 경우 validator 사이트를 이용할 경우 브라우저에서 로그인 후 소스 코드를 다운로드 받은 후에 다운받은 소스 코드를 validator 사이트에 업로드 하는 번거로운 과정을 거쳐야 검사가 가능한데, OpenWAX는 브라우저에서 로그인 한 후 검사를 하기만 하면 로그인 된 상태의 코드로 결과를 보여줍니다. OpenWAX를 사용하신다면 마크업 오류 방지 점검이 아주 간단해지는 것이죠!
- 지금까지 OpenWAX의 각 검사항목을 하나 하나 살펴보았습니다. 중간중간 느끼셨겠지만 기능이 조금 어설픈 것도 있고 잘 동작이 안되는 것도 있고 그렇습니다. 이것들은 앞으로 보완해야 할 과제라고 생각하고요. WAI-ARIA에서 aria-hidden 속성을 써서 스크린리더에서 읽히지 않게 만든 요소를 결과에서 제거하거나 aria-labelledby 속성으로 해당 요소에 대한 설명을 제공하는 경우를 평가 결과에 반영하는 등 WAI-ARIA에 대한 지원도 추가할 계획을 가지고 있습니다. 이용 가이드를 보완하거나 더 쓰기 쉽게 수정하는 것 등 그 외에도 할 일은 많은 것 같아요.
- OpenWAX는 오픈 소스입니다. 소스 코드는 github에 모두 공개되어 있고요. 누구나 개발에 참여하실 수 있다는 것이죠. 직접 소스 코드 개발이 어려우신 분들도 각 항목의 평가 방법을 개선할 아이디어를 OpenWAX 공식 사이트의 댓글이나 github의 이슈로 등록해주시는 방법으로도 기여해주실 수 있습니다. 저한테 개인적으로 귀띔해주셔도 됩니다.
- OpenWAX는 오픈 소스입니다. 소스 코드는 github에 모두 공개되어 있고요. 누구나 개발에 참여하실 수 있다는 것이죠. 직접 소스 코드 개발이 어려우신 분들도 각 항목의 평가 방법을 개선할 아이디어를 OpenWAX 공식 사이트의 댓글이나 github의 이슈로 등록해주시는 방법으로도 기여해주실 수 있습니다. 저한테 개인적으로 귀띔해주셔도 됩니다.
- 감사합니다.