3. 이해의 용이성
사용자들이 가능한 한 쉽게 이해할 수 있도록 콘텐츠나 제어 방식을 구성해야 한다.
3.1 데이터 테이블 구성
데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.
3.1.1 용어 정리
- 데이터 테이블(data table)
- 테이블을 구성하는 데이터간의 논리적 관계를 표현하기 위하여 사용하는 형태이다.
3.1.2 요구 조건
- 데이터 테이블은 테이블의 제목이나 테이블의 내용을 요약하여 제공해야 한다 (항목 1.1 참조).
- 데이터 테이블은 데이터 셀별로 대응되는 모든 헤더를 확인할 수 있도록 구성 하여야 한다.
3.1.3 적용시 장점
데이터 테이블을 요구 조건에 맞추어 제작한 경우에는 임의의 데이터 셀에 대응 되는 모든 헤더 값을 알 수 있다.
3.1.4 적용 예
- 간단한 데이터 테이블 구성
- HTML을 이용하여 간단한 데이터 테이블을 구성하는 경우에 데이터 셀과 헤더는 각각
와 | 태그를 사용하여 테이블을 구성한다.
- 복잡한 데이터 테이블 구성
- HTML에서 행을 그룹화 하는데 THEAD, TFOOT, TBODY 등의 속성을 사용하고, 열을 그룹화 하는 데는 COL, COLGROUP 등의 속성을 사용한다. 보다 복잡한 테이블의 구성을 위해서는 “axis", "scope", "headers"등의 속성을 이용한다.
- 데이터 테이블 설명
- HTML 4.01에 따라 데이터 테이블을 구성하는 경우에 테이블에 대한 설명은 <TABLE ... summary = ""> 태그를 사용하여 표시할 수 있다. 또한 <CAPTION> 태그를 사용하여 테이블의 간단한 제목을 표시할 수도 있다. <TABLE title=""> 태그를 사용해도 동일한 효과를 얻을 수 있다. 즉, 데이터 테이블의 제목(title)은 도표의 첫 부분(상단 처음)에 오도록 하여 이어지는 자료가 데이터 테이블임을 알도록 하면 편리하다.
3.2 논리적 구성
콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.
3.2.1 용어정리
- 배치용 테이블(layout table)
- 데이터 테이블과는 달리 문서의 모양을 만들기 위한 목적으로 사용하는 테이블이다.
- 스타일 시트(style sheet)
- 문서의 표현 형태를 규정하는 일련의 명령문을 의미한다. 스타일 시트는 콘텐츠 제공자가 마련한 것,사용자가 마련한 것, 웹 브라우저에 내장된 형태 등의 세 가지 경우가 있다. CSS(Cascading Style Sheets) 레벨2가 스타일 시트의 대표적인 규정이다.
3.2.2 요구사항
- 문서의 모양이나 콘텐츠의 배치를 위해서는 스타일 시트(style sheet)를 사용하여야 한다.
- 배치용 테이블을 사용하여 콘텐츠의 모양이나 배치를 할 경우에는 테이블을 구성하는 모든 셀들을 왼쪽상단에서 오른쪽 하단에 이르는 순서대로 늘어 놓았을때에도 그 내용을 충분히 이해할 수 있도록 구성해야 한다.
3.2.3 적용시 장점
- 논리적으로 구성된 웹 콘텐츠는 스타일 시트(style sheet)를 바꾸거나 기능을 제거하더라도 그 내용을 순서대로 읽을 수 있으므로 문서의 의미를 이해하는데 어려움이 없다.
- 배치용 테이블은 종종 일정한 형태를 표현하기 위하여 사용된다. 이 경우에도 스크린 리더로 읽어주는 내용의 순서가 화면에 나타난 콘텐츠의 읽는 순서와 같아지게 된다.
3.2.4 적용 예
- 배치용 테이블
- 배치용 테이블은 캡션(CAPTION)이나 타이틀(TITLE) 태그를 사용하지 않는다.
- 스타일 시트
- 스타일 시트를 사용하여 콘텐츠의 모양이나 배치를 구성할 경우에는 스타일 시트 기능을 제거하거나 다른 스타일 시트를 사용하더라도 그 내용을 이해하기 쉽게 콘텐츠를 구성하여야 한다.
3.3 온라인 서식 구성
온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.
3.3.1 용어 정리
- 온라인 서식(on-line form)
- 웹 브라우저 상에서 작성하여 제출하도록 제공되는 양식을 의미한다.
- 애플릿(applet)
- 웹 페이지에 삽입되는 프로그램을 의미한다.
- 플러그인(plug-in)
- 웹 브라우저를 사용하는데 함께 사용되는 프로그램을 의미한다.예를 들어 플래시(Flash) 등이 플러그인의 하나이다.
3.3.2 요구 조건
- 온라인 서식을 구성하는 모든 서식 제어 요소, 예를 들면, 편집 상자(edit box), 라디오 버튼(radio button), 체크 박스(check box) 등은 레이블과 해당 서식 제어 요소간의 표시 순서가 일정하여야 한다.
- 탭(tab)키를 이용하여 서식 제어 요소 간을 이동할 경우에 그 순서가 왼쪽 위에서 오른쪽 아래 부분으로 순차적인 이동이 가능하여야 한다.
- 서식을 구성할 때에 보조기술을 사용하면 접근이 가능한 경우에만 스크립트, 애플릿,플러그인 또는 다른 프로그램 요소를 사용한다.만일 이것이 불가능할 경우에는 스크립트, 애플릿(applet), 플러그인(plug-in) 등 프로그램 요소의 기능을 정지시켜도 온라인 서식을 작성할 수 있어야 한다(항목 4.1 참조).
3.3.3 적용시 장점
요구조건을 만족하는 경우에는 온라인 양식을 작성함에 있어서 모든 서식 제어 요소의 레이블과 서식 제어 요소간의 관계가 일관성을 가지게 되므로 사용자는 혼란을 피할 수 있게 된다.
3.3.4 적용 예
- 편집 박스 프로그래밍 예
- 예를 들어, 레이블 다음에 편집 박스(edit box)가 위치하는 경우에는 다음과 같이 프로그래밍을 하면 된다.
<LABEL for="first_name">이름:
<INPUT type="text" id="first_name" tabindex="1">
</LABEL>
이 경우에 커서가 편집 박스에 위치하면,스크린 리더는‘이름’이라고 읽어준다.
- 편집 박스의 기본값 제공
- 편집 박스는 기본값을 가능한 한 제공한다.
- 편집 박스 테이블 구성
- 편집 박스를 데이터 테이블 형태로 구성할 경우에는 편집 박스별로 테이블 헤더를 읽어주도록 구성한다.
|