| 링크 |
- - 같은 링크라면 되도록 하나의 영역으로 구성합니다.
- - focus값은 꼭 보이도록 설계합니다.
|
| title 지정 |
- - 스크린리더의 경우 현재페이지를 title로 확인합니다.
- - 현재페이지 및 상위페이지까지 지정되어야합니다. 예) 인사말 < 신문사소개 < 홈
- - 기사뷰/게시판뷰의 경우 게시물의 제목까지 노출해줍니다. 예) 123번글 웹접근성의 이해(읽기) < 필수요소 < 웹접근성 < 홈
|
| 배너/팝업 |
- - 배너/팝업관리툴은 제목을 alt값으로 이용합니다.
- - 제목기재시 배너의 상세내용 표기를 권장합니다.
- - 내용을 많을 경우 중요정보/일시/바로가기등의 내용을 기재합니다.
- 예) 2012 대한민국취업박람회, 고용노동부주최 일시 : 2012년 10월30일(화)~31일(수) 10시~17시, 장소: aT센터(서초구 양재동)제1전시장 사이트 방문 바로가기
|
| 이미지 |
- - img태그를 이용한 경우 이미지내용을 표현하는 내용이 기재되어야 합니다. 예) alt="백화점입장을 기다리는 손님들"
- - 디자인요소 사용되는 이미지에는 alt를 빈값으로 기재합니다. 단, alt는 필수기재입니다. 예) alt=""
|
| 자동박스 |
- - 가능한 링크영역(a태그)는 컨텐츠 전체를 감싸는 형태로 구성합니다.
- - 이미지가 background형태라면 대체 텍스트는 지정하지 않습니다. 단, 각개의 링크일 경우는 .show-for-sr 또는 .sr-only 클래스를 이용하여 title내용을 지정해줍니다.
- - 이미지위에 텍스트가 덮는 형태라면 키보드제어시 :focus값이 정상지정 되는지 확인합니다.
|
| table구성 |
- - summary / caption / thead / tbody등의 요소로 구성합니다.
- - caption은 table요소의 제목역할을 수행하기에 절대 display:none으로 지정하지 않고 .show-for-sr 또는 .sr-only 클래스를 이용하여 구성합니다.
|
| 소개/이벤트 |
|
| form구성 |
- - input요소와 label요소를 같이 구성합니다. 예) <input id="a" title="이름" /> <label for="a">이름</label>
- - input요소에는 title을 필수로 기재합니다.
- - tabindex를 이용하여 순서지정을 합니다.
|