콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.
이해의 용이성
작성자
관리자
작성일
2022-06-24 15:38
조회
896
콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.
WAI에서 대응하는 항목은 다음과 같습니다.
6.1 스타일 시트가 없더라도 읽을 수 있게 문서를 구조화한다. 예를 들면, HTML 문서가 스타일 시트가 없이 표시되더라도 반드시 그 문서를 읽을 수 있어야 한다.
열한번째 항목(국내)의 해설에서는 스타일시트의 경우뿐만 아니라 레이아웃용 테이블의 사용 불가피성을 고려하여 사용시 주의점을 지적하고 있습니다. 그러나 구조 표시용 마크업을 사용하지 말라는 것은 테이블 헤더(TH)등을 사용하지 말라는 것이지 캡션등을 사용하지 말라는 것은 아닙니다. 오히려 레이아웃용 테이블임을 명시하는 캡션은 유용할 수도 있습니다. 이 부분은 정정이 필요하다고 봅니다.
스타일 시트는 문서의 표현 형식을 위해 사용이 권장됩니다. 그러나 스크린 리더등이 기술적 문제로 인해 아직 스타일 시트를 완벽하게 지원하지 못하기 때문에 스타일 시트를 제거하거나 적용하지 않아도 모든 정보와 의미가 전달될 수 있는지 확인하는 것이 필요합니다.
[대상 장애]
- 시각 장애
- 시력 장애
- 색맹, 색약
사용예
■ 레이아웃 스타일시트가 잘못 사용된 경우
<style type="text/css">
<!--
.menu1 { position:absolute; top:1em; left:0em; font-weight:bold;}
.menu2 { position:absolute; top:1em; left:15em; font-weight:bold;}
.item1 { position:absolute; top:3em; left:0em;}
.item2 { position:absolute; top:4.5em; left:0em;}
.item3 { position:absolute; top:3em; left:15em;}
.item4 { position:absolute; top:4.5em; left:15em;}
-->
</style>
</HEAD>
<BODY>
<div>
<span class="menu1">■사이트 개요</span>
<span class="menu2">■문제점(오류)</span>
<span class="item1">1.사이트 디렉토리 트리</span>
<span class="item2">2.파일 및 페이지 정보</span>
<span class="item3">1.전체 깨진 링크수</span>
<span class="item4">2.깨진 링크를 포함한 페이지</span>
</div>
<!--
.menu1 { position:absolute; top:1em; left:0em; font-weight:bold;}
.menu2 { position:absolute; top:1em; left:15em; font-weight:bold;}
.item1 { position:absolute; top:3em; left:0em;}
.item2 { position:absolute; top:4.5em; left:0em;}
.item3 { position:absolute; top:3em; left:15em;}
.item4 { position:absolute; top:4.5em; left:15em;}
-->
</style>
</HEAD>
<BODY>
<div>
<span class="menu1">■사이트 개요</span>
<span class="menu2">■문제점(오류)</span>
<span class="item1">1.사이트 디렉토리 트리</span>
<span class="item2">2.파일 및 페이지 정보</span>
<span class="item3">1.전체 깨진 링크수</span>
<span class="item4">2.깨진 링크를 포함한 페이지</span>
</div>
위의 소스 코드처럼 스타일을 지정할 경우 브라우저에서는 각각 정렬된 순서로 나타나게 됩니다. 하지만 스타일을 제거하고 브라우저로 해당 페이지를 열어보면 다음과 같이 순차적으로 읽기 때문에 스타일에서 적용한 형태대로 나오지 않게 됩니다.
"■사이트 개요 ■문제점(오류) 1.사이트 디렉토리 트리 2.파일 및 페이지 정보 1.전체 깨진 링크수 2.깨진 링크를 포함한 페이지"
이런 문제는 위의 소스중 class="menu2"의 위치를 바꿔주면 쉽게 해결 됩니다. 아래는 수정된 소스 코드와 스타일시트 미적용 상태일때 결과 값입니다.
중략...
<span class="menu1">■사이트 개요</span>
<span class="item1">1.사이트 디렉토리 트리</span>
<span class="item2">2.파일 및 페이지 정보</span>
<span class="menu2">■문제점(오류)</span>
<span class="item3">1.전체 깨진 링크수</span>
<span class="item4">2.깨진 링크를 포함한 페이지</span>
</div>
<span class="menu1">■사이트 개요</span>
<span class="item1">1.사이트 디렉토리 트리</span>
<span class="item2">2.파일 및 페이지 정보</span>
<span class="menu2">■문제점(오류)</span>
<span class="item3">1.전체 깨진 링크수</span>
<span class="item4">2.깨진 링크를 포함한 페이지</span>
</div>
"■사이트 개요 1.사이트 디렉토리 트리 2.파일 및 페이지 정보 ■문제점(오류) 1.전체 깨진 링크수 2.깨진 링크를 포함한 페이지"