KWCAG 2.0 의 Skip Navigation(건너뛰기 링크) – 본문으로 가면 그만?
Skip Navigation (이하, 건너뛰기 링크) 는 시각 장애인들이 스크린 리더를 사용해 네비게이션 시에 매 페이지 마다 반복되는 페이지 상단의 메뉴 혹은 잡다 반복 링크들을 건너 뛰어 페이지 내용에 바로 접근할 수 있도록 페이지 최 상단에서 제공하는 페이지 내 링크들을 말합니다.
Skip Navigation 에 대한 자세한 내용에 대해서는 성민장군님의 “Skip Navigation(건너뛰기 링크, 스킵 네비게이션)은 Quick Link가 아닙니다.” 포스트 하나면 될 것 같습니다. 생소하신 분들에게는 일독을 권합니다. (덧. 성민장군님의 이 포스트는 블로그 디자인 덕도 있겠지만, 쉬원쉬원하고 정성이 가득한 가치있는 포스팅이라고 생각합니다. 부럽습니다. 아흑)
누구를 위한 것인가
KWCAG 1. 0 (한국 웹 콘텐츠 접근성 지침) 에서는 건너뛰기 링크 에 대해서 다음과 같이 말하고 있습니다.
지침 8. 웹 콘텐츠는 반복 네비게이션 링크를 뛰어넘어 페이지의 핵심 부분으로 직접 이동할 수 있도록 구성하여야 한다.
- 웹 콘텐츠 상에 반복 네비게이션 링크 객체가 포함되어 있으며 이 링크 객체가 콘텐츠의 핵심부분보다 먼저 읽어주도록 구성된 경우에 이들 링크들의 읽기를 생략하고 직접 콘텐츠의 핵심 부분으로 이동할 수 있는 링크를 제공하여야 한다.
- 하나의 긴 문장으로 구성된 웹 페이지는 이 페이지의 문장을 여러 개의 논리적인 절로 구분하고 각 절의 색인을 콘텐츠의 첫 부분에 포함시켜 원하는 절의 시작 부분으로 직접 이동할 수 있도록 웹 페이지를 구성한다.
- 모든 웹 사이트는 텍스트 또는 대체 텍스트가 포함된 사이트 맵을 제공해야 한다.
덧붙여 “우수 사례” 로 2가지 모두 “보이지 않는 건너뛰기 링크 제공” 을 들고 있는데, 이는 일반 화면으로 볼 경우에는 보이지 않고 키보드를 사용하는 경우 포커스를 받을 수 있도록 화면에서는 숨겨 놓은 건너뛰기 링크를 말합니다.
하지만, 이렇게 건너뛰기 링크를 화면에서 숨겨 놓은 경우 화면은 인식하지만 키보드만을 사용하는 사용자에게는 무용지물이 됩니다. 키보드로만 서핑하는 사용자들에게도 건너뛰기 링크는 필수적입니다. 그렇지 않으면 본문의 링크를 이용해야 하는경우 TAB키를 무수히 많이 눌러야 합니다. 매 페이지에서 말이죠.
건너뛰기 링크는 스크린 리더를 사용하는 시각 장애인에게도 물론 유용하지만, 키보드로만 서핑하는 환경의 사용자들에게도 반드시 필요한 요소입니다.
KWCAG 2.0 에서는 이러한 부분이 적용되었습니다.
얼마전(2009년 12월 22일)에 KWCAG 2.0 이 제정되었습니다. KWCAG 2.0 에서는 이 부분을 명확하게 다루고 있습니다. 올바른 적용의 예로 아래와 같은 경우들을 들고 있습니다.
- 메뉴를 건너뛸 수 있게 건너뛰기 링크를 제공한 경우
- 화면에 보이지 않지만 키보드로 접근하면 펼쳐지는 메뉴 건너뛰기 링크를 제공한 경우
- 메뉴를 건너뛸 수 있게 건너뛰기 링크를 화면상에 제공한 경우
반복적인 내비게이션 링크(본문 바로가기 등)를 숨기지 않고 화면상에 제공하는 것이 가장 바람직함
개인적으로는 “화면에 보이지 않지만 키보드로 접근하면 펼쳐지는 메뉴 건너뛰기 링크를 제공한 경우” 가 가장 바람직하다고 생각하는데 지침에서는 “건너뛰기 링크를 화면상에 제공한 경우”를 가장 바람직하다고 하네요.
건너뛰기 링크를 화면에 표시하는 건 위에서도 언급했지만 화면은 인식하지만 키보드만으로 서핑하는 환경의 사용자에 대한 배려일겁니다. 그런데, “건너뛰기 링크를 화면상에 제공한 경우” 특히, 이를 이미지로 제공한 경우 포커스가 갔을 때 식별하기가 쉽지 않습니다.
정지화면에서는 식별이 쉽지만, 키보드 이동중에는 주위 깊에 봐야 식별 가능합니다.
거기다가 건너뛰기 링크가 디자인 요소가 되어 버립니다. 마우스를 사용하는 사용자는 사용하지도 않는데 말이죠. 결국, 없어도 되는게 화면에 자리를 차지 하게 됩니다. 그래서 저는 일반적인 화면에서는 보이지 않지만 키보드로 접근했을 때 건너뛰기 링크가 표시되도록 하는 방법이 더욱 바람직하다고 생각합니다. 화면에 표시하는 방법이 틀렸다는게 아니라 굳이 나은걸 따지자면 숨겼다가 표시하는 쪽이 낫다는겁니다. “둘 다 좋지만 후자가 조금 더 좋다… 고 생각한다.” 입니다. 
어떻게 구현하나
http://www.webstandards.org/ 사이트에 가셔서 TAB키로 페이지 접근해 보면 “skip to content” 링크가 나타납니다. (신현석님이 댓글로 정보를 주셨습니다.)
그리고, 제 블로그에서도 사용하고 있었(!)습니다. 이 포스트를 작성하기전에 테스트 해보느라 넣어봤습니다.
"양군팩토리"에 사용된 건너뛰기 링크. 포커스를 받으면 표시됩니다.
HTML은 BODY 태그 바로 다음에 아래와 같은 코드를 추가합니다.
<a href="#main" class="skip-navi">본문으로 바로가기</a>
CSS 는 다음과 같습니다.
/* 처음에는 숨깁니다. for-reader 등의 스크린리더를 위한 공통의 class를 사용해도 좋을것같습니다.*/
a.skip-navi {
display: block;
position:absolute;
top:0;
left:-2000px;
}
/* 포커스를 받으면 화면 좌상단에 표시합니다. 식별하기 좋게 말이죠 */
a.skip-navi:hover, a.skip-navi:focus {
left:0%;
width:200px;
padding: 10px;
background: #FFFFCC;
border:1px dotted #FF9900;
color: #990000;
text-align:center;
font-size:1.3em;
}
본문으로 건너 뛰면 그만 ?
보통의 홈페이지 레이아웃
보통의 홈페이지들은 위와같은 레이아웃을 가집니다.
- 헤더: 로고, 메인메뉴와 그 하위 메뉴 목록, 검색, 유틸 메뉴 …
- 서브메뉴: 현재 페이지의 이웃 혹은 하위 메뉴 …
- 콘텐츠 영역: 웹 어플리케이션 혹은 콘텐츠 …
- 사이드바: 퀵 링크, 관련 메뉴, 위젯 …
- 풋터: 퀵 링크, 저작권, 연락처 …
건너뛰기 링크는 위에서 1번과 2번 영역을 건너뛰게 해줍니다. 바로 3번으로 접근하도록 해주죠. 하지만, 3번 영역의 콘텐츠를 모두 사용한 다음은 어떨까요 ? 콘텐츠를 모두 읽은 후에 다른 페이지로 이동 하려면 ? 네, 다시 TAB을 연타한 후 다시 페이지 처음으로 돌아가 메뉴를 뒤져야 합니다. 위의 사이트 (웹 접근성 연구소) 처럼 4번(사이드바) 다음에 “위로가기” 링크(헤더로 이동)를 제공하면 그나마 낫습니다. 지금까지 봐온 바로는 보통 4번 (사이드바)을 플로팅 시키기 위해서 4번(사이드바)과 5번(풋터)의 순서를 바꿔서 마크업 하고, 4번과 5번에 또 수십게의 링크가 존재하기도 합니다. 상단에 “본문 바로가기” 건너뛰기 링크를 제공한 의미가 퇴색됩니다.
그래서 저는 본문 콘텐츠가 끝나고 나서 바로 다시 한번 건너뛰기 링크를 제공하는게 어떤가 하고 제안합니다. 사이드바, 풋터 역시 매 페이지마다 반복되는 “반복 영역”이기 때문에 이를 건너뛰기 위한 수단이 필요한게 아닌가 하고 말이죠. 게시판과 같은 경우에야 목록에서 게시물 선택 해 조회하고 다시 “목록”등의 버튼을 눌러 페이지간 이동이 용이하지만, 단순 콘텐츠의 경우에는 콘텐츠가 끝나는 지점에 “메뉴로 가기”, “사이트 맵 바로가기” 등과 같이 다른 페이지로 이동할 수 있는 기능을 제공하는 곳으로의 건너뛰기 링크를 제공하면 어떨까 합니다.
생각이 변했습니다. 이 의견도 나쁘지는 않지만 하단에 추가된 내용이 더 낫다고 생각해 본래 내용은 희미하게 처리합니다.
추가 [2010-01-19 10:45]
위에서 “본문 콘텐츠 바로 뒤에 하단의 반복 영역을 건너 뛸 수 있는 건너뛰기 링크를 제공하는게 어떤가” 하고 말씀 드렸습니다.
이에, 성민장군님께서 “사용자 스스로 상단으로 이동할 수 있으므로, 콘텐츠 뒤로 이어지는 하단에 반복되는 링크를 건너뛰는 링크는 필요없다.” 라는 말씀을 댓글로 남겨주셨습니다.
포스트 당시에도 ‘사용자가 맨 위로 이동이 안되는가 ?’ 생각했었는데, 제가 알고 있는대로 PageUp 키를 눌러서 화면을 올릴 수는 있지만 실제 포커스를 옮길 수는 없다고 판단해 위와 같은 글을 작성했습니다.
그런데, 시각장애인이 사용하는 스크린리더에는 그런 기능이 있었네요 가상커서 모드에서 Ctrl + Home 키를 누르면 문서 처음으로 이동할 수 있습니다. 그렇다면 키보드만 사용하는 환경에서는 ? 이라는 의문을 가졌지만 이도 방법이 있습니다.
firefox 에서의 설정
IE 에서의 설정
보시는 것 처럼 Firefox, IE 에서는 접근성 설정을 제공하는데, 각각 “커서키를 항상 페이지 내에서 사용”과 “새 창과 탭에서 커서 브라우징 사용” 옵션을 활성화 하면 스크린리더의 가상커서 모드처럼 Ctrl + Home 키를 이용해 문서 처음으로 이동할 수 있었습니다.
스크린 리더와 브라우저에서 페이지의 상단으로 이동할 수 있는 기능을 제공하고 있으므로 성민장군님 말씀대로 콘텐츠 뒤에 다시 건너뛰기 링크를 제공하는것은 “과한 배려”가 되는게 맞겠네요. (브라우저에서 제공하는 기능을 웹 페이지에서 중복 제공하는 건 ‘의미없다’라는게 제 생각이기에 … 확대,축소, 인쇄 같은거..)
그런데, 이러한 브라우저의 기능을 사용자들이 실제로 얼마나 알고있을지에 대해서는 여전히 회의적입니다. 이제는 웹 접근성 개선 활동에 “사용자 교육” 부분도 비중을 둬야 하지 않나 하는 생각이 듭니다.
관련 지침
덧1) 글을 작성하는 중간에 “임시저장” 한다는게 그만, 발행이 되어 버렸네요. RSS로 어떻게 나갔는지 모르겠지만 다 적지 않은 글이 그대로 나갔다면 구독중이신 분들에게 사과의 말씀 드리겠습니다. 죄송합니다. 꾸벅.
덧2) 반성합니다. 위의 내용은 새롭제 제정된 KWCAG2.0 을 보면서 생각한겁니다. 평소 사이트 작업하면서 저렇게 해오지는 못했습니다. 다음번 프로젝트에서 코딩할 기회가 된다면 적용하고 소개해 보도록 하겠습니다.
이 글은 다음 글들에 트랙백 되었습니다.
관련 포스트
접근성 | 
kwcag, skip navigation, 건너뛰기링크, 웹접근성
:
안녕하세요.
글내용중에서여,
“일반적인 화면에서는 보이지 않지만 키보드로 접근했을 때 건너뛰기 링크가 표시되도록 하는 방법이 더욱 바람직하다고 생각합니다”
위 내용이 잘 이해가 안가서그럽니다. 눈으로는 안보이지만 키보드로 접근하면 작동되게하는 방법을
좀더 구체적으로 설명 가능할가요?! 혹시 css 를 끄고 페이지를 볼때를 말씀하는 건가욤?!
http://www.webstandards.org/ 이 사이트가 좋은 예입니다.
신현석님께서 적어주신 사이트의 HTML과 CSS를 참조해도 좋겠네요.
그리고. 제 블로그에도 사용되었습니다.
HTML 은
태그 바로 밑에<a href=”#main” class=”skip-navi” rel=”nofollow”>본문으로 바로가기</a>
CSS 는 다음과 같습니다.
a.skip-navi {
display: block;
position:absolute;
top:0;
left:-2000px;
}
a.skip-navi:hover, a.skip-navi:focus {
left:0%;
width:200px;
padding: 10px;
background: #FFFFCC;
border:1px dotted #FF9900;
color: #990000;
text-align:center;
font-size:1.3em;
}
처음에 화면상에는 표시 되지 않지만 키보드로 접근시 포커스가 가면 화면에 표시가 됩니다.
JavaScript 와 함께 사용하면 괜찮은 시각효과를 만들수도 있지 않을까 합니다.
본문에 위 내용을 추가하는게 나을 것 같네요…
감사합니다.
아, 두분 답변 감사드립니당~
설명을 들으니 저두 제 블로그에 비스무리하게 적용을 하긴 한거네여..
목적이 ‘본문으로 바로가기’ 용도는 아니고, /로그인/관리자/글쓰기/ 메뉴등은 방문자가 아닌
저만을 위한 메뉴여서, 마우스를 올렸을때만 보이게끔 숨김처리를 해놓은게 있습니다.
focus 시에도 나올수있게 해봐야겠네여~ 좋은글 잘 읽었습니다!!
안녕하세요~ 양군님~
제 포스트를 연결해주시다니. ㅋㅋㅋ 감사합니다.
그냥 뭐 잘못 사용되는 사례들에 대한 의견을 낸 것뿐입니다.
요즘 이것저것 정리해주셔서 즐겨 보고 있습니다. 화이팅!!!
그런데, 의견중에 하단에도 다시 제공해주는 것이 더 좋다는 부분은 사실 그렇지 않다고 말씀드리고 싶습니다.
실제 건너뛰기 링크를 사용하는 주 사용자는 장애인이고, 이들 장애인에게 반복적으로 제공되는 것은 무리하게 사용자를 배려하는 사례일 듯 합니다.
대부분의 사용자는 중간에 해당 콘텐츠를 보기 싫거나 대메뉴로 가고 싶다면 쉽게 상단으로 이동할 수 있습니다.
건너뛰기 링크와 퀵 링크는 분명히 다른 의미라고 생각합니다.
워낙에 좋은 포스트라 망설임없이 링크 했어요 ^^
“사용자 스스로 상단으로 이동할 수 있으므로, 콘텐츠 뒤로 이어지는 하단에 반복되는 링크를 건너뛰는 링크는 필요없다.” 라는 말씀이시네요.
생각 안한건 아니지만 “상단으로 이동” 이라는게 제가 아는대로 PageUp키를 눌러 화면(뷰)을 위로 올리는것만 생각했는데 (이 경우 탭 포커스는 움직이지 않고 TAB을 누르면 다시 밑으로 내려오잖아요) 스크린리더의 가상커서를 사용하거나 하면 실제 포커스를 맨 위로 보내는게 가능한가보네요. 생각해보면 제공하지 않는게 더 이상하겠군요 ;;;;; 그런데, 스크린리더 사용자 말고 키보드만 사용하는 경우는 포커스를 어떻게 처음으로 보낼 수 있나요 ? (찾아봐야겠네요. 알고 계시면 알려주시면 감사하겠습니다.)
좋은 말씀 감사합니다.
그나저나 본문에서 처음 언급한 화면에 보이는 “건너뛰기 링크”는 어떻게 생각하시는지 궁금합니다.
화면에 보이는 건너뛰기 링크에 대해서는 포스트에서도 언급했듯이
보이는 것이 좋을 것 같다고 생각은 하고 있습니다.
이를 디자인적으로 워낙 구현하지 않아서 묵살당하고는 있지만요…ㅎㅎ
탭포커싱을 통해 나타나는건 그리 좋은 방법은 아니라고 생각합니다.
일반 사용자의 경우 건너뛰기 링크가 있는지 없는지조차 모를 수 있기 때문이죠.
이건 다른 얘기인데도, 건너뛰기 링크의 위치도 중요한게 아닌가 생각을 해요.
개인적으로는 우측 상단에 위치하는게 좀더 접근이 쉽지 않을까하네요.
요즘 포스트 멋진거 많아요~ 자주 놀러올게요
참. 근데, 제 글 링크가…
왜 http://mydeute.com/planet/go/10948 이걸로 잡혀있어요???
듀트님의 주소가… ㅋㅋ 거기서 가져오셨나보네요
찾아보니 사용자 스스로 문서 처음으로 이동할 수 있는 기능이 있었습니다.
이에 본문 수정했습니다.
다시 한번 말씀 감사드립니다.
좋은 하루 되세요
건너뛰기에 대한 정보를 수색중이었는데 마땅히 잘 정리되어있는 곳이 없어서 무척 헤메이던차에
이런 포스트를 발견하게 되어 참 기쁩니다 ㅎㅎ 좋은글 너무~! 잘읽었습니다
큰감명을 받은 상태로 질문 몇가지 올려도 될까요?^^;
저는 아직 한창 배우고 있는 사람입니다라는 전제하에;;
이 건너뛰기 기능은 ie에서는 원래 구현이 안되는 것인가요?
아님 제가 못하는 것인지… 어떻게 해야 ie에서보여질지 궁금합니다
그리고 제가 보기엔 건너뛰기에 주로 본문 바로가기 등을 사용하는데 바로가기보다는 접근자가 무엇을 건너뛰어서 어디로 가는것인지 명확하게 명시해 주는것이 좋지 않을까 하는 생각에
저는 검색 건너뛰기라고 달아봤는데 어떤게 더 좋은 방향이 될까요?
그리고 현재창 닫기를 추가하는것이 과연 의미상 맞는 것일지 판단이 잘 서지 않습니다..
좋은 의견 주시면 무지한 저에게 큰 도움이 될것 같습니다 ~^^
감사합니다~
방문해주시고 댓글까지 정성스레 달아주셔서 감사합니다.
블로그를 한동안 못 들어와서
1. 브라우저 구분없이 구현이 되어야 합니다.
본문에 적은 방법은 브라우저 상관없이 동작하는것을 확인하고 올렸는데.
안되신다면 다른 문제가 있는것 같습니다.
아직 해결 못하셨다면, 소스를 보내주시면 살펴봐 드릴 수 있을 것 같습니다.
2. 건너뛰기는 말씀대로 매 페이지마다 반복되는 내용을 건너뛰어 페이지 핵심 내용으로 바로 이동할 수 있도록 하는겁니다.
요즘의 홈페이지들을 보면 매 페이지마다 반복되는게
- 상단 유틸 메뉴 (홈/로그인/회원가입/사이트맵 등..)
- 상단 메뉴 목록
- 헤더 메시지
- 좌측 서브 메뉴 목록
정도가 될텐데.. 말씀 처럼 건너뛰는 대상을 명시한다면 위의 내용을 모두 열거해야지 않을까요.
그래서 그냥 “본문으로 바로가기” 등이 더 적절하다고 생각합니다.
3. “현재창 닫기”는 추가 안해도 될 것 같습니다. “건너뛰기 링크” 는 스크린 리더를 사용해서 혹은 마우스를 사용할 수 없는 조건이어서 키보드만을 사용하는 사용자를 위한 기능입니다. 그런 조건의 사용자들은 창을 닫기 위해 “Ctrl + W” / “Alt + F4″ 등의 단축키를 이용해 창을 닫을 수 있을 것 같습니다. “현재창 닫기” / “검색으로 가기” 등의 부가 기능 혹은 링크들을 제공해 주는것이 친절하게 인식될 수도 있지만, 개인적인 생각으로는 “과한 친절”이지 않을까 싶어요. 페이지 반복영역을 건너뛰도록 제공하는 “건너뛰기 링크” 자체가 건너뛰어야 할 반복영역이 되버리지 않을까요 ?
본문에 링크된 성민장군님의 “건너뛰기 링크는 Quick Link 가 아닙니다” 가 적절한 답변이 될 것 같네요 ^^
다시 한번 늦은 답변 죄송하고요.
좋은 하루 되세요. ^^
메뉴 건너 뛰기 링크(Skip Navigation)….
헤딩은 콘텐츠 블럭을 우회하는 가장 효과적인 방법 반복되는 콘텐츠 블럭을 우회하는 방법 메뉴 건너 뛰기 링크에 관한 쟁점 키보드 사용자에게만 유용한 메뉴 건너 뛰기 링크 글로벌 네비……
[...] KWCAG 2.0 의 Skip Navigation(건너뛰기 링크) – 본문으로 가면 그만? - 양군팩토리 분류: CSS, 웹 기획, 웹 디자인, 웹 접근성, 웹 표준 | 2010년 3월 13일, 3:11 | 정찬명 | 댓글: 8개 | 트랙백URI – http://naradesign.net/wp/2010/03/13/1221/trackback/ [...]