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

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

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

접근성 있는 웹 콘텐츠 설계

지침 2 운용의 용이성
웹 콘텐츠에 포함된 모든 요소들의 기능은 누구나 쉽게 사용할 수 있어야 한다.

이미지 맵 기법 사용 제한
이미지 맵 기법이 필요할 경우에는 클라이언트측 이 미지 맵을 사용하며 서버측 이미지 맵을 사용할 경우에는 동일한 기능을 하는 텍 스트로 구성된 대체 콘텐츠를 제공해야 한다.

  • 용어 정리
    • 이미지 맵(image map)이란 이미지의 일부 영역에 링크를 두어 사용자에게 해당 정보를 제공할 수 있는 페이지로 이동하도록 만드는 프로그램 기법이다.
    • 서버측 이미지 맵(server-side image map)이란 이미지 맵을 구현하는 프로그램이 서버측에 존재하여 사용자의 웹 브라우저가 이미지 맵 상의 어떤 그림 위에 마 우스를 위치시키고 클릭하면 클라이언트가 마우스의 위치정보를 서버로 제공하 고, 서버는 전달되어온 마우스의 위치에 해당하는 이미지 맵의 영역이 지시하는 링크로 이동한 결과를 클라이언트에 표시하는 방식의 프로그램 기법이다.
    • 클라이언트측 이미지 맵(client-side image map)이란 HTML 태그를 이용하여 사 용자의 브라우저에서 이미지 맵의 영역을 식별하여 직접 해당 영역이 지시하는 링크로 이동하도록 하는 프로그램 기법이다.
  • 요구조건
    • 구성하려는 이미지 맵의 형태를 클라이언트측에서 기하학적으로 표현하기 어려 운 경우가 아니면 서버측 이미지 맵을 사용하지 않는다.
    • 서버측 이미지 맵 기법을 사용할 경우에는 이미지 맵의 영역에 대응하는 텍스트 링크를 별도로 제공해야 한다(chapter1 참조).
    • 클라이언트측 이미지 맵을 사용할 경우에는 이미지 맵의 영역에 대한 충분한 대 체 텍스트를 제공하여야 한다(chapter1 참조).
  • 적용시 장점
    • 서버측 이미지 맵 방식에서 서버는 해당 영역에 대한 대체 텍스트를 사용자에게 제공하지 못하며,단지 컴퓨터 화면상에 표시할 뿐이다.따라서 이 항목을 적용 하면 대체 텍스트 링크가 없는 서버측 이미지 맵의 사용을 제한하므로 시각장애 인의 접근성을 높일 수 있게 된다.
    • 클라이언트측 이미지 맵을 사용하는 경우에도 영역을 표시하는 부분에 대체 텍 스트를 함께 표시한다면 이미지 맵의 영역을 읽어주므로 시각장애인들이 이미지 맵의 어느 영역을 가리키고 있는지를 확인할 수 있다(chapter1 참조).
  • 적용 예
    • 클라이언트측 이미지맵 : 대체 텍스트 지원

      <AREA>태그를 사용하여 클라이언트측 이미지 맵을 작성할 경우 대체 텍스트를 해당 영역에서 제공하여야 한다.

    • 서버측 이미지맵 : 링크목록 제공

      서버측 이미지 맵을 사용할 경우에는 대체 텍스트로 구성된 링크목록을 같은 페 이지에 제공하면 시각장애인들이 텍스트 링크를 사용하여 필요한 작업을 할 수 있 다(chapter1 참조).

프레임의 사용 제한
콘텐츠를 구성하는 프레임의 수는 최소한으로 하며, 프레 임을 사용할 경우에는 프레임별로 제목을 붙여야 한다.

  • 용어 정리 : 없음
  • 요구조건
    • 웹 콘텐츠에는 가급적 프레임을 사용하지 않아야 한다. 만일 프레임을 사용하는 경우에도 사용하는 프레임의 수를 최소한으로 줄여야 한다.
    • 프레임을 사용할 경우에는 프레임 별로 서로 독특한(중복되지 않는) 제목을 부여 하여 프레임을 식별할 수 있어야 한다.
  • 적용시 장점
    • 화면을 볼 수 있는 사용자는 한 페이지를 여러 개의 영역으로 구분한 프레임을 볼 수 있다. 그러나 화면을 볼 수 없는 시각장애인에게 여러 개의 프레임으로 구 성된 페이지는 모든 프레임의 내용을 인지하기 어렵다. 따라서 여러 개의 프레임 으로 구성된 웹 페이지에서 각각의 프레임에 제목을 부여하면 활성화된 프레임 의 제목을 읽어주기 때문에 프레임간의 이동이 매우 편리하다.
  • 적용 예
    • 프레임 : 프레임별 제목 부여 여러 개의 프레임으로 구성된 웹 콘텐츠에서 각각의 프레임에 제목을 부여할 수 있다. 예를 들어, 두개의 프레임으로 구성된 웹 페이지의 경우에 각각의 프레임 제 목을 “순이”와 “철수”라고 명명한다면 현재 활성화된 프레임의 이름을 읽어 볼 수 있으므로 엉뚱한 프레임에서 작업하는 잘못을 방지할 수 있다.

