Blue Breeze

Node.js 웹 접근성 테스트 도구 npm i express pa11y # index.js const pa11y = require('pa11y') async function run() { const response = await pa11y('https://bluebreeze.co.kr') console.log(response) } run() $ node index.js { documentTitle: 'Blue Breeze', pageUrl: 'https://bluebreeze.co.kr/', issues: [ { code: 'WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.InputText.Name', type: 'error', typeCode: 1, message: 'Thi..

네비게이션 링크 복수 페이지 사이의 관계를 링크로 표시하는 기능 네비게이션 링크를 확실하게 지정하면 사이트에서 이동이 편리해지고 사용성이 향상된다. WCAG1.0에서도 '우선도2'로 네비게이션 링크를 지정하게 규정하고 있다. rel속성값 및 내용 start : 시작페이지 next : 다음페이지 prev : 이전페이지 contents : 차례 index : 찾아보기 glossary : 용어집 copyright : 저작권보호 chapter : 장 sectioin : 절 subsecton : 항 appendix : 부록 help : 도움말 bookmark : 즐겨찾기 link 요소로 대체문서를 지정 대체문서 지정, 다른어어버전 표시 및 media 속성을 지정하면 다른 미디어에 적용할 버전을 표시할 수 있다. ..

네임스페이스와 언어코드 XHTML문서에서는 html요소에 네임스페이스와 언어코드를 지정한다. xmlns속성 네임 스페이스는 xmlns 속성으로 지정한다. XHTML에서는 'http://www.w3.org/1999/xhtml' 이 네임 스페이스로 부여되었기 때문에 이 값을 지정한다. xml:lang 속성과 lang 속성 언어코드는 xml:lang속성으로 지정 ISO 639에 규정 XHTML1.0에서는 하위호환성을 고려하여 lang속성에 xml:lang속서오가 같은 값을 지정해 둔다.

웹 접근성 WCAG 1.0 http://www.w3.gor/TR/WAI-WEBCONTENT WCAG(Web Content Accessibility Cuidelines)는 접근 가능한 웹페이지를 제작하기 위한 가이드라인 W3C 권고안으로 1999년 5월 1.0 공표 아래 2개의 테마를 기본으로 14개의 가이드라인과 65개의 검사항목으로 구성 문서가 잘 변환되게한다. 콘텐츠를 이해 가능하고 조작 가능하게 한다. 웹표준 교과서-XHTML가 CSS로 만드는 '바른' 웹 사이트 / 마시코 타카히로 지음 / 김대석 옮김 / 신승식,신현석,조훈,강민혜 감수 / 김진 펴냄 / 조광현 기획 / 디지털미디어리서치 펴념 / ISBN 978-89-955276-3-3

