접근성 있는 웹 콘텐츠 설계

항목 3.1 (데이터 테이블 구성) 데이터 테이블은 테이블을 구성하는 데이터 셀의 내용에 대한 정보가 충분히 전달될 수 있어야 한다.

용어 정리

1. 데이터 테이블(data table)이란 테이블을 구성하는 데이터간의 논리적 관계를 표현하기 위하여 사용하는 형태이다.

요구 조건

1. 데이터 테이블은 테이블의 제목이나 테이블의 내용을 요약하여 제공해야 한다 (항목 1.1 참조).
2. 데이터 테이블은 데이터 셀별로 대응되는 모든 헤더를 확인할 수 있도록 구성 하여야 한다.

적용시 장점

1. 데이터 테이블을 요구 조건에 맞추어 제작한 경우에는 임의의 데이터 셀에 대응 되는 모든 헤더 값을 알 수 있다.

적용 예

1. 간단한 데이터 테이블 구성 HTML을 이용하여 간단한 데이터 테이블을 구성하는 경우에 데이터 셀과 헤더는 각각 <TD>와 <TH>태그를 사용하여 테이블을 구성한다.
2. 복잡한 데이터 테이블 구성 HTML에서 행을 그룹화 하는데 THEAD, TFOOT, TBODY 등의 속성을 사용하고, 열을 그룹화 하는 데는 COL, COLGROUP 등의 속성을 사용한다. 보다 복잡한 테이블의 구성을 위해서는 “axis", "scope", "headers"등의 속성을 이용한다.
3. 데이터 테이블 설명 HTML 4.01에 따라 데이터 테이블을 구성하는 경우에 테이블에 대한 설명은 <TABLE ... summary = ""> 태그를 사용하여 표시할 수 있다. 또한 <CAPTION> 태그를 사용하여 테이블의 간단한 제목을 표시할 수도 있다. <TABLE> 태그를 사용해도 동일한 효과를 얻을 수 있다. 즉, 데이터 테이블의 제목(title)은 도표의 첫 부분(상단 처음)에 오도록 하여 이어지는 자료가 데이터 테이블임을 알도록 하면 편리하다.

항목 3.2 (논리적 구성) 콘텐츠의 모양이나 배치는 논리적으로 이해하기 쉽게 구성하여야 한다.

용어 정리

1. 배치용 테이블(layout table)이란 데이터 테이블과는 달리 문서의 모양을 만들기 위한 목적으로 사용하는 테이블이다.
2. 스타일 시트(style sheet)란 문서의 표현 형태를 규정하는 일련의 명령문을 의미한다. 스타일 시트는 콘텐츠 제공자가 마련한 것,사용자가 마련한 것, 웹 브라우저에 내장된 형태 등의 세 가지 경우가 있다. CSS(Cascading Style Sheets) 레벨2가 스타일 시트의 대표적인 규정이다.

요구 조건

1. 문서의 모양이나 콘텐츠의 배치를 위해서는 스타일 시트(style sheet)를 사용하여야 한다.
2. 배치용 테이블을 사용하여 콘텐츠의 모양이나 배치를 할 경우에는 테이블을 구성하는 모든 셀들을 왼쪽상단에서 오른쪽 하단에 이르는 순서대로 늘어 놓았을때에도 그 내용을 충분히 이해할 수 있도록 구성해야 한다.

적용시 장점

1. 논리적으로 구성된 웹 콘텐츠는 스타일 시트(style sheet)를 바꾸거나 기능을 제거하더라도 그 내용을 순서대로 읽을 수 있으므로 문서의 의미를 이해하는데 어려움이 없다.
2. 배치용 테이블은 종종 일정한 형태를 표현하기 위하여 사용된다. 이 경우에도 스크린 리더로 읽어주는 내용의 순서가 화면에 나타난 콘텐츠의 읽는 순서와 같아지게 된다.

적용 예

1. 배치용 테이블 : 배치용 테이블은 캡션(CAPTION)이나 타이틀(TITLE) 태그를 사용하지 않는다.
2. 스타일 시트 : 스타일 시트를 사용하여 콘텐츠의 모양이나 배치를 구성할 경우에는 스타일 시트 기능을 제거하거나 다른 스타일 시트를 사용하더라도 그 내용을 이해하기 쉽게 콘텐츠를 구성하여야 한다.

항목 3.3 (온라인 서식 구성) 온라인 서식을 포함하는 콘텐츠는 서식 작성에 필요한 정보, 서식 구성 요소, 필요한 기능, 작성 후 제출 과정 등 서식과 관련한 모든 정보를 제공해야 한다.

용어 정리

1. 온라인 서식(on-line form)이란 웹 브라우저 상에서 작성하여 제출하도록 제공되는 양식을 의미한다.
2. 애플릿(applet)이란 웹 페이지에 삽입되는 프로그램을 의미한다.
3. 플러그인(plug-in)이란 웹 브라우저를 사용하는데 함께 사용되는 프로그램을 의미한다.예를 들어 플래시(Flash) 등이 플러그인의 하나이다.

요구 조건

1. 온라인 서식을 구성하는 모든 서식 제어 요소, 예를 들면, 편집 상자(edit box), 라디오 버튼(radio button), 체크 박스(check box) 등은 레이블과 해당 서식 제어 요소간의 표시 순서가 일정하여야 한다.
2. 탭(tab)키를 이용하여 서식 제어 요소 간을 이동할 경우에 그 순서가 왼쪽 위에서 오른쪽 아래 부분으로 순차적인 이동이 가능하여야 한다.
3. 서식을 구성할 때에 보조기술을 사용하면 접근이 가능한 경우에만 스크립트, 애플릿,플러그인 또는 다른 프로그램 요소를 사용한다.만일 이것이 불가능할 경우에는 스크립트, 애플릿(applet), 플러그인(plug-in) 등 프로그램 요소의 기능을 정지시켜도 온라인 서식을 작성할 수 있어야 한다(항목 4.1 참조).

적용시 장점

1. 요구조건을 만족하는 경우에는 온라인 양식을 작성함에 있어서 모든 서식 제어 요소의 레이블과 서식 제어 요소간의 관계가 일관성을 가지게 되므로 사용자는 혼란을 피할 수 있게 된다.

적용 예

1. 편집 박스 프로그래밍 예 : 예를 들어, 레이블 다음에 편집 박스(edit box)가 위치하는 경우에는 다음과 같이 프로그래밍을 하면 된다.
   <LABEL for="first_name">이름: <INPUT type="text" id="first_name" tabindex="1"> </LABEL>
   이 경우에 커서가 편집 박스에 위치하면,스크린 리더는‘이름’이라고 읽어준다.
2. 편집 박스의 기본값 제공 : 편집 박스는 기본값을 가능한 한 제공한다.
3. 편집 박스 테이블 구성 : 편집 박스를 데이터 테이블 형태로 구성할 경우에는 편집 박스별로 테이블 헤더를 읽어주도록 구성한다.