웹접근성체크리스트

<img src="map.gif" alt="대한민국 전국지도" usemap="#Map">
<map id="Map" name="Map">
<area shape="rect" coords="169.610.247.139" href="#" alt="서울">
<area shape="rect" coords="169.630.207.119" href="#" alt="경기도">
....
</map>

• 비교차트, 파이차트, 2가지 이상의 범례를 비교하는 내용 등에는 배경패턴 또는 구분되는 이미지(블릿 등)을 적용

• 활성/비활성 된 내용의 구분이 뚜렷하도록 활성에 볼드 또는 언더라인 등으로 구분되어 있는가?
• 배경색 또는 폰트칼라의 차이만으로 활성/비활성을 구분하는 것은 올바르지 않음

• 보통크기(24px 미만 또는 굵은 19px 미만)의 텍스트는 4.5:1을 만족해야함
• 보통크기 이상의 텍스트 (24px 이상 또는 굵은 19px 이상)의 텍스트는 3:1을 만족해야함
• [* 지침2.1 수정안] 화면의 확대가 가능한 콘텐츠는 3:1의 명도대비를 기준으로 함.(화면확대 불가시 4.5:1 준수)

• 다음이동 : Tab, 이전이동 : Shift+Tab, 클릭대체 : Enter, 라디오버튼 : 키보드 방향키 등
• 동등하게 제공되는 키보드 이벤트 핸들러(onkeypress, onkeyup, onkeydown 등) 없이 마우스 이벤트 핸들러(onmouseover, onmouseout 등) 만 제공되어 지는 경우는 올바르지 않음.

• 자연스러운 논리적 이동을 위해 tabindex 사용을 지양한다.
• 약관 또는 스크롤을 표현하는 div의 경우 해당 영역으로 포커스가 진입되어 스크롤을 핸들링 할 수 있도록 tabindex="0" 의 값을 제공해야 한다.

• onfocus="this.blur()" 또는 css내 outline="none" 등의 내용이 선언되어 있으면 안됨.
• 초점을 표시하는 방식은 초점을 받았을때 해당 모양이 반드시 점선의 사각형이 아니더라도 시각적으로 구분이 가능하다면 초점을 제공한 것으로 간주함

• 컨트롤의 크기가 가로 대각선 방향으로 6.0mm 이상의 크기를 제공하고 있는가?

• 컨트롤러가 명시적으로 제공되지 않아도 키보드 진입시 콘텐츠를 제어할 수 있으면 제공한 걸로 인정(* 컨트롤러 명시를 권장)
• 컨트롤러의 위치가 움직이는 콘텐츠보다 마크업 순서상 먼저 배치되어 있는가?

• [* 지침2.1 수정안] 화면내 명시적으로 제공하고 있는가?

• [* 지침2.1 수정안] 여러 개의 건너뛰기 링크를 제공하고 있는 경우 핵심영역으로 이동하기 위한 건너뛰기 링크가 가장 먼저 제공되고 있는가?

• 팝업창은 팝업창임을 문서 타이틀에 명시해야 한다.(ex 팝업창 | 로그인)
  > 신청 또는 작성하기 화면도 문서타이틀에 해당 내용을 명시할 것(한국웹접근성 인증평가원 권고사항)
• 페이지 제목이 콘텐츠의 내용을 나타내야 한다.
  > 대표인사말 | 회사소개 | COMPANY
• 문서 타이틀 제공시 의미없는 특수문자의 반복이 있는가?(반복이 있으면 오류)
  > [오류ex] ::::::: COMPANY ::::::::::, ▩▩ COMPANY ▩▩... 등
• 콘텐츠의 구분은 h1 ~ h6 요소를 활용하여 재공하고 있는가?
  > 콘텐츠의 제목은 논리적 순서에 맞게 제공되고 있어야 함.

• 링크는 주변 맥락을 통하여 용도나 목적지를 명확하게 이해할 수 있는 링크텍스트를 제공하고 있는가?
• 문장의 일부분에 링크를 연결하는 경우 URL목적지, 용도 등을 표현한 링크를 연결하고 있는가?
  > [ 오류ex ] 주문내역에 대한 상세정보는 여기를 클릭하세요.
  > [ 올바른 ex ] 주문내역에 대한 상세정보는 [마이페이지 > 주문정보]에서 확인하실 수 있습니다.

• 기본언어는 페이지 상단에태그에 lang속성을 이용하여 지정하고, lang 속성 값에는 ISO 639에서 지정한 두 글자로 언어코드 (한국:ko)를 사용하도록 한다.
  > ISO 639 참고 : http://www.mcanerin.com/en/articles/meta-language.asp

