본문 바로가기
Spec UP - Frontend/부스트코스_UI 개발

웹 접근성_콘텐츠의 선형 구조

by TIS_Ha 2020. 4. 1.
반응형

콘텐츠는 논리적인 순서로 제공해야 합니다.

즉, 웹 페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 선형 구조로 작성되어야 합니다.

 

탭 제목-내용 콘텐츠

탭 메뉴가 나열되어 있고 탭에 대한 내용이 있는 경우 시각적으로는 클릭하면 해당 내용이 보이기 때문에 쉽게 인식할 수 있습니다.

스크린리더 사용자는 메뉴와 내용을 따로 마크업하는 경우 메뉴를 다 읽어주고 나서야 내용을 읽어주기 때문에 어떤 메뉴에 대한 내용인지 인식할 수 없습니다.

따라서 메뉴 내용 메뉴 내용 순으로 마크업하거나 메뉴끼리 내용끼리 마크업하되 내용에 해당 메뉴 제목을 제공해 주어야 합니다.

 

1) 1제목 >1내용 > 2제목 > 2내용

2) 해당 탭 콘텐츠에 제목 제공

제목-내용-더 보기 콘텐츠

제목, 내용, 더 보기가 있는 콘텐츠를 많이 보셨을 텐데요,

보이는 순서대로 공지사항, 더 보기 버튼, 내용 순으로 마크업 된 경우 오류입니다.

논리적인 순서는 제목 다음, 내용 다음, 더 보기 버튼 순이므로 마크업도 이 순서대로 해주셔야 합니다.

반응형

댓글