[웹접근성 지침-일반기술 G61] 페이지 마다 '반복되는 구성요소'가 있다면 '동일한 상대적 순서'에 따라 배치해야 한다.

요소들이 시각적으로나 HTML코딩으로나 '동일한 상대적 위치'에 요소들이 있을 때 사용자들은 편하게 사이트를 이용 할 수 있습니다.

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

---

기술설명

이 기술의 목적은 반복되는 구성요소를 예측가능 하도록 배치하여 사용자가 편하게 사용할 수 있게 하는 것입니다.

이 기술은 웹페이지마다 반복되는 구성요소가 있는 경우에 페이지마다 상대적으로 동일한 순서에 배치하는 것으로, 이렇게 하면 연관된 모든 웹페이지에 일관성을 줄 수 있습니다. 물론 페이지마다 그 사이에 다른 구성 요소가 삽입될 수 있지만 상대적인 순서는 변경되지 않습니다.

 

이 기술은 페이지마다 반복적으로 적용되는 주 메뉴(=내비게이션 Navigation)에도 적용됩니다.

사용자가 다른 웹 페이지로 이동하기 위해 사용하는 다양한 내비게이션 메뉴가 있습니다. 이런 메뉴들이 페이지마다 반복되어 사용되는 경우 동일한 상대적 순서로 배치한다면 사용자들은 쉽게 메뉴를 이용할 수 있게 됩니다.

예를 들어 홈페이지에서 구성된 모든 페이지들 중에 주 메뉴가 하나 추가 되거나 제거되었다 해도 상대적 순서는 변경되지 않았습니다.

 

 

예시

•  한 홈페이지에 구성된 모든 각 페이지는 상단에 로고, 제목, 검색, 주 메뉴를 제공하고 있습니다. 
  이는 각 페이지마다 동일한 상대적 순서로 배치됩니다. 일부 페이지에는 검색이 없지만 그래도 동일한 순서로 배치되어 있습니다.  
• 한 홈페이지에서 화면 왼쪽에 주 메뉴를 배치하고 있습니다. 구성된 각 페이지에도 동일하게 배치되어 있습니다.
  일부 페이지에서는 링크가 삭제되거나 추가되지만 상대적 순서는 동일하게 유지됩니다.
  예를 들어 제품을 판매하고 그 제품을 교육하는 한 사이트가 있습니다.  사용자가 '제품' 페이지에서 '교육'페이지로 이동하면, 주 메뉴에서 개별 제품에 대한 소개 링크는 사라지고 교육제공 링크가 추가됩니다.

 

 

점검절차

1. 홈페이지 내의 모든 페이지에 반복되어 사용되는 요소들을 찾습니다.
2. 각 요소가 동일한 상대적 순서로 배치되어 있는지 확인합니다.
3. 각 페이지의 내비게이션 구성 요소마다 링크 또는 프로그래밍적 참조가 항상 동일한 상대적 순서로 배치되었는지 확인합니다.

 

2, 3번 철차를 따라야 합니다.

 

---

나의 정리

웹 사이트들을 보다 보면 메인 페이지에서 하부 페이지까지 동일하게 보이는 요소들이 있습니다.
대부분 '로고'와 '주 메뉴'가 있는 '헤더(Header)' 요소와 '저작권'과 '회사 정보'가 있는 '풋터(Footer)'들입니다. 
이렇게 페이지마다 동일하게 있는 요소들을 '반복되는 구성 요소'라고 합니다.   
이런 요소들은 웹사이트 내의 모든 페이지마다 동일한 위치 해 있어야 합니다.
예를 들어 '로고'는 좌측 상단에 배치하고, '주 메뉴'는 상단 중앙에 배치하고 '2차 메뉴'는 좌측에 배치하는 것입니다.
'반복되는 구성 요소'들을 동일 안 위치에 배치되어 있으면 사용자들은 어디에 뭐가 있는지를 빨리 파악할 수 있으며, 사용하면 할수록 더욱 편하게 사이트를 이용할 수 있게 됩니다. 

'반복되는 구성 요소'들의 HTML코딩에서도 상대적으로 동일하게 배치되어야 합니다.
로고 → 주메뉴 → 콘텐츠 → 풋터 이런 식으로 동일하게 작성되어야 합니다.
(사이트 특성마다 순서는 다를 수 있습니다.)
사이트의 페이지마다 모두 똑같은 수는 없습니다. 어떤 페이지 페이지에는 광고나 동영상 콘텐츠 등이 추가될 수 있기 때문입니다. 
광고가 추가 되었다고 예를 들어 봅시다. 
'반복되는 구성 요소'에는 '로고', '주 메뉴', '풋터'가 있고 그 외 요소에는  '콘텐츠'와 '광고'가 있습니다. 먼저 '반복되는 구성 요소'의 상대적 순서를 정해줘야 합니다.
- 모든 페이지에 있어야 하는 '로고'는 사이트의 이름과 같으므로 항상 처음에 작성합니다.
- 모든 페이지를 이동할 수 있게 하는 '주 메뉴'는 '로고' 다음으로 작성합니다.
- 모든 페이지의 저작권을 표시하는 '풋터'는 항상 마지막에 작성합니다.이렇게 정했다면 정해진 상대적 순서에 맞게 HTML코딩을 해야 합니다.
로고 → 주메뉴 → 콘텐츠 → (추가) 광고 → 풋터 

<h1>로고</h1>
<nav>주 메뉴...</nav>
<div class=“content”>
    콘텐츠 내용
    ....
</div>
<div class=“banner”>
    광고
    ....
</div>
<footer>저작권 및 회사정보</footer>

 

이렇게 배치되는 것을 '동일한 상대적 위치'에 있다고 말하는 것입니다.

이렇게 코딩도 상대적 순서에 맞게 작성해야 '스크린 리더'를 사용하는 사용자가 '탭(Tab) 키'로 요소들을 이동해도 동일한 순서로 인지할 수 있습니다. 동일한 순서에 요소들이 있다면 이를 예상하고 불필요한 요소를 빨리 지나치거나, 원하는 요소를 빨리 찾을 수 있게 되는 것입니다. 

방에 물건들이 제자리에 있어야 물건을 빨리 찾을 수 있듯이, 
요소들이 시각적으로나 HTML코딩으로나 '동일한 상대적 위치'에 요소들이 있을 때 사용자들은 편하게 사이트를 이용할 수 있습니다.

---

 

G61: Presenting repeated components in the same relative order each time they appear

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

G61: Presenting repeated components in the same relative order each time they appear | Techniques for WCAG 2.0