• [* 지침2.1 수정안] 사전 경고없이 열리는 팝업창의 수는 1개이다.

• 레이아웃용(배치용) table에 caption, summary, thead, th 의 요소가 제공될 경우 오류임.

• 반드시 제목+내용의 구조가 아니더라도, 직관적으로 내용을 이해할 수 있는 상태로 이해가 용이하게 제공.

  <ul>
      <li><a href="#menu01" class="on" title="현재메뉴">메뉴1</a></li>
      <li><a href="#menu02">메뉴2</a></li>
      <li><a href="#menu03">메뉴3</a></li>
  </ul>
  
  <div id="menu01">
  	<strong>메뉴1</strong>
      <div>메뉴1 컨텐츠</div>
  </div>
  <div id="menu02">
  	<strong>메뉴2</strong>
      <div>메뉴2 컨텐츠</div>
  </div>
  <div id="menu03">
  	<strong>메뉴3</strong>
      <div>메뉴3 컨텐츠</div>
  </div>
  

• 입력서식에 대응하는 레이블을 제공한 경우 준수한 것으로 인정
• 오류유형
  > <input type="image | hidden | submit | button | reset">을 제외한 모든 <input>, <textarea>, <select> 요소에 1:1 대응하는 <label> 요소 또는 title 속성을 제공하지 않은 경우
  > <input>의 id 와 <label>의 for 가 다르거나, 페이지 안에 같은 id 가 있는 경우
  > <select>요소의 첫 번째 <option>이 레이블 역할을 대신하는 경우
  > 입력을 위한 도움 안내메세지가 입력양식보다 우선으로 제공되고 있는가?
  [ 오류ex ] <input type="text"><span>아이디는 영문과 숫자를 혼용으로 입력하셔야 됩니다.</span>
  [ 올바른ex ] <span>아이디는 영문과 숫자를 혼용으로 입력하셔야 됩니다.</span><input type="text">
• 주의사항
  > 레이블로 연결할 텍스트가 있는 경우 title 속성보다 <label> 요소를 제공하는 것을 권장
  > id, for 속성을 사용하지 않고 <label> 요소로 레이블 텍스트와 서식 콘트롤을 한꺼번에 묶는 암묵적인 방법을 사용한 경우도 인정하지만 권장하지 않음.
  > 예시) 암묵적방법 : <label><input type="checkbox"> 암묵적</label>,
  명시적방법 : <label for="see"> 명시적</label><input type="checkbox" id="see">

• 입력 오류를 정정할 수 있는 방법을 제공한 경우 준수한 것으로 인정(입력오류 정정에 대한 내용은 구체적으로 제공해야 함)
• 오류유형
  > 입력 서식을 잘못 작성한 경우 해당 서식 필드로 초점을 이동할 수 있는 수단을 제공 하지 않거나 해당 서식의 전송버튼을 눌렀을 때, 입력 내용이 모두 사라지는 경우
  > 오류 발생시, 정정할 수 있는 수단을 제공하지 않는 경우
  > 입력 정정방식 또는 내용을 잘못 제공한 경우
  [ 오류ex ] 서식의 내용을 입력해주세요. | 입력서식의 내용이 올바르지 않습니다. | 날짜를 선택해 주세요.
  [ 올바른 ex ] 이름을 입력해주세요. | 비밀번호 입력이 잘못되었습니다. | 년도(or 년월일)을 선택해주세요.
  > 입력 오류로 정정 메세지 확인후에는 오류가 난 입력서식으로 초점이 이동되어야 함.(키보드 접근성을 함께 확인)
• 주의사항
  오류가 있는 곳에만 오류 표시를 하면 전맹이나 저시력자는 오류가 난 곳에 도달 하기 전까지는 어디에 오류가 있는지 알기 어려우므로 오류의 내용을 먼저 텍스트로 설명해주거나, 프로그램을 통해 오류가 난 위치에 도달하도록 하고, 오류의 내용을 설명해 주어야 함

<p><span>태그 여닫음에 대한 오류<span></p>

<a href="#"><span>태그 속성 중첩 대한 오류</a></span>

<p class="test" class="tit">클래스중첩오류</p>
<input type="text" name="testGroup" name="testGroup">

<input type="text" id="testGroup">
<input type="password" id="testGroup">

• 웹 어플리케이션에 대한 자체 접근성 준수는 사용자 심사에서 진행됨

• ex. 이미지 대체텍스트, 링크 새창알림, 타이틀 등

• 새로고침, 더보기 버튼 등을 통한 데이터 업데이트 제공
• 실시간 데이터 갱신일 경우, 멈춤 기능 제공