[웹접근성 지침-일반기술 G65] '이동경로 추적(Breadcrumb trail)'을 제공해야 한다.

 

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

---

'이동경로 추적(Breadcrumb trail)'은 사용자가 현재 페이지까지 온 이동 경로를 표시하였기 때문에 지금 어디에 있는지를 쉽게 파악할 수 있게 됩니다. 

---

기술설명

'이동경로 추적(Breadcrumb trail)'은 사용자기 지금 보고 있는 페이지의 위치를 식별하게 하여, 이전 페이지로 돌아갈 수 있도록 도와줍니다.
'이동경로 추적(Breadcrumb trail)'의 표현 방식으로는 사용자기 지금 까지 선택해서 이동한 경로들을 보여주거나, 사이트 구성도에 현재 페이지의 위치를 표시하는 것입니다.
'이동경로 추적(Breadcrumb trail)'에서 보여 지는 이동 경로들은 해당 페이지로 링크가 되어야 합니다.
그리고 '이동경로 추적(Breadcrumb trail)'은 각 페이지에 동일한 위치에 배치되어야 합니다.
이동 경로들을 구분하기 위해서는 경로 사이에 '>', '|', '/', '::', '→' 등의 기호를 넣어 구별해 줍니다.

 

 

예시

[예시1]

링크가 제공되는'이동경로 추적'을 웹페이지에 넣지 못하는 경우, 브라우저의 제목 표시줄에 표시하는 방법이 있습니다.

Home :: Developer Center :: How To Center

위와 같은 내용을 <title>요소에 넣습니다.

 

 

[예시2]

사진작가의 홈페이지입니다. 이 홈페이지는 다양한 여러 개의 갤러리로 구성되어 있습니다.

각 갤러리는 카테고리 별로 나뉘어져 있어 더욱 더 세분화 되어있습니다.

전투 펭귄(Gentoo Penguin) 사진을 제공하는 페이지의 탐색 경로는 다음과 같습니다.

Home / Galleries / Antarctica / Penguins / Gentoo Penguin

현재 위치인 'Gentoo Penguin'을 제외한 나머지 항목은 링크를 제공합니다.

현재 위치인 'Gentoo Penguin'은 링크를 제공하지 않습니다.

[예시3]
전자 상거래 홈페이지에서는 좀 더 구체적인 탐색 경로를 제공합니다. 

현재 위치: Acme Company → 전자제품 → 컴퓨터 → 노트북

'현재 위치'항목과 현재 페이지인 '노트북' 항목은 링크를 제공하지 않습니다. 나머지 부분은 해당 페이지로 이동하는 링크를 제공합니다. 이동 경로는 '→'를 이용하여 표시하고 있습니다.

사용된 코드는 다음과 같습니다.

<nav aria-label="Breadcrumbs"> 
    <h2>현재 위치:</h2> 
    <ul>
        <li><a href="/">Acme Company</a> &#8594;</li> 
        <li><a href="/electronics/">전자제품</a> &#8594;</li>
        <li><a href="/electronics/computers/">컴퓨터</a> &#8594;</li>
        <li>노트북</li>
    </ul> 
</nav>

nav, h2, ul, ul li{ display:inline }
nav > h2{ font-size:1em } 
ul { padding-left:0em }

<nav>요소 안에 있는 aria-label속성이 이 부분이 '이동경로 추적(Breadcrumb trail)' 부분 이라는 것을 알려줍니다.
경로가 <ul>,<li>요소로 표현되어 있지만 수평으로 보이게 하기 위해서 CSS를 이용했습니다.

자료

https://html.spec.whatwg.org/multipage/semantics-other.html#rel-up

 

 

관련기술

G63: 사이트 맵 제공

G128: 네비게이션 바 내 현재 위치 표시

 

 

점검절차

1. 웹페이지로 이동합니다.
2. '이동경로 추적(Breadcrumb trail)'이 있는지 확인합니다.
3. '이동경로 추적(Breadcrumb trail)'의 경로가 사이트 구조와 동일한지 확인합니다.
4. '이동경로 추적(Breadcrumb trail)'가 현재 위치를 포함하지 않는 경우, '이동경로 추적(Breadcrumb trail)'의 모등 요소가 링크를 제공하는지 확인합니다.
5. '이동경로 추적(Breadcrumb trail)'가 현재 위치를 포함하는 경우, 현재 위치를 제외한 모든 요소가 링크를 제공하는지 확인합니다.
현재 위치 부분이 링크를 제공하는지 확인합니다.
6. 모든 링크가 해당 페이지로 올바르게 이동하는지 확인합니다.

 

---

 

나의 정리

동화 '헨델과 그레텔'을 보면 아이들은 나중에 집을 찾아오기 위해 지나온 길에 빵부스러기를 뿌립니다.
즉 자신의 이동경로를 표시한 것입니다.
홈페이지에서 사용자가 홈페이지에 접속하여 현재 페이지까지 이동한 경로를 표시한 것을 'Breadcrumb(빵 부스러기) trail'라고 합니다. 저는 '이동경로 추적'이라고 표현하였습니다.   
'이동경로 추적(Breadcrumb trail)'은 사용자가 현재 페이지까지 온 이동 경로를 표시하였기 때문에 지금 어디에 있는지를 쉽게 파악할 수 있게 됩니다. 그리고 이동 경로 요소마다 링크를 제공하면 사용자는 현재 페이지의 앞 단계나 첫 페이지로 쉽게 이동할 수 있게 됩니다.  구성이 복잡한 홈페이지일수록 꼭 필요한 기능입니다.
참고로 현재 페이지에 해당하는 경로에는 링크를 제공하지 않도록 합니다. 
링크를 제공해 봐야 같은 페이지기 때문에 불필요한 기능이 되어 버립니다.

'이동경로 추적(Breadcrumb trail)'는 페이지의 이동 과정을 표시해야하기 때문에 >', '|', '/', '::', '→' 등의 기호를 이용하여 그 과정을 보여줍니다.

 
이동 경로들을 구분하기 위해서는 경로 사이에 '>', '|', '/', '::', '→' 등의 기호를 넣어 구별해 줍니다.

홈 :: 회사소개 :: 연혁

홈 > 회사소개 > 연혁

홈 → 회사소개 → 연혁

참고로 방향을 표시하는 '>'나 '→'이 이동 과정을 표현하는데 적합하다고 생각됩니다. 

'이동경로 추적(Breadcrumb trail)'은 '네비게이션 바'나 '로고'고처럼 페이지 내에서 정해진 위치에 표시 되어야 합니다. 그래야 사용자들이 쉽고 빠르게 찾을 수 있습니다.
혹 '이동경로 추적(Breadcrumb trail)'을 지원할 수 없는 환경이라면 <title>요소에 아래와 같이 표현해 주는 것도 방법입니다.

순풍산부인과 :: 산부인과 소개 :: 원장님 인사말

 

‘이동경로 추적(Breadcrumb trail)’를 제공하여 사용자가 보고 있는 페이지의 위치를 파악하게 만들어 줍시다.

 

---

G65: Providing a breadcrumb trail

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

G65: Providing a breadcrumb trail | Techniques for WCAG 2.0