깜박거리는 객체 사용 제한
콘텐츠는 스크린의 깜빡거림을 피할 수 있도록 구성되어야 한다.

  • 용어 정리
    • 스크립트(script)란 컴퓨터에 자동으로 처리를 실행하기 위한 명령을 나열한 파 일로 일반적으로 텍스트 파일 형식으로 제공되는 것이다.
  • 요구조건
    • 웹 콘텐츠에는 애니메이션 등과 같이 깜빡거리는 주파수의 범위가 3 Hz에서 49 Hz 사이인 콘텐츠 요소들을 포함하지 않아야 한다.
    • 만일 위의 (1)에서 명시한 요구조건을 만족할 수 없는 웹 콘텐츠는 깜빡거림이 있는 웹 페이지로 이동하기 전에 이 페이지에 깜빡거림이 있음을 사전에 사용자 에게 경고해주어야 한다. 또한, 스크린의 깜빡거림이 배제된 대체 페이지를 별도 로 제공하여야 한다(chapter1 참조).
  • 적용시 장점
    • 광과민성 발작 증세를 지닌 사람들은 빛이 깜빡거리는 것에 반응하여 발작을 일 으킨다. 특히 3Hz에서 49 Hz의 사이의 깜빡거림은 발작을 일으키는 원인이 되 며, 20Hz 부근이 발작을 가장 잘 일으키는 주파수이다. 따라서 요구조건 (1)을 만족하는 콘텐츠의 경우에는 광과민성 발작중세가 있는 사용자도 접근이 가능하 다.
    • 정신이 산만한 사람의 경우에는 계속적인 깜빡거림이 있는 콘텐츠를 집중하여 응시할 수 없으므로 이 요구조건을 만족하는 콘텐츠는 정신이 산만한 사람도 접 근이 가능하다.
  • 적용 예
    • 첫 페이지 구성 : 깜박거리는 개체 배제 웹사이트에 처음 접속했을 때에 스크린에 나타나는 첫 페이지에는 최소한 깜빡거 림이 없도록 콘텐츠를 구성하며, 만일 다음 페이지에 깜빡거림이 있는 콘텐츠가 포함되어 있을 경우에는 경고문을 첫 페이지에 표시하고, 깜빡거리는 콘텐츠를 제 거한 대체 페이지와 이 페이지로 이동하는 링크를 제공하도록 구성한다.
    • 스크립트 사용 : 스크립트 동작하지 않도록 설정 스크립트를 이용하여 깜빡이는 텍스트(blinking text)를 구성하면 스크립트가 동 작하지 않도록 함으로써 깜빡임을 제거할 수 있다.
    • 프로그래밍 기법 : 객체를 깜박거리게 하는 태그 사용 배제 <blink> 또는 <marquee>태그는 사용하지 않는다.

키보드로만 운용 가능
키보드(또는 키보드 인터페이스)만으로도 웹 콘텐츠가 제공하는 모든 기능을 수행할 수 있어야 한다.

  • 용어정리
    • 키보드 인터페이스란 키보드 또는 특수한 입력장치로부터 응용프로그램이 필요한 모든 정보를 입력받도록 하는 장치를 의미한다.
    • 포인팅 디바이스(pointing device)란 마우스나 터치패드와 같이 컴퓨터 화면의 특 정한 부위를 직접 지정할 수 있는 장치를 의미한다.
    • 음성 입력 장치란 음성으로 컴퓨터를 제어할 수 있도록 구성한 시스템 또는 시스 템을 구성하도록 하는 프로그램을 의미한다.
  • 요구조건
    • 웹 콘텐츠는 키보드 또는 장애를 극복하도록 도와주는 여러 가지 입력 장치를 사용하는 경우에도 콘텐츠가 제공하는 모든 기능을 사용할 수 있어야 한다.
  • 적용시 장점
    • 포인팅 디바이스(pointing device)를 사용할 수 없는 시각장애인들도 웹 콘텐츠 나 웹사이트 기능을 키보드만으로 사용할 수 있다.
    • 키보드 또는 키보드 인터페이스를 사용할 수 없는 지체장애인의 경우에는 키보 드 대신 음성 입력 장치를 이용하여 웹 콘텐츠에 접근할 수 있다.
  • 적용 예
    • 이벤트 발생 방법 : 다양한 입력장치 사용 가능 웹 콘텐츠에서는 포커스인(focus-in), 포커스 아웃(focus-out), 그리고 활성화 (activation)의 세 가지 이벤트가 주로 사용된다. 또한, 이들 이벤트는 포인팅 디바 이스(예를 들어 마우스), 키보드, 음성 입력 시스템과 같은 다양한 입력 디바이스 로 제어가 가능하다.
    • 콘텐츠의 제어 : 키보드 또는 키보드 인터페이스 사용 가능 콘텐츠를 구성하는 모든 링크와 데이터 개체의 실행과 선택은 키보드 또는 키보 드 인터페이스를 사용하여 수행할 수 있도록 구성한다. 예를 들어, 웹 페이지를 구 성하는 콘텐츠 요소들 간의 이동은 탭(tab)키를 사용하여 가능하도록 구성한다.

