콘텐츠는 논리적인 순서로 제공해야 한다. 즉, 웹 페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 선형 구조로 작성되어야 한다. 콘텐츠의 선형 구조에 대한 사례들을 살펴보도록 하겠다.
탭 제목 - 내용 콘텐츠
탭 메뉴가 나열되어 있고 탭에 대한 내용이 있는 경우 시각적으로는 클릭하면 해당 내용이 보이기 때문에 쉽게 인식할 수 있다. 스크린리더 사용자는 메뉴와 내용을 따로 마크업하는 경우 메뉴를 다 읽어주고 나서야 내용을 읽어주기 때문에 어떤 메뉴에 대한 내용인지 인식할 수 없다. 따라서 메뉴 내용 메뉴 내용 순으로 마크업하거나 메뉴끼리 내용끼리 마크업하되 내용에 해당 메뉴 제목을 제공해 주어야 한다.
(1) 탭 1제목 > 탭 1내용 > 탭 2제목 > 탭 2내용
<a href="…">상품</a>
<div>상품 내용</div>
<a href="…">쇼핑몰</a>
<div>쇼핑몰 내용</div>
…
(2) 해당 탭 콘텐츠에 제목 제공
<ul>
<li><a href="…">상품</a></li>
…
</ul>
<div>
<h2 class="blind">상품</h2>
상품 내용
</div>
제목 - 내용 - 더 보기 콘텐츠
제목, 내용, 더 보기가 있는 콘텐츠를 많이 보셨을 텐데, 보이는 순서대로 공지사항, 더 보기 버튼, 내용 순으로 마크업 된 경우 오류이다. 논리적인 순서는 제목 다음, 내용 다음, 더 보기 버튼 순이므로 마크업도 이 순서대로 해줘야 한다.
<div class="noti_section">
<h3><span class="blind">공지사항</span></h3>
<ul class="lst_noti">
<li>
<a href="…">[복구완료] 10/19 (금), '뮤직'...</a>
</li>
<li>
<a href="…">[복구완료] 10/17 (수), '지도'...</a>
</li>
</ul>
<a href="…"><span class="blind">공지사항</span>더보기</a>
</div>
[ 출처 ]
BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/35124
728x90