5.4.4 콘텐츠 간의 구분

요구 사항

웹 페이지를 구성하는 이웃한 콘텐츠는 시각적으로 구분되도록 제공합니다. 표준이 제시하는 구분 방법의 예는 다음과 같습니다.

1. 테두리를 이용한 구분
2. 콘텐츠 사이에 시각적인 구분선 삽입
3. 서로 다른 무늬를 이용한 구분
4. 콘텐츠 배경색 간의 명도 대비(채도)를 달리한 구분
5. 줄 간격·글자 간격 조절을 통한 구분
6. 그 밖에 콘텐츠를 시각적으로 구분할 수 있는 방법

WCAG에는 직접 대응하는 성공 기준이 없는 국내 고유 항목입니다(가장 가까운 기준은 1.4.8 시각적 표현).

KWCAG 2.1의 해당 항목: 5.3.5 콘텐츠 간의 구분(5.3 명료성 지침)

왜 필요한가요

경계가 없는 콘텐츠는 저시력·인지장애가 있는 사용자가 어디까지가 한 덩어리인지 알기 어렵고, 터치스크린에서는 이웃한 항목을 잘못 누르기 쉽습니다.

도움받는 사용자

• 저시력 사용자
• 인지장애·학습장애가 있는 사용자
• 터치스크린 사용자
• 고령자

적용 방법

카드·목록·메뉴 항목 사이에 여백, 구분선, 테두리, 배경색 차이 중 하나 이상을 둡니다.

.news-list li { padding: 12px 0; border-bottom: 1px solid #d0d7de; }
.card { border: 1px solid #c4ccd6; border-radius: 8px; padding: 16px; }
.card + .card { margin-top: 12px; }

사례

<ul class="news-list">
  <li><a href="/n/1">점검 안내</a></li>
  <li><a href="/n/2">채용 공고</a></li>
</ul>

<p><a href="/a">이용약관</a><a href="/b">개인정보처리방침</a><a href="/c">고객센터</a></p>

자주 하는 실수

• 하단 정보 링크들이 구분자나 간격 없이 이어져 있습니다.
• 배경색이 같은 영역이 테두리·여백 없이 붙어 있습니다.
• 이웃한 버튼 사이 간격이 없어 경계를 알 수 없습니다.

검사 방법

• 페이지의 이웃한 콘텐츠 영역·목록 항목·링크 묶음이 테두리, 구분선, 여백, 배경색 등으로 구분되는지 눈으로 확인합니다.
• 화면을 확대하거나 고대비 모드에서도 구분이 유지되는지 확인합니다.

다른 지침의 대응 항목