반복 네비게이션 링크(repetitive navigation link)
웹 콘텐츠는 반복적인네비게이션 링크를 뛰어넘어 페이지의 핵심부분으로 직접 이동할 수 있도록 구성하여야 한다.

  • 용어 정리
    • ① 반복적 네비게이션 링크(repetitive navigation link)란 여러 개의 네비게이션 링크들 이 연속적으로 나열되어 있는 링크 개체를 의미한다. 스크린 리더는 반복적 네비 게이션 링크 개체를 구성하는 모든 링크들을 순서대로 읽어주므로 콘텐츠의 핵 심 부분으로 이동하기 위해서는 모든 링크를 읽어주는 시간이 필요하게 된다.
  • 요구조건
    • 웹 콘텐츠 상에 반복적 네비게이션 링크 개체가 포함되어 있으며 이 링크 객체 가 콘텐츠의 핵심부분보다 먼저 읽어주도록 구성된 경우에 이들 링크들의 읽기 를 생략하고 직접 콘텐츠의 메인 부분으로 직접 이동할 수 있는 링크를 제공하 여야 한다.
    • 하나의 긴 문장으로 구성된 웹 페이지는 이 페이지의 문장을 여러 개의 논리적 인 절로 구분하고 각 절의 색인을 콘텐츠의 첫 부분에 포함시켜 원하는 절의 시 작 부분으로 직접 이동할 수 있도록 웹 페이지를 구성한다.
    • 모든 웹사이트는 텍스트 또는 대체 텍스트가 포함된 텍스트 아닌 콘텐츠로 구성 된 사이트 맵을 제공하여야 한다.
  • 적용시 장점
    • 이 항목을 만족하는 경우 페이지의 상단이나 좌측 프레임에 반복적 네비게이션 링크개체가 포함되어 있다면 스크린 리더 사용자는 이들 링크 목록을 순서대로 읽어준 후에야 필요한 부분을 읽어주므로 매우 지루한 과정이 요구된다. 그러나 이 페이지의 처음에 핵심 부분으로 이동할 수 있는 링크를 제공하면 빠르게 필 요한 위치로 이동할 수 있다.
    • 하나의 긴 문장으로 구성된 콘텐츠 중에서 사용자가 원하는 부분을 찾기 위해서 는 처음부터 모두 읽어야 함으로 필요한 부분을 찾는 것은 매우 지루한 일이다. 따라서 문장의 시작 부분에 색인을 제공하여 필요한 부분으로 직접 이동하도록 하는 것은 매우 편리한 기능이다.
    • 사이트 맵을 제공하면 사용자는 이를 이용하여 필요한 정보가 위치한 페이지로 직접 이동할 수 있다.
  • 적용 예
    • 메인 콘텐츠로의 직접 이동 : 프레임과 링크 사용 예

      만일 웹 콘텐츠를 두 개의 프레임으로 구분하고 왼쪽 프레임을 반복적 네비게이 션 링크용 프레임으로, 오른쪽 프레임을 메인 콘텐츠를 제공하도록 구성할 경우를 생각해 보자. 스크린 리더는 왼쪽의 반복적 네비게이션 링크 프레임의 내용을 모 두 읽은 후에야 비로소 중앙의 메인 콘텐츠를 읽어주게 된다. 따라서 왼쪽 프레임 에 있는 모든 반복적 네비게이션 링크들을 우회하여 직접 메인 콘텐츠로 이동하는 버튼을 두고, 이 버튼에 “메인 콘텐츠로 이동”이라고 레이블을 붙인다면 반복적 네비게이션 링크 개체 모두를 읽지 않고도 메인 콘텐츠 부분으로 직접 이동이 가 능하게 된다.

    • 문서 목차 : 긴 문서의 탐색용이

      하나의 긴 문서로 구성된 웹 콘텐츠의 시작부분에 이 문서의 목차와 해당 위치로 직접 이동할 수 있는 링크를 제공하고,문서가 나누어지는 부분에 문서의 처음,다 음 절, 목차 등으로 이동할 수 있는 링크를 두면 문서를 탐색하는데 매우 편리하 다.

    • 웹사이트 : 사이트 맵의 운영

      웹 콘텐츠의 첫 페이지에 사이트 맵으로 이동하는 링크를 제공하면 모든 페이지 를 열람하지 않고도 필요한 웹 페이지로 직접 이동이 가능하다.

