[웹접근성 지침-일반기술 G128] 내비게이션(navigation)에서 현재 위치를 표시해야 합니다.

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

---

내비게이션에 현재 위치를 표시하면 사용자는 자신이 원하는 곳에 와있는지 그리고 다음에 어디로 갈지를 판단 할 수 있습니다.

---

기술설명

이 기술의 목적은 내비게이션(navigation)에서 현재 위치를 알 수 있게 정보를 제공하는 것입니다.

사용자가 웹 페이지를 돌아다니다 보면 지금 어떤 단계인지 또는 위치가 어디인지를 알고 싶어할 때가 있습니다.  

그래서 내비게이션 안에서 현재 위치인 메뉴에 텍스트나 아이콘을 추가하여 표시해 주어야 합니다.

 

 

예시

[예시1] 웹 페이지에서 탭 형식의 내비게이션(navigation)을 제공합니다. 탭 형식은 메뉴를 가로로 표시하는 것입니다.

탭에 있는 메뉴를 선택하면 해당 콘텐츠가 탭 아래에 나타납니다. 탭 안에 있는 다른 메뉴를 선택하면 탭 아래의 콘텐츠가 사라지고 해당 콘텐츠가 나타납니다. 선택한 메뉴는 배경색이 변경되고 텍스트 옆에 체크 표시 모양의 아이콘이 나타납니다. 이 아이콘에는 대체 텍스트가 포함되어 있습니다.

 

[예시2] 웹 페이지가 프레임(frameset and frame)방식으로 구성되어 있습니다. 프레임 중 하나는 내비게이션(navigation)이고, 나머지 다른 프레임은 콘텐츠가 표시됩니다. 내비게이션이 있는 프레임에서 항목을 선택하면 다른 프레임에서 해당 콘텐츠가 표시됩니다. 그리고 선택한 항목 앞에 별표 문자가 나타나면서 선택한 항목임을 표시해 줍니다.

 

[예시3] 홈페이지 내의 모든 웹 페이지 에는 모든 웹페이지로 이동할 수 있는 링크 목록으로 제공 하고 있습니다.

링크에 마우스를 올리거나 초점(focus)을 맞추면 링크의 색이 변경됩니다. 이런 효과는 CSS를 이용한 것입니다.

링크를 활성화(=클릭 또는 엔터)하면 해당 웹 페이지로 이동하고 링크 목록에서 현재 웹 페이지 부분이  비활성화가 되면서 배경색도 변경됩니다. 비활성화로 인해 사용자들은 현제 위치가 어디인지 알게 되며, 변경된 배경색으로 인해 시각적으로도 현재 위치를 파악 할 수 있습니다.

 

 

관련기술

G14: 색상 차이로 전달되는 정보가 텍스트에서도 사용 가능한지 확인

G205: 색상이 있는 양식 제어 레이블에 대한 텍스트 큐 포함

G182: 텍스트 색상 차이를 사용하여 정보를 전달할 때 추가적인 시각적 단서를 사용할 수 있는지 확인

G183: 주변 텍스트와 3:1의 대비율을 사용하고 색상만으로 식별하는 링크나 컨트롤에 대한 초점에 추가 시각적 단서를 제공합니다.

 

 

점검절차

홈페이지 내의 모든 웹사이트가 동일한 내비게이션(navigation)을 가지고 있는 경우:

1. 내비게이션이 현제 선택된 항목을 표시하고 있는지 확인합니다.

2. 선택된 항목이 표시된 콘텐츠와 일치하는지 확인합니다.

 

 

---

 

나의 정리

홈페이지는 웹 페이지들로 구성되어 있으며, 각 웹 페이지는 자신이 속한 홈페이지의 다른 웹 페이지로 이동할 수 있는 '내비게이션(navigation)'을 가지고 있습니다.

 

이런 '내비게이션(navigation)'은 모든 웹 페이지로 이동할 수 있는 '사이트 맵', 콘텐츠 단위로 접근하는 '주 메뉴(= navigation bar = GNB)', 서브 페이지 내에서 사용되는 '탭 메뉴'나 '목차' 등으로 제공됩니다.

중요한 것은 이런 '내비게이션(navigation)'들이 현재 위치를 표시하고 있어야 한다는 것입니다.

'내비게이션(navigation)'은 사용자가 홈페이지 내에 있는 다른 웹 페이지로 이동할 수 있는 수단이기 때문에 사용자가 보고 있는 웹 페이지가 홈페이지 내에서 어디에 있는지 위치를 알아야 내가 잘 찾아 왔는지 그리고 다음에는 어디로 갈지를 판단 할 수 있습니다.

 

내비게이션에서 현재 위치를 표시 하는 방법으로는 현재 페이지의 해당 메뉴 부분에 아이콘이나 텍스트를 추가하거나 글자 색상이나 배경색을 이용하여 다른 메뉴와 달라보이게 만드는 것입니다.

일반 사용자들뿐만 아니라 보조 프로그램을 사용하는 사용자들도 알아볼 수 있도록 만들어야 합니다.

 

내비게이션에 현재 위치를 표시하면 사용자는 자신이 원하는 곳에 와있는지 그리고 다음에 어디로 갈지를 판단 할 수 있습니다.

---

 

G128: Indicating current location within navigation bars

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

G128: Indicating current location within navigation bars | Techniques for WCAG 2.0

 

---

 

독학으로 힘들어 하시는 분들을 위해 과외를 준비 했습니다. 

2024년 11월 한 달간 맞춤형 과외를 할 예정입니다.
입문자 분들의 참여 부탁드립니다.
교육과정은 인터뷰 후에 맞춤으로 진행할 예정입니다. 

참여하기: https://blog.naver.com/redoxup/223601934677