본문 바로가기 메뉴 바로가기

인터넷 웹 콘텐츠 접근성 지침Internet Web Contents Accessibility Guideline

한국정보통신표준 제정일 : 2005/12/21
정보통신부

접근성 있는 웹 콘텐츠 설계

지침 3. 이해의 용이성
사용자들이 가능한 한 쉽게 이해할 수 있도록 콘텐츠나 제어 방식을 구성해야 한다.

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

  • 용어 정리
    • 데이터 테이블(data table)이란 테이블을 구성하는 데이터간의 논리적 관계를 표 현하기 위하여 사용하는 형태이다.
  • 요구 조건
    • 데이터 테이블은 테이블의 제목이나 테이블의 내용을 요약하여 제공해야 한다 (chapter1 참조).
    • 데이터 테이블은 데이터 셀별로 대응되는 모든 헤더를 확인할 수 있도록 구성하 여야 한다.
  • 적용시 장점
    • 데이터 테이블을 요구 조건에 맞추어 제작한 경우에는 임의의 데이터 셀에 대응 되는 모든 헤더 값을 알 수 있다.
  • 적용 예
    • 간단한 데이터 테이블 구성

      HTML을 이용하여 간단한 데이터 테이블을 구성하는 경우에 데이터 셀과 헤더는 각각<TD>와 <TD><TH>태그를 사용하여 테이블을 구성한다.

    • 복잡한 데이터 테이블 구성

      HTML에서 행을 그룹화 하는데 THEAD, TFOOT, TBODY 등의 속성을 사용하고, 열을 그룹화 하는 데는 COL, COLGROUP 등의 속성을 사용한다. 보다 복잡한 테 이블의 구성을 위해서는 “axis", "scope", "headers"등의 속성을 이용한다.

    • 데이터 테이블 설명

      HTML 4.01에 따라 데이터 테이블을 구성하는 경우에 테이블에 대한 설명은 <TABLE ... summary = ""> 태그를 사용하여 표시할 수 있다. 또한 <CAPTION> 태그를 사용하여 테이블의 간단한 제목을 표시할 수도 있다. <TABLE title=""> 태 그를 사용해도 동일한 효과를 얻을 수 있다. 즉, 데이터 테이블의 제목(title)은 도 표의 첫 부분(상단 처음)에 오도록 하여 이어지는 자료가 데이터 테이블임을 알도 록 하면 편리하다.

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

  • 용어정리
    • 배치용 테이블(layout table)이란 데이터 테이블과는 달리 문서의 모양을 만들기 위한 목적으로 사용하는 테이블이다.
    • 스타일 시트(style sheet)란 문서의 표현 형태를 규정하는 일련의 명령문을 의미 한다.스타일 시트는 콘텐츠 제공자가 마련한 것,사용자가 마련한 것, 웹 브라 우저에 내장된 형태 등의 세 가지 경우가 있다. CSS(Cascading Style Sheets) 레벨2가 스타일 시트의 대표적인 규정이다.
  • 요구사항
    • 문서의 모양이나 콘텐츠의 배치를 위해서는 스타일 시트(style sheet)를 사용하여야 한다.
    • 배치용 테이블을 사용하여 콘텐츠의 모양이나 배치를 할 경우에는 테이블을 구 성하는 모든 셀들을 왼쪽상단에서 오른쪽 하단에 이르는 순서대로 늘어놓았을 때에도 그 내용을 충분히 이해할 수 있도록 구성해야 한다.
  • 적용시 장점
    • 논리적으로 구성된 웹 콘텐츠는 스타일 시트(style sheet)를 바꾸거나 기능을 제 거하더라도 그 내용을 순서대로 읽을 수 있으므로 문서의 의미를 이해하는데 어 려움이 없다.
    • 배치용 테이블은 종종 일정한 형태를 표현하기 위하여 사용된다. 이 경우에도 스크린 리더로 읽어주는 내용의 순서가 화면에 나타난 콘텐츠의 읽는 순서와 같 아지게 된다.
  • 적용 예
    • 배치용 테이블 : 배치용 테이블은 캡션(CAPTION)이나 타이틀(TITLE) 태그를 사 용하지 않는다.
    • 스타일 시트 : 스타일 시트를 사용하여 콘텐츠의 모양이나 배치를 구성할 경우 에는 스타일 시트 기능을 제거하거나 다른 스타일 시트를 사용하더라도 그 내용 을 이해하기 쉽게 콘텐츠를 구성하여야 한다.

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

  • 용어 정리
    • 온라인 서식(on-line form)이란 웹 브라우저 상에서 작성하여 제출하도록 제공되 는 양식을 의미한다.
    • 애플릿(applet)이란 웹 페이지에 삽입되는 프로그램을 의미한다.
    • 플러그인(plug-in)이란 웹 브라우저를 사용하는데 함께 사용되는 프로그램을 의미 한다.예를 들어 플래시(Flash) 등이 플러그인의 하나이다.
  • 요구 조건
    • 온라인 서식을 구성하는 모든 서식 제어 요소, 예를 들면, 편집 상자(edit box), 라디오 버튼(radio button), 체크 박스(check box) 등은 레이블과 해당 서식 제 어 요소간의 표시 순서가 일정하여야 한다.
    • 탭(tab)키를 이용하여 서식 제어 요소 간을 이동할 경우에 그 순서가 왼쪽 위에 서 오른쪽 아래 부분으로 순차적인 이동이 가능하여야 한다.
    • 서식을 구성할 때에 보조기술을 사용하면 접근이 가능한 경우에만 스크립트, 애 플릿,플러그인 또는 다른 프로그램 요소를 사용한다.만일 이것이 불가능할 경 우에는 스크립트, 애플릿(applet), 플러그인(plug-in) 등 프로그램 요소의 기능을 정지시켜도 온라인 서식을 작성할 수 있어야 한다(chapter4 참조).
  • 적용시 장점
    • 요구조건을 만족하는 경우에는 온라인 양식을 작성함에 있어서 모든 서식 제어 요소의 레이블과 서식 제어 요소간의 관계가 일관성을 가지게 되므로 사용자는 혼란을 피할 수 있게 된다.
  • 적용 예
    • 편집 박스 프로그래밍 예 : 예를 들어, 레이블 다음에 편집 박스(edit box)가 위 치하는 경우에는 다음과 같이 프로그래밍을 하면 된다.
      <LABEL for="first_name">이름:
      <INPUT type="text" id="first_name" tabindex="1">
      </LABEL>
      이 경우에 커서가 편집 박스에 위치하면,스크린 리더는‘이름’이라고 읽어준다.
    • 편집 박스의 기본값 제공 : 편집 박스는 기본값을 가능한 한 제공한다.
    • 편집 박스 테이블 구성 : 편집 박스를 데이터 테이블 형태로 구성할 경우에는 편집 박스별로 테이블 헤더를 읽어주도록 구성한다.