보통 웹 사이트를 만들때 매 페이지마다 반복되는 영역이 존재하기 마련이고, 페이지의 선형화를 통해 웹 사이트를 탐색하는 사람은 매번 반복되는 영역을 거쳐야지만 웹 사이트의 핵심 콘텐츠에 접근 할 수 있다. 그런 연유로 WCAG2.0이나 KWCAG2.0은 Skip Navigation 링크를 제공하는것을 권장하고 있다.
Direct Link와 Skip Navigation
Direct Link와 Skip Navigation을 혼동하는 경우가 가끔 보이는데 이것은 성민장군님의 블로그에서 너무나도 훌륭하게 잘 설명해 주셨으니 참고 하는것이 좋을 것 같다.
다만 요즘들어 드는 잡생각이 Direct Link를 제공하는것이 과연 잘못된 일일까? 반복된 영역을 추가로 만든다는 함정이 생길 수 있다는 문제점이 있고, 각 섹션의 헤딩을 통해서 빠르게 탐색이 가능하므로, Direct Link는 필요없다는 결론인데… 사이트내의 페이지 구조가 복잡해지고, 양이 많아지면 많아질수록 Direct Link가 필요할수도 있지않을까?
라는 생각을 하게 되었다.
그래서 각 탐색을 쉽게 하는 콘텐츠를 제공하는것을 내 나름대로 재정의 해보았다.
- Skip Navigation
- 각 페이지마다 반복되는 영역을 건너뛰기 위한 링크 제공
- Section Heading
- 각 섹션을 빠르게 탐색하기 위한 용도
- Direct Link
- 페이지에서 중요하다고 생각되는 영역이나 접근을 유도하고 싶은 부분으로의 이동을 위한 링크
예를 들어보자. 일반적인 스킵 네비게이션의 사용은 다음과 같을것이다.
<p><a href="#contentsArea">반복영역 건너뛰기</a></p>
<h1>로고</h1>
<ul>
<li><a href="#">메인 네비게이션1</a></li>
<li><a href="#">메인 네비게이션1</a></li>
<li><a href="#">메인 네비게이션1</a></li>
</ul>
<div id="contentsArea">
콘텐츠 영역
</div>
로고와 메인 네비게이션이 페이지마다 반복적으로 노출되는 부분이므로 스킵 네비게이션을 제공하는것은 좋은방법이다. 라고 말할 수 있다.
그러나 Direct Link와 Skip Navigation를 구분하지 못하는 경우는 다음과 같을 수 있다
<ul id="skipnav">
<li><a href="#mainNavigation">메인 메뉴바로가기</a></li>
<li><a href="#leftArea">왼쪽영역 바로가기</a></li>
<li><a href="#searchArea">검색영역 바로가기</a></li>
<li><a href="#contentsArea">콘텐츠로 바로가기</a></li>
</ul>
<h1>로고</h1>
<ul id="mainNavigation">
<li><a href="#">메인 네비게이션1</a></li>
<li><a href="#">메인 네비게이션1</a></li>
<li><a href="#">메인 네비게이션1</a></li>
</ul>
<div id="leftArea">
왼쪽 영역
</div>
<div id="searchArea">
검색 영역
</div>
<div id="contentsArea">
콘텐츠 영역
</div>
이런 경우를 Skip Navigation 과 Direct Link를 잘못 이해하고 사용한다고 볼 수 있는데, id가 skipnav 부분이 페이지마다 오히려 반복되어버려서 Skip Navigation의 용도가 적절하지않다고 볼 수 있다.
Skip Navigation 과 Direct Link를 둘다 제공하는건 어떨까라는 생각을 해보았는데… 내가 구조를 만들어본다면 다음과 같이 구성 될 수 있을것이다.
<ul id="skipnav">
<li><a href="#contentsArea">반복영역 건너뛰기</a></li>
</ul>
<ul id="directnav">
<li><a href="#searchArea">검색영역 바로가기</a></li>
<li><a href="#adArea">홍보영역 바로가기</a></li>
</ul>
<h1>로고</h1>
<ul id="mainNavigation">
<li><a href="#">메인 네비게이션1</a></li>
<li><a href="#">메인 네비게이션2</a></li>
<li><a href="#">메인 네비게이션3</a></li>
</ul>
<div id="leftArea">
왼쪽 영역
</div>
<div id="searchArea">
검색 영역
</div>
<div id="contentsArea">
콘텐츠 영역
</div>
<div id="adArea">
광고 영역
</div>
이러면 Skip Navigation 다음에 Direct Link가 위치하고 로고와 메인 네비게이션이 위치하므로 Skip Navigation 이후 부터는 반복된 영역이라고 볼 수 있지 않을까?
물론 현재 권장하는 스킵 네비게이션은 하나만 제공하는것이 좋습니다 라는 공식에는 맞지 않을지도 모르지만, Direct Link를 제공하는것이 어쩌면 선형화를 통해 페이지를 접근하는 사람에게는 더욱 도움이 되지 않을까? 라는 생각을 해보게 되었다. 물론 현재 우리나라의 상황을 보아할때 페이지마다 변경 될 수 있는 Direct Link를 제공할것이라 생각되지는 않지만…
이것에 대한 근거로 KWCAG2.0의 2.4.1 (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.
에는 다음과 같은 설명이 있다.
여러 개의 건너뛰기 링크 제공: 건너뛰기 기능은 웹 페이지의 가장 앞에 위치해야 한다. 여러 개의 건너뛰기 링크를 제공하는 경우에는 핵심 콘텐츠로 이동하기 위한 건너뛰기 링크를 가장 앞에 위치시킨다. 만일 배경음 바로가기 링크 참조가 있는 경우에는 그 다음에 위치시킨다.
웹 사이트를 만드는 웹 저작자라면 한번쯤 고민 해봐야 할 문제가 아닐까 싶다. 각 페이지를 구성할때 조금이라도 좀 더 노출시키고 싶은 콘텐츠들이 존재할테니까, 단순히 ‘Skip Navigaion만 지원했으니 끝!!’ 이럴수는 없는 노릇아닌가?
참고로 당연히 반복되는 영역이 없으면 Skip Navigaion이 없어도 무방하다고 생각한다. 내가 만드는 웹 페이지가 반복되는 영역이 있는지 없는지 잘 살펴봐야 할 것이다. SKip Navigation을 위한 SKip Navigation을 만드는 경우는 없어야 할것이다.
문득 드는 생각이 메인 페이지에 네비게이션이 있다해도 Skip Navigation이 꼭 있어야 할까? 판단하기 나름이긴한데… 이건 다른 분들의 의견을 좀 들어볼 필요가 있을것 같다.
덧붙임
- 백수생활이 오래되니 확실이 잡생각이 많이 난다.
이런걸 생각을 다하다니;;; - 저번글의 포스트넘버가 1000번이었는게 포스팅된 글의 갯수는 200개 였다.
즉 200번째 글이라는…
뭐 그렇다고… 참 글안쓴다…