웹 접근성 점검 규칙
가) 대체 택스트 제공
① <img>태그의 alt 속성 제공 여부 - alt 속성의 정확성은 판단하지 않음
- alt 속성이 없고 longdesc도 제공하지 않으면 불합격
- alt 속성을 제공하면 합격으로 평가 예를 들어, 속성으로 null 값을 제공(alt="")하더라도 합격, 부적합한 속성 값을 제공(alt= "....")하더라도 합격
② <area>태그의 alt 속성 제공 여부 - alt 속성의 정확성은 판단하지 않음
- alt 속성이 없고 longdesc도 제공하지 않으면 불합격 예를 들어, 속성으로 null 값을 제공(alt="")하더라도 합격, 부적합한 속성 값을 제공(alt= "....")하더라도 합격
③ <input> type="image" 태그의 alt 속성 제공 여부 - alt 속성의 정확성은 판단하지 않음
- alt 속성이 없고 longdesc도 제공하지 않으면 불합격 예를 들어, 속성으로 null 값을 제공(alt="")하더라도 합격, 부적합한 속성 값을 제공(alt= "....")하더라도 합격
④ <applet> 태그의 alt 속성 제공 여부 - alt 속성의 정확성은 판단하지 않음
- alt 속성이 없고 longdesc도 제공하지 않으면 불합격 예를 들어, 속성으로 null 값을 제공(alt="")하더라도 합격, 부적합한 속성 값을 제공(alt= "....")하더라도 합격
나) 제목제공
① 웹문서의 <title>태그의 '유효한 값'의 제공 여부
- 문서에 <title> 태그가 없으면 불합격
- 문서에 <title> 태그가 있으나 값이 null("")이거나 white space(\n, \r, \t, " " 등)이면 불합격
※ 여기서 유효한 값이란 공백문자가 아닌 한영문 문자열을 제공해야 한다는 의미입니다.
② <frame>태그의 title 속성 제공 여부 - title 속성의 정확성은 판단하지 않음
- <frame> 태그에 title 속성 제공 안 하면 불합격
- <frame> 태그에 title 속성 있으나 값이 null("")이거나 white space(\n, \r, \t, " " 등)이면 불합격
③ <iframe>태그의 title 속성 제공 여부 - title 속성의 정확성은 판단하지 않음
- <iframe> 태그에 title 속성 제공 안 하면 불합격
- <iframe> 태그에 title 속성 있으나 값이 null("")이거나 white space(\n, \r, \t, " " 등)이면 불합격
다) 기본언어정의
① <html> 태그의 lang 속성을 제공 여부
- <html> 태그에 lang 속성 제공 안하면 불합격
- lang 속성을 제공하더라도 속성값이 ISO 표준에서 정의한 언어 또는 확장 언어가 아니면 불합격
※ K-WAH4.4에서는 'EN-US'와 같이 기본 언어를 확장한 언어 규칙에 대응하도록 개선하였습니다. 따라서 K-WAH4.4은 기존 버전보다 더 정확한 기본언어 평가가 가능합니다. 아울러 오류 유형을 확장하여 '기본언어 미제공'과 제공하는 기본언어 코드가 잘못된 경우를 의미하는 '기본언어 오류'로 세분화하였습니다.
② DTD 형식에 따른 기본 언어 제공 방법을 평가
- html 4.01/html5
<html> 태그에 lang 속성을 제공하지 않으면 불합격(기본언어 미제공)
lang 속성을 제공하지만 속성값이 ISO 표준에서 정의한 언어 또는 확장언어가 아니면 불합격(기본언어 오류)
- xhtml 1.0/xhtml 1.1
<html> 태그에 lang 속성과 xml:lang 속성을 둘 다 제공하지 않으면 불합격(기본언어 미제공)
lang 또는 xml:lang 속성을 제공하지만 속성값이 ISO 표준에서 정의한언어 또는 확장언어가 아니면 불합격(기본언어 오류)
라) 새창열림 사전공지
① <a> 태그를 이용한 새창 열기시에 사전 경고 제공 여부
- <a> 태그에서 target 없으면 합격
- <a> 태그에서 target="_blank" 이면 합격
- <a> 태그에서 target="_self" 이면 합격
- <a> 태그에서 target="_top" 이면 합격
- <a> 태그에서 target="_parent" 이면 합격
- <a> 태그에서 target="프레임명" 이면 합격
이 외의 경우에
- title 속성이 "창", "윈도", "window" 등의 문자열을 포함하고 있으면 합격
- 링크텍스트가 "창", "윈도", "window" 등의 문자열을 포함하고 있으면 합격
- <a> ... <img alt=" ">... </a>와 같이 <a> 로 둘러쌓인 이미지 태그의 alt 속성이 "창","윈도","window" 등의 문자열을 포함하고 있으면 합격
- 이외에는 불합격
- onclick = window.open( ) 과 같은 소스 코드를 사용하는 경우 winodw.open( )의 파라메터가 "_blank", "_self", "_parent", "_top" 중의 하나를 포함하고 있으면 합격
② <area> 태그를 이용한 새창 열기시에 사전 경고 제공 여부
- <area> 태그의 target 없으면 합격
- <area> 태그의 target="_blank" 이면 합격
- <area> 태그의 target="_self" 이면 합격
- <area> 태그의 target="_top" 이면 합격
- <area> 태그의 target="_parent" 이면 합격
- <area> 태그의 target="프레임명" 이면 합격
이 외의 경우에
- title 속성이 "창","윈도","window" 등의 문자열을 포함하고 있으면 합격
- alt 속성이 "창","윈도","window" 등의 문자열을 포함하고 있으면 합격
- 이외의 경우는 불합격
- onclick = window.open( ) 있을 때 winodw.open()의 파라메터값 중 "_blank", "_self", "_parent", "_top" 중의 하나를 포함하고 있으면 합격
마) 레이블제공
① <input> 요소에 레이블 또는 title 제공 여부 - 레이블 또는 title의 정확성 여부는 판단하지 않음
- <input> 태그의 id="..." 속성 값이 label for = "..."로 선언되었으면 합격
- <input> 태그의 title 속성을 제공하면 합격(id제공시에도 title 우선 적용)
- <input> 태그의 title 속성을 제공하나 빈 문자열이면 불합격(제공하지 않은 것으로 간주)
- <label><input .../></label> 과 같이 label 태그내에 input 태그를 포함시킨 암묵적 방법은 합격
② <textarea> 요소에 레이블 또는 title 제공 여부 - 레이블 또는 title의 정확성 여부는 판단하지 않음
- <textarea> 태그의 id="..." 속성 값이 label for = "..."로 선언되었으면 합격
- <textarea> 태그의 title 속성을 제공하면 합격(id제공시에도 title 우선 적용)
- <textarea> 태그의 title 속성을 제공하나 빈 문자열이면 불합격(제공하지 않은 것으로 간주)
- <label><input .../></label> 과 같이 label 태그내에 input 태그를 포함시킨 암묵적 방법은 합격
이외의 경우 불합격
③ <select> 요소에 레이블 또는 title 제공 여부 - 레이블 또는 title의 정확성 여부는 판단하지 않음
- <select> 태그의 id="..." 속성 값이 label for = "..."로 선언되었으면 합격
- <select> 태그의 title 속성을 제공하면 합격(id제공시에도 title 우선 적용)
- <select> 태그의 title 속성을 제공하나 빈 문자열이면 불합격(제공하지 않은 것으로 간주)
- <label><input .../></label> 과 같이 label 태그내에 input 태그를 포함시킨 암묵적 방법은 합격
이외의 경우 불합격
바) 마크업 문법
① 아이디 중복 선언
- 한 페이지에서 동일한 아이디를 중복 사용하면 오류
② 속성 이름 선언
- 한 페이지에서 속성 이름을 중복 사용하면 오류
③ 태그 열고 닫음
- 태그 열고 닫음이 일치하지 않으면 오류
④ 닫는 태그 누락
- 여는 태그에 대한 닫는 태그가 없으면 오류
⑤ 여는 태그 누락
- 닫는 태그에 대한 여는 태그가 없으면 오류
⑥ 태그의 정확한 중첩 관계
- 태그의 열고 닫는 순서의 중첩 관계가 엇갈리면 오류
'개발의 흔적 > Front' 카테고리의 다른 글
| google traslate 구버전에서 자동 번역 기능 추가 하는 방법 (1) | 2019.02.12 |
|---|---|
| [jQuery] 여러 건의 ajax 통신 (2) | 2018.08.29 |
| CSS정리 (0) | 2016.02.22 |
| HTML정리 (0) | 2016.02.22 |
| JQuery 선택자의 종류(HTML 태그명, ID명에 접근하는 방법) (0) | 2016.02.01 |