웹표준: 건너뛰기 링크 제공, 접근성 대체 텍스트 표현방법

건너뛰기 링크(skip navigation)의 제공

- 반복되는 메뉴가 있는 경우에는 건너뛰기 링크를 제공해야 한다.

- 상단의 대메뉴들을 일일히 탭으로 이동하여 아래쪽 본문까지 내려오는 것이 아니라, 메뉴바에서 바로 아래쪽 본문으로 내려갈 수 있는 링크를 말한다.

1. skip navigation

- skip navigation 이전에 컨텐츠가 없도록 한다.

- http://www.samsung.co.kr 참조

<div id=“skipNav"><a href="#mainContent">본문 바로가기</a></div>

2. 구현 형태

1) 상시 숨김 ex) http://naver.com

- 건너뛰기 링크는 육안으로 보이게 하는 것을 권장하며 최소한 키보드로 접근시에는 보여져야 한다.

#skipNav {

position: relative;

z-index: 9999;

}

#skipNav a {

display: block; /* 네이버 참조 */

position: absolute;

top: -3000px;

}

#skipNav {position:relative;z-index:9999;} /* z인덱스를 크게 줘서 안보이게 처리한다. */

2) 상시 보임 ex) http://www.wah.or.kr/

- 탭을 누를 때마다 '본문 바로가기', '주메뉴 바로가기'가 바뀐다.

3) 키보드 접근시 보임 ex) http://www.samsung.co.kr

- www.samsung.co.kr 탭 눌러보면 본문 바로가기 뜬다.

- 링크에서 안보이게 해놓은 뒤 롤오버시 보이게 하는 식으로 지정했다.

#skipNav a {

height:1px; width:1px; margin:0 -1px -1px 0; padding:0;

font-size:0; line-height:0;

}

#skipNav a:hover, #skipNav a:active, #skipNav a:focus {

width:100%; height:auto; margin:0; padding:5px 0;

font-size:12px; line-height:1; text-decoration:none;

}

웹접근성 대체 텍스트 표현방법

1) 이미지 텍스트와 배너

- alt 속성으로 대체 텍스트 지정

- 배경 이미지 표현 시 별도의 대체 텍스트 지정

- 배경이미지 표현시 네이버 상단 홈 로고의 태그 참조. <span>네이버</span>

2) 심볼

- 배경 이미지 표현 시 별도의 대체 텍스트 지정

- 툴팁을 위한 title 속성과 별도로 대체 텍스트 지정

3) 그림과 사진

- alt 속성에 대체 텍스트 지정

- 그림이나 사진을 설명하는 글이 별도로 제공된 경우 alt=""를 사용

- 이미지 설명이 필요없을 때에도 alt="" 이렇게 아무것도 없는 alt 넣어야만 한다.

4) 그래프와 다이어그램

- alt 속성에 정보를 빠짐없이 입력

- 내용이 많으면 longdesc 속성을 활용하여 별도의 설명 페이지 작성

<img src=“chart.jpg” alt=“시세변동” longdesc=“graph.html” />

5) QR 코드

- alt 속성에 코드의 의미와 URL 정보를 지정

- URL 정보를 별도로 지정해도 좋음

- QR코드 이미지는 alt에 무슨코드인지와 링크주소를 함께 표시할 것.

<img src=“chart.jpg” alt=“로또코드 http://www.645lotto.net/” />

6) 장식, 블릿 이미지

- alt 속성을 빈 값으로 지정

- 배경으로 표현 시 별도의 대체 텍스트 지정하지 않음

7) 캡차(captcha) 이미지

- 자동 가입 방지를 위한 캡차 이미지 사용시에는 음성 캡차를 함께 제공

- 구글닷컴의 reacptcha 제공 이미지를 사용할 수 있다. 구글캡차는 음성도 지원된다. (아이핀은 구형)

8) 지도

- 하단에 상세한 설명 표기

- 청와대 찾아가는 길 맵 참조

title에 아래 설명 참조하라는 식으로 사용한다. 설명이 다음에 나오면 굳이 이미지 안에 설명 필요없다.