[웹접근성 지침-일반기술 G123] 반복적으로 사용되는 콘텐츠의 시작부분에 콘텐츠의 끝으로 이동하는 링크를 제공해야 합니다.

원본: https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G123.html

---

반복되는 콘텐츠가 있는 경우 효율성을 위해 건너뛰기 링크를 제공해야 합니다.

건너뛰기 링크는 해당 콘텐츠의 앞, 또는 해당 콘텐츠의 첫 번째 링크에 제공되어야 합니다.

---

기술설명

이 기술의 목적은 콘텐츠를 건너뛰게 하는 것으로 해당 콘텐츠의 블록을 우회하는 방법을 제공하는 것입니다.

해당 콘텐츠의 블록 앞이나 첫줄에 링크를 제공하고 그 링크를 누르면 블록의 마지막으로 초점(focus)이 이동합니다.

이렇게 건너뛰어야 하는 블록이 많은 경우, 이런 링크를 통해 블록과 블록을 건너뛸 수 있습니다.

 

예시

[예시1] 주 메뉴 건너뛰기

보통의 웹사이트에는 상단에는 사이트 맵이나 조직도, 오시는 길 같은 링크를 제공하는 주 메뉴가 있습니다.

이런 주 메뉴의 첫 번째 링크는 [주 메뉴 건너뛰기]입니다.

이 링크를 사용하면 주 메뉴를 우회할 수 있습니다.

 

[예시2] 도서 색인

책 내용을 웹페이지로 만들었습니다. 각 페이지에는 목차가 있습니다. 목차는 알파벳 순서로 문자들이 링크가 걸려 있습니다.

링크를 클릭하면 해당 문자가 있는 부분으로 이동합니다.

이 목차의 첫 번째 링크는 [목차 건너뛰기]입니다. 이를 이용하면 목차를 우회할 수 있습니다.

 

[예시3] 여러 링크 세트

웹사이트의 모든 페이지의 첫 번째 섹션은 사이트 맵, 조직도, 연락처에 대한 링크가 포함된 주 메뉴입니다.

그리고 페이지 안에 있는 각각의 섹션에는 섹션의 마지막으로 이동하게 하는 링크 세트도 있습니다.

첫 번째 섹션의 첫 번째 링크는 [주 메뉴 건너뛰기]이며, 이를 클릭하면 주 메뉴를 우회합니다.

두 번째 섹션의 첫 번째 링크는 [섹션 건너뛰기]이며, 이를 클릭하면 해당 섹션의 우회합니다.

 

[예시4] 목차에 링크가 많은 블록의 HTML소스

이 예제는 <heading>요소에 대한 건너뛰기 링크를 보여주고 있습니다.

이렇게 하면 사용자는 키보드를 이용해서 반복되는 콘텐츠 블록을 위회할 수 있습니다.

<p><a href="#content">주 콘텐츠로 이동</a></p>
<h2>주 메뉴</h2>
<ul>
    <li><a href="#subnav">하부 메뉴로 이동</a></li>
    <li><a href="/a/">Link A</a></li>
    <li><a href="/b/">Link B</a></li>
    <li><a href="/c/">Link C</a></li>
</ul>
<div class="iekbfix">
    <h2 id="subnav">하부 메뉴</h2>
    <ul>
        <li><a href="#ultranav">최하위 메뉴로 이동</a></li>
        <li><a href="/suba/">Sub A</a></li>
        <li><a href="/subb/">Sub B</a></li>
        <li><a href="/subc/">Sub C</a></li>
    </ul>
</div>
<div class="iekbfix">
    <h2 id="ultranav">최하위 메뉴</h2>
    <ul>
        <li><a href="#content">주 콘텐츠로 이동</a></li>
        <li><a href="/ultraa/">Ultra A</a></li>
        <li><a href="/ultrab/">Ultra B</a></li>
        <li><a href="/ultrac/">Ultra C</a></li>
    </ul>
</div>

<h2 id="content">주 콘텐츠</h2>
    <p>주 콘텐츠 내용입니다.</p>
</div>

 

 

자료

'건너뛰기' 기능이 적용된 예시입니다.

https://www.jimthatcher.com/skipnav.htm

 

 

관련기술

G1: 각 페이지 상단에 주요 콘텐츠 영역으로 직접 연결되는 링크 추가

G124: 콘텐츠의 각 영역에 대한 페이지 상단에 링크 추가

 

 

점검절차

1.반복 되는 콘텐츠 블록의 앞이나 블록내의 첫 번째 링크가 블록의 끝으로 초점(focus)을 이동시키는 기능을 가지고 있는지 확인합니다.

2. 링크 설명에 블록을 건너뛰거나 위회한다는 내용이 포함되어 있는지 확인합니다.

3. 링크가 항상 보이거나 키보드로 포커스(foucs) 했을 때 보이는지 확인합니다.

4. 링크를 활성화 하면 키보드 포커스가 해당 블록의 끝으로 이동하는지 확인합니다.

 

 

---

 

나의 정리

홈페이지에서 각 페이지 별로 반복되는 콘텐츠가 있습니다.

대표 적인 것이 대부분 상단에 위치한 주 메뉴(=내비게이션 바 or 메뉴 바 or GNB)와 하단에 있는 꼬리말(Footer)

부분입니다. 이런 반복적인 콘텐츠는 보지 않거나 지나쳐 버리면 그만입니다.

하지만 장애로 인해 ‘스크린 리더’ 같이 키보드를 통해 모든 콘텐츠들과 요소들을 순서대로 확인하면서 모든 내용을 인식해야 하는 사용자들에게는 이런 반복적인 콘텐츠를 지나칠 수가 없습니다.

 

예를 들어 10개의 링크를 가진 주 메뉴가 있습니다. 이 주 메뉴는 각 페이지마다 배치되어 있습니다. 그리고 주 메뉴 다음에 본문이 나옵니다.

일반 사용자들의 경우 스크롤을 내려 바로 본문을 보면 되지만, ‘스크린 리더’ 사용자들은 ‘탭(Tab) 키’를 눌러 포커스를 이동시켜 주 메뉴의 10개의 링크를 확인한 후에 본문의 정보를 알 수 있습니다.

홈페이지 내의 모든 페이지를 이런 식으로 순차적으로 확인한 후에 본문을 보게 됩니다.

무척 귀찮은 일입니다.

그래서 이렇게 반복적인 콘텐츠의 앞에 해당 콘텐츠를 건너뛰게 하는 링크를 제공해 주어야 합니다.

또는 해당 콘텐츠의 첫 번째 링크를 건너뛰게 하는 링크로 제공해야 합니다.

건너뛰기( 또는 우회하기) 링크를 활성화(=클릭 또는 포커스 된 상태에서 엔터키 누르기) 하면 해당 콘텐츠의 끝 부분이나 다음 콘텐츠로 포커스가 이동합니다.

이것을 건너뛰기(skip) 또는 우회하기(bypass)라고 합니다.

 

반복되는 콘텐츠가 있는 경우 효율성을 위해 건너뛰기 링크를 제공해야 합니다.

건너뛰기 링크는 해당 콘텐츠의 앞, 또는 해당 콘텐츠의 첫 번째 링크에 제공되어야 합니다.

---

 

G123: Adding a link at the beginning of a block of repeated content to go to the end of the block

https://www.w3.org/TR/2016/NOTE-WCAG20-TECHS-20161007/G123.html

G123: Adding a link at the beginning of a block of repeated content to go to the end of the block | Techniques for WCAG 2.0