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. 콘텐츠 영역: 웹 어플리케이션 혹은 콘텐츠 …
4. 사이드바: 퀵 링크, 관련 메뉴, 위젯 …
5. 풋터: 퀵 링크, 저작권, 연락처 …

건너뛰기 링크는 위에서 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 키를 이용해 문서 처음으로 이동할 수 있었습니다.

스크린 리더와 브라우저에서 페이지의 상단으로 이동할 수 있는 기능을 제공하고 있으므로 성민장군님 말씀대로 콘텐츠 뒤에 다시 건너뛰기 링크를 제공하는것은 “과한 배려”가 되는게 맞겠네요. (브라우저에서 제공하는 기능을 웹 페이지에서 중복 제공하는 건 ‘의미없다’라는게 제 생각이기에 … 확대,축소, 인쇄 같은거..)

그런데, 이러한 브라우저의 기능을 사용자들이 실제로 얼마나 알고있을지에 대해서는 여전히 회의적입니다. 이제는 웹 접근성 개선 활동에 “사용자 교육” 부분도 비중을 둬야 하지 않나 하는 생각이 듭니다.

관련 지침

• [KWCAG 2.0] 2.4.1 (반복 영역 건너뛰기) 콘텐츠의 반복되는영역은 건너뛸 수 있어야 한다.

덧1) 글을 작성하는 중간에 “임시저장” 한다는게 그만, 발행이 되어 버렸네요. RSS로 어떻게 나갔는지 모르겠지만 다 적지 않은 글이 그대로 나갔다면 구독중이신 분들에게 사과의 말씀 드리겠습니다. 죄송합니다. 꾸벅.

덧2) 반성합니다. 위의 내용은 새롭제 제정된 KWCAG2.0 을 보면서 생각한겁니다. 평소 사이트 작업하면서 저렇게 해오지는 못했습니다. 다음번 프로젝트에서 코딩할 기회가 된다면 적용하고 소개해 보도록 하겠습니다.