* 데이터 입력의 액세스빌리티 ** 데이터 입력 폼과 가이드라인 - 온라인으로 데이트를 입력받는 폼을 디자인할 때, 특수 브라우즈를 사용하는 사람들도 관련 정보, 입력 필드, 입력과 제출에 필요한 기능에 액세스할 수 있도록 해야 한다.(508조) - 폼. 특수 브라우저에서도 폼을 이용할 수 있더록 하라. - 특수 브라우저 등이 레이블과 폼 컨트롤의 연관 관계를 외적으로 표현할 수 있을 때까지, 내적관계를 규정한 레이블 등을 포함한 폼 컨트롤을 이용하여 모든 폼에 대한 레이블의 위치를 명확하게 지정해야 한다.(WAI 레벨2) - 레이블과 그 컨트롤의 상관 관계를 명시하라.(WAI 레벨2) - 스크린 리더 등의 특수 브라우저에 컨트롤이 빠진 위치를 자동 체그하는 기능이 포함될 때까지, 입력 필드(edit b..

* 네비게이션의 액세스빌리티 - 문서에 두문자나 약자가 처음 나왔을 때는 정식 명칭을 밝힌다.(WCAG 레벨3) -- http://blog.wystan.net/2007/04/14/abbr-vs-acronym-tag ** 스킵 네이게이션 링크에 관한 가이드라인 - 이용자가 반복적인 네비게이션 링크를 건너뛸 수 잇는 방법을 제공하라.(508조) - 메인 컨텐츠로 바로 가기. 네비게이션 링크를 건너뛰고 바로 페이지의 메인 컨텐츠로 이동할 수 잇는 방법을 제공하라(IBM) - 네비게이션 바를 반전 표시하고, 네비게이션에 접근할 수 잇는 루트를 마련하라.(WCAG 레벨3) - 서로 관련된 링크는 그룹핑하고, 특수 브라우저에서 그 그룹을 인식할 수 있도록 식별코드를 부여하라. 특수 브라우저에 이에 대한 지원 기능이..

* 액세스 가능한 컨텐츠 제작 - 이미지를 대신할 텍스트 - 오디오를 대신할 텍스트 - 색상으로 표현된 정보 - 명암 - 액세스 가능한 테이블 - 플래시 기능배제 ** 비텍스트 - 이미지는 alt, longdesc 로 설명을 추가하라 - 이미지에 링크가 연결되어 있을 때에는 alt 속성을 통해 링크로 연결되는 대상의 정보를 전달한다. - 불릿 등의 특별할 의미가 없는 이미지에는 alt=""를 이용하여 어떤 정보도 전달하지 않도록 한다. ""사이에 공란이 있어서도 안 된다. - 인접한 링크들이 서로 중복되지 않도록 하라. 이미지와 그 주위의 텍스트가 동일한 href 속성을 가진 링크를 가지고 있다면, 하나의 태그로 통합하고 이미지에 alt="" 속성을 넣어라. 단, 메뉴 버튼 이미지의 alt 속성에 nul..

* 액세서빌리티 관련법 및 가이드라인에 대한 이해(미국) - 1980년대 장애인에 관한 '전세계적 실행 프로그램(World Programme of Action, 이하 WPA)'의 기초마련 - 1982년 12월 UN 총회 공식적으로 체택 - http://www.un.org/esa/socdev/enable/disun.html '장애인 지위향상을 위한 UN 선언문' - 1993년 12월 총회에서 장애인의 균등 기회 보장을 위한 조항 제5조에서 "액세서빌리티" 개념 명시하고, 물리적 환경의 액세서빌리티와 더불어 정보와 커뮤니테이션에서의 액세서빌리티를 측정 -- http://www.un.org/esa/socdev/enable/dissre04.htm ** 액세서빌리티 보장에 실패한 디자인에 대한 불만 - 법적 기준..

* 유저빌리티와 액세서빌리티의 구분 - 유저빌리티로 인해 발생하는 문제들은 개인의 능력과 상관없이 모든 이용자들에게 동일한 영향을 끼친다. 즉, 장애인이라고 해서 일반인보다 유저빌리티 이슈에 관한 불이익이 더 큰 것은 아니다. - 액세서빌리티로 인해 발생하는 문제는 장애인의 웹 사이트 이용을 어렵게 한다. 일반인들과 달리 장애인들이 불이익을 당하게 되는 경우, 바로 액세서빌리티 이슈가 대두된다. * 액세스 프로세스 - 이용자 중심의 디자인(User-Centered Design, UCD) - 웹 컨텐츠 액세서빌리티에 관한 가이드라인(Web Content Accessibiliry Guidelines, 아하 WCAG) -- 보고, 듣고 움질일 수 없는 이용자들고 있고, 일부 유형의 정보는 쉽게 처리할 수 없거..

* 문법에 맞는 HTML 4.01과 XHTML 1.0을 사용 * CSS와 의미에 맞는 HTML과 구조와 표현의 분리 * progressive enhancement (뭔지 잘 모르겠음. 아시는분?) * W3C DOM 사용 * 의미에 맞는 class와 id 사용 * 이미지에 의미에 맞는 alt 속성 사용 * 링크에 스크립트를 사용할 때에도 기본적인 링크 기능이 작동 하여야 함(href를 유효하게 작성하라는 말) * 스크립트 없이 사용될 수 없는 링크는 HTML에 넣어서는 안됨( 같은 링크 사용하지 말라는 말이죠. HTML과 스크립트를 완전 분리하라는 말:unobstrusive javascript) * 정보를 받기만 하는 폼과 스크립트를 사용해서는 안됨(사용자 입력이 없는 폼이나 스크립트를 사용하지 말라는 말..