0. 시작하는 글
- 외국어 사이트는 언어를 바꿀 때 마다 언어를 지정해 줘야 함(웹접근성 오류)
1. 기본언어 표시
검사항목 17. 주요 사용하는 언어를 명시해야 한다는 의미
1) 기본개념
- 기본언어 명시하면 화면낭독기, 음성지원 프로그램이 정확히 작동
- 중간에 lang속성 통해 언어를 바꿔주면 더 좋은 사이트가 됨
-> html lang속성 사용하여 제공하면 준수한 것으로 인정
2) 오류유형
- <html> lang속성을 명시하지 않거나 잘못 명시한 경우
-> <html lang="ko">
# 인코딩 셋은 EUC-KR이나 UTF-8과 같은 화면에서 보여주기 위한 문자세트인 반면
기본언어는 들려주기 위한 언어 명시임
-> <html lang="ko" xml:lang="ko"> 처럼 <html> 태그 내에 둘다 쓰는 경우는 호환성을 높여주기 위함
- lang속성 값에는 ISO 639-1에서 지정한 두 글자로 된 언어 코드를 사용해야 함
- 페이지 중간에 언어가 바뀔 때 변경된 언어를 lang속성으로 명시해주는 것을 권장
ex)
<p>중국어로는 <span lang="zh"> 你好 </span> </p>
<p>독일어로는 <span lang="de"> ~~~ </span> </p>
# 기본언어 표시에 주의하자
- 스크린리더에서 기본언어가 없다면 혼란을 일으킴
ex) 언어표시가 명확해야 함. 기본언어가 한국어면 ! 를 느낌표라고 읽지만, 영어라면 Question mark라고 읽음
3) 평가 포인트
- 주로 사용하는 언어를 명시
- lang속성 값은 ISO 639-1에서 지정한 언어코드로는 한국어는 ko, 영어는 en, 중국어는 zh 등으로 표현됨
2. 사용자 요구에 따른 실행
검사항목 18. 사용자가 의도하지 않은 기능은 시도되지 않아야 한다
1) 기본개념
- 사용자가 의도 되지 않은 기능은 실행되지 않아야 함
- 필요성 : 사용자가 의도하지 않은 새창이나 초점 변화를 일으키지 않게 하고, 발생시 사전에 사용자에게 알려줌
2) 주의사항 분석
: 새창을 열때 알리는 방법 <a target="_blank">임
: onfocus="this.blur()"를 사용하면 키보드 접근불가, 초점의 시각적 구분불가, 의도치 않음 초점 변화
- 사용자가 의도하지 않은 기능이 자동 실행되지 않도록 제공한 경우 준수한 것으로 인정
3) 평가포인트
- 사용자가 의도하지 않는 기능은 실행되지 않아야 함
- 변화 발생시 사전 공지 또는 사용자가 선택할 수 있도록 함
- 검사내용 : 초점에 따른 변화나 입력에 따른 변화 확인 / 새창 및 팝업이 경고 없이 열리는지 확인
- window.open()을 통해 새창 띄울시 미리 알려줘야 함, title, alt 등에 새창이라고 명시하면 준수된걸로 인정
3. 콘텐츠 선형화
검사항목 19. 콘텐츠는 논리적인 순서로 제공되어야 한다
1) 기본개념
- 컨텐츠 순서가 논리적으로 선형화되어 제공된 경우 준수 : 좌->우, 위->아래 순서
- CSS제거시 콘텐츠가 상식적인 순서로 제공되는가 확인
- 검사항목9 논리적 초점이동과 연관있음
- 대메뉴1(소메뉴들), 대메뉴2(소메뉴들) : 대메뉴 - 소메뉴 다 왔다갔다 하는식으로 가이드되었지만, 대메뉴가면서 하위메뉴가 있다고 표시하는 형식으로 되어야 함
-CSS를 활용하여 서브메뉴 변경
- 반드시 제목과 내용 순이 아니라, 직관적으로 내용을 이해할 수 있는 형태로 구성되어 콘텐츠를 선형화하였을 때 이해가 용이하도록 제공함
2) 오류유형
- 계층구조가 명백하게 필요한 콘텐츠를 중첩 마크업을 이용해 표현하지 않은 경우
- 제목 - 내용으로 구성된 콘텐츠 목록 배치가 분리되어 내용을 직관적으로 이해 할 수 없는 경우
3) 평가포인트
- 검사 내용
: CSS를 제거해서 좌->우, 상->하 등 논리적 순서를 확인
: 2단 이상일 경우: 상위, 하위 관계 확인 ( 상위끼리 이동 후 하위메뉴가 있으면 확장할 수 있다는 식으로 알려주고, 선택시 하위메뉴로 가야 함)
: 제목과 내용 연속된 경우 구조의 콘텐츠가 제목과 내용이 연관관계를 이해할 수 있는지 확인
# CSS제거 후 확인화면
# 탭 게시판도 CSS제거 후 사용 가능 - 제목 - 내용 - 제목 - 내용 순으로 가야 함...
4. 표의 구성
검사항목 20. 표는 이해하기 쉽게 구성되어야 한다
1) 기본개념
- 제목셀과 내용셀을 짝지어 읽히게 해야 함
- 표는 데이터 테이블과 레이아웃용 테이블로 구분
- 데이터테이블 : 본래데이터의 상관관계를 고려해야함 -> 제목셀과 내용셀로 구분하며, 표의 제목과 요약을 제공
- 레이아웃용 테이블 : 디자인 배치를 위해 사용 -> 제목셀, 제목, 요약 등을 제공하지 않음
2) 오류 유형
: <caption> , <summary>
# 국내 표 많이 사용 -> 접근성에 좋지 않으니 -> 표를 잘 기획해야 함
- 표는 표로서 가치만 있을 때 사용, 표안에 표 상비 ,제목을 셀 제목화하는데 주의 하자
3) 평가포인트
- 표는 이해하기 쉽게 구성해야 함
- 제목 또는 요약정보를 <caption>요소와 summary 속성으로 제공하였는지 확인
- 복잡한 표는 headers속성으로 <td>에서 <th>의 id를 참조 또는 scope속성으로 <th>요소에 <td>요소의 범위를 지정하여 제공했는지 확인
- 배치용 테이블에 <caption>요소, summary 속성, <th>요소를 이용하지는 않았는지 확인
5. 레이블 제공
검사항목 21. 입력서식에 대응하는 레이블을 제공해야 한다
1) 기본내용
- 입력서식에는 반드시 레이블을 제공하여 입력창에 대한 설명을 제공
- 레이블과 입력서식이 1:1로 대응하는 경우
: label의 for값과 input의 id 값을 연결
ex) <label for="userId">아이디</label><input type="text" id=userId"/>
cf) 모든 콘텐츠가 id와 for만으로 연결할 수 없는 경우도 있음
- 레이블로 연결할 입력서식이 여러개인 경우
: title속성 값으로 입력서식 요소에 대한 용도나 목적을 제공
2) 오류 유형
a)input, textarea select 태그 요소에 1:1로 대응하는 label요소 또는 title속성을 제공하지 않은 경우
b) dropdown box에서 <select>요소의 첫번째 <option>이 레이블 역할을 대신하는 경우
<select> -> <select title="원하는 색 고르기"> option전 명시함
3) 주의 사항
: 레이블로 연결할 텐스트가 있는 경우 title속성보다는 <label>요소를 제공하는 것을 권장
: id, for속성을 사용하여 label요소와 텍스트를 묶음
-> 암묵적 방법 : <label><input type="checkbox">암묵적</label>
-> 명시적 방법 : <label for="see">명시적</label><input type="checkbox" id="see">
4) 평가포인트
- 입력서식에 대응하는 레이블 제공한 경우 준수한 것으로 인정
- 대표적인 오류유형에는
: <input>, <textarea>, <select>요소에 1:1 대응하는 <label>요소 혹은 title속성이 제공되지 않는 경우
: <input>의 id와 <label>의 for가 다르거나 페이지 안에 같은 id가 있는 경우
: <select> 요소의 첫번째 <option>이 레이블 역할을 대신하는 경우
- 검사내용
: 각 입력서식에 <label>요소나 title이용해 레이블 제공했는지 확인
: <label>요소의 for="값" 과 <input> 등 입력서식의 id="값"이 적절히 짝지어졌는지 확인
- OpenWAX에서 21레이블 제공으로 확인 가능
6. 오류정정
검사항목 22. 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
1) 기본개념 : 오류를 정정할 수 있도록 내용을 알려주고, 이를 정정할 수 있도록 오류 위치로 이동
2) 오류 유형
a) 입력시 오류가 있을 때 입력 내용이 모두 사라지면 않됨
b) 오류 발생시 정정할 수 있는 수단을 제공해야 함
c) 입력 정정방식 또는 내용을 맞게 제공해야 함 - 입력 정정방식시 팝업창을 띄우는게 나음(어떠한 요소를 바꾸는것보다)
3) 평가포인트
- 검사내용
: 입력값 잘못 기재시, 오류내용과 수정방법을 제공하였는지 확인하고 다시 입력할 수 있도록 오류입력 서식 포커스로 이동하는지 확인
: 오류 내용 확인 후 기재하였던 입력 내용이 삭제되는지 확인 -> 기재된 입력내용이 삭제 안되야 함
Ref)
한국정보화진흥원 온라인 교육
웹/모바일 접근성 관련 궁금 한 것들은 물어봐 주세요 ^^
공감 혹은 댓글은
글쓴이에게 큰 도움이 됩니다~
'IT이야기 > Web Accessibility (웹접근성)' 카테고리의 다른 글
| 웹접근성 가이드 : 견고성 (0) | 2017.11.28 |
|---|---|
| 웹접근성 가이드 : 운용의 용이성 (4) | 2017.11.28 |
| 웹접근성 가이드 : 인식의 용이성 (0) | 2017.11.28 |
| 장애인 웹 사용과 장애인 차별 금지법 (0) | 2017.11.08 |
| 접근성 / 웹 접근성 정의 (0) | 2017.11.07 |