반응시간의 조절기능
실시간 이벤트나 제한된 시간에 수행하여야 하는 활동등은 사용자가 시간에 구애받지 않고 읽거나, 상호작용을 하거나 응답할 수 있어야 한다.

  • 용어정리
    • 실시간 이벤트(real-time event)란 콘텐츠의 저자가 시간을 통제할 수 없는 실시 간 상황에 벌어지는 이벤트를 의미한다.
    • 정해진 시간 내에 응답이 필요한 콘텐츠들은 다음과 같다.
      • (가) 자동적으로 갱신되도록 구성된 콘텐츠
      • (나) 몇 초 후에 다른 페이지로 이동하도록 구성된 콘텐츠
      • (다) 깜빡이는 텍스트나 스스로 스크롤 하도록 구성된 텍스트
      • (라) 짧은 기간 동안 나타났다 일정시간 후에 사라지는 대화창
      • (마) 일정시간 동안 사용하지 않으면 페이지에 대한 접근이 강제 차단되거나 사용 할 수 없게 되는 콘텐츠
    • 팝업(Pop-Up) 창이란 활성화되어 있는 웹 브라우저에 담긴 콘텐츠가 어떤 동작 에 의하여 또는 자동으로 새로 열린 웹 브라우저 창을 의미한다. 그러나 운영체 제가 표시하는 메시지 창은 팝업 창으로 분류하지 않는다.
  • 요구조건
    • 웹 콘텐츠의 시간 제약 조건이 최소한 아래의 항목 중 하나는 만족하여야 한다.
      • (가) 사용자가 시간제한 기능을 동작하지 않도록 할 수 있거나,
      • (나) 일반적으로 사람들이 선호하는 시간의 10배 이상으로 제한 시간을 늘릴 수 있 거나,
      • (다) 주어진 시간이 종료하기 전에 경고를 발하며, 제한 시간을 늘리기 위하여 최소 한 10초 이상 시간이 주어질 수 있어야 한다.
    • 그러나 아래의 항목은 예외로 하되, 시간제약이 있음을 이 페이지에서 분명하게 알려 주어야 한다.
      • (가) 경매 등과 같이 시간 제약이 있으나 다른 대안이 없는 경우거나,
      • (나) 실시간 게임이나 시간이 정해진 범위에서 작업해야 하는 테스트 등과 같이 시 간 제약이 필수적인 경우
    • 팝업(Pop-Up) 창은 가급적 사용을 피해야 한다. 그러나 꼭 사용해야 하는 경우 에는 팝업 창이 열리기 전에 사용자에게 경고를 할 수 있어야 한다. 또한 팝업 창이 열리더라도 포커스가 새로 열린 팝업 창으로 이동해서는 안 된다.
  • 적용시 장점
    • 독서 장애, 인지 장애, 학습 장애를 지닌 사람들은 기록된 문서를 읽고 이해하는 데 에 대부분의 사람들보다 더 많은 시간을 필요로 하는 경우가 종종 발생한다.
    • 지체장애인들은 이동 객체에 대해 반응할 만큼 빠르게 동작하거나 정확하게 움 직일 수 없다.
    • 자주 갱신되는 콘텐츠에서 보조 기술이나 음성 브라우저 등이 정해진 시간 내에 이 콘텐츠를 읽거나 처리하는 것이 곤란한 경우에 시간 제약에 구애받지 않도록 할 필요가 있다.
    • 팝업 창을 사용하면 시각장애인의 경우에 새로운 창의 열고 닫힘을 잘 알 수 없 으므로 매우 불편하다. 그러나 부득이해서 팝업 창을 사용해야만 하는 경우에는 창이 열리기 전에 사용자에게 이를 알려주어 시각장애인들이 팝업 창이 열린다 는 것을 사전이 인지하도록 하는 것이 좋다.
  • 적용 예
    • 시간제약이 없는 콘텐츠 구성 웹 콘텐츠를 구성할 경우에 시간제한을 두지 않도록 한다.
    • 시간제한이 있는 콘텐츠 구성 시간제한을 둘 경우에는 이러한 사항을 사용자가 충분히 알 수 있도록 공지하도 록 한다. 이를 위하여 경과시간과 남은 시간을 화면에 표시하거나 그 값을 스크린 리더로 사용자에게 알려줄 수 있다.