한국형 웹 콘텐츠 접근성 지침(WCAG) 2.2

방송통신표준 KS X OT000.

이 문서에 관한 정보
제정자
방송통신표준심의회 위원장
담당부처
과학기술정보통신부 국립전파연구원
제정일
2005년 12월 21일
개정일
심의
방송통신표준심의회 정보기술 기술심의회
원안작성협력
한국정보통신기술협회
표준 열람:
국립전파연구원 (http://www.rra.go.kr)
현재 표준:
한국형 웹 콘텐츠 접근성 지침 2.2
이전 표준:
한국형 웹 콘텐츠 접근성 지침 2.1

이 표준에 대한 의견 또는 질문은 국립전파연구원 웹사이트를 이용하여 주십시오.

이 표준은 방송통신표준화지침 제18조의 규정에 따라 매 5년마다 방송통신표준심의회에서 심의되어 확인, 개정 또는 폐지됩니다.


온라인판 관련 참고 사항

‌머리말

이 표준은 방송통신표준화법 관련 규정에 따라 방송통신표준심의회 심의를 거쳐 개정한 방송통신 표준이다. 이에 따라 KS X OT0003:2015은 개정되어 이 표준으로 바뀌었다.

이 표준의 일부가 기술적 성질을 가진 특허권, 출원공개 이후의 특허출원, 실용신안권 또는 출원공개 후의 실용신안등록출원에 저촉될 가능성이 있다는 것에 주의를 환기한다. 관계 중앙행정기관의 장과 방송통신표준심의회는 이러한 기술적 성질을 가진 특허권, 출원공개 이후의 특허출원, 실용신안권 또 는 출원공개 후의 실용신안등록출원에 관계되는 확인에 대하여 책임을 지지 않는다.

한국형 웹 콘텐츠 접근성 지침 2.2(Korean Web Content accessibility guidelines 2.2)는 웹 콘텐츠의 접근성을 향상시키기 위한 기술적 규격을 포함하고 있다.

이 표준에 포함된 지침들은 시각장애, 저시력장애, 청각장애, 지체장애, 학습장애, 지적장애, 뇌병변장 애, 광과민성 증후 등과 같은 개별적인 장애를 가진 사용자들이 쉽게 접근할 수 있는 웹 콘텐츠를 구축하는 데 필요한 방법을 소개하고 있다. 그러나 중복장애를 가지고 있는 사용자의 경우에는 본 표준에서 제시하는 방법만으로 구현한 웹 콘텐츠에 접근하기 어려운 경우도 발생할 수 있다.

이 표준에서는 웹 접근성의 준수 여부를 평가할 수 있는 요구 조건과 지침들을 준수하면 얻을 수 있 는 기대 효과를 소개하고 있다. 그러나 지침들을 가능한 한 준수하기 위해서 특정한 기술이 사용되 어야 함을 전제하지 않았다. 그 이유는 본 표준에 포함된 지침들을 제정하는 시점에서 사용되는 기술만으로 한계를 정하기보다는 앞으로 개발될 기술을 최대한 수용할 수 있도록 하였기 때문이다. 이로 인하여 향후 개발될 여러 가지 기술을 적용하기 위해 본 표준이 전면적으로 수정되어야 하는 일을 피할 수 있다.

이 표준의 체제는 원칙(principle), 지침(guideline), 검사항목(requirement)의 3단계로 구성되었다. 개정된 웹 접근성 표준은 웹 접근성 제고를 위한 4가지 원칙과 각 원칙을 준수하기 위한 14개 지침 및 해당 지침의 준수 여부를 확인하기 위해 33개의 검사항목을 제시하였다.

이 표준은 국내 웹 관련 산업 및 정책 전반에 영향을 미칠 것이며, 장애인이 비장애인과 동등하게 인터넷을 이용할 수 있는 환경 조성에 기여할 것이다. 또한, 『지능정보화기본법』, 『장애인 차별금 지 및 권리구제 등에 관한 법률』에 의거 의무화된 웹 접근성 부문의 표준으로 활용될 수 있다.

개요

이 표준은 2005년에 제정된 이래, 그동안의 기술적 변화와 국내외 관련 표준 및 제도의 변경에 대응한 개정 표준이다.

이 표준은 2018년 발행된 W3C의 WCAG 2.1를 기초로 작성한 한국방송통신표준이지만, 우리나라의 산업전반에 미치는 영향 등을 고려하여 국제표준 중 반드시 준수하여야 하는 필수항목을 위주로 작 성되었다.

이 표준은 장애인이나 고령자와 같은 사람들이 비장애인, 젊은이와 동등하게 웹에 접근할 수 있기 위해 웹 콘텐츠를 제작할 때 준수해야 하는 여러 가지 지침들을 기술하고 있다.

이 표준에서 제시한 지침들에 따라 웹 콘텐츠를 제작하면 보조기술을 사용하는 장애인 등도 해당 콘 텐츠에 충분히 접근할 수 있을 것이다. 웹 문서를 설계함에 있어 고려해야 하는 웹사이트 이용자 유 형은 다음과 같다.

이 표준에서는 지침을 준수하는 방법과 지침을 준수하는 경우 장애인의 접근성 향상에 도움이 되는 점을 소개하고 있다. 그러나 본 표준에서는 웹브라우저나 컴퓨터, 운영체제의 종류 등은 고려하지 않 았다. 그 이유는 본 표준에서 제시하는 기술은 현시점의 기술뿐만 아니라 향후 개발될 기술까지도 최대한 수용하지만 기술 발전에 따라 표준의 내용이 빈번하게 수정 또는 개정되는 일을 피할 수 있 기 때문이다.

1. 적용범위

이 표준은 웹 콘텐츠를 구축, 운영, 개선 및 유지 보수할 경우에 적용하는 것으로, 본 표준이 적용되 는 범위는 PC, 터치스크린 기반 기기, 모바일 기기 등에서 실행되는 모든 웹 콘텐츠이다.

이 표준은 제3자가 제공하는 서비스(third-party services)를 포함하여, 웹 콘텐츠 서비스 제공자가 제 공하는 모든 콘텐츠에 적용된다.

2. 인용표준

다음의 인용표준은 전체 또는 부분적으로 이 표준에 적용되기 위해 필수적이다. 발행연도가 표기된 인용표준은 인용된 판만을 적용한다. 발행연도가 표기되지 않은 인용표준은 최신판(모든 추록 포함) 을 적용한다.

Web coontent accessibility guidelines (WCAG) 2.1(2018).

4. 웹 접근성을 고려한 콘텐츠 제작 방법

이 표준은 원칙, 지침, 검사항목의 3단계로 구성되어 있다. 본 표준을 준수할 경우, 장애인, 고령자 등이 비장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고, 이를 운영하고 이 해할 수 있다. 물론 본 표준을 모두 준수한 경우에도 학력, 장애 유형과 정도(장애의 중복 또는 장애 의 경중 등), 컴퓨터 및 인터넷 사용 경험, 보조기술 이용 능력 등에 따라 웹 콘텐츠에 대한 접근이 불가능한 경우가 발생할 수도 있다. 그렇기 때문에 장애인 및 고령자 등을 대상으로 하는 정보화 교 육이 필요하며, 장애인에게는 맞춤형 보조기술을 제공할 필요가 있다. 다만, 이 표준을 준수하여 웹 콘텐츠를 제작하는 경우, 단일 장애를 지닌 사용자에게 필요한 대부분의 웹 접근성과 관련된 문제를 해결할 수 있을 것이다.

표 1 — 한국형 웹 콘텐츠 접근성 지침 2.2 개요
원칙 지침 검사항목
4개 14개 33개

5. 인식의 용이성

인식의 용이성은 사용자가 장애 유무 등에 관계없이 웹사이트에서 제공하는 모든 콘텐츠를 동등하게 인식할 수 있도록 제공하는 것을 의미한다. 인식의 용이성은 대체 텍스트, 멀티미디어 대체수단, 적응성, 명료성의 4가지 지침으로 구성되어 있다.

표 2 — 인식의 용이성 관련 지침 및 검사항목
지침(4개) 검사항목(9개)
5.1. 대체 텍스트 5.1.1. (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용 도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.
5.2. 멀티미디어 대체수단 5.2.1. (자막 제공) 멀티미디어 콘텐츠에는 자막, 대본 또는 수어를 제 공해야 한다.
5.3. 적응성 5.3.1. (표의 구성) 표는 이해하기 쉽게 구성해야 한다.
5.3.2. (콘텐츠의 선형구조) 콘텐츠는 논리적인 순서로 제공해야 한다.
5.3.3. (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.
5.4. 명료성 5.4.1. (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.
5.4.2. (자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.
5.4.3. (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
5.4.4. (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

5.1 대체 텍스트

5.1.1 (적절한 대체 텍스트 제공) 텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.

텍스트 아닌 콘텐츠는 그 의미나 용도를 인식할 수 있도록 대체 텍스트를 제공해야 한다.

이미지 등 텍스트 아닌 콘텐츠를 이용할 경우, 그 의미나 용도를 동등하게 인식할 수 있도록 적절한 대체 텍스트를 제공해야 한다. 또한 대체 텍스트는 간단명료하게 제공해야 한다.

  1. 구체적인 정보를 제공해야 하는 경우: 이미지 링크, 이미지 버튼 등은 용도가 매우 명확하므로, 이미지 링크나 이미지 버튼의 핵심 기능에 대한 설명을 간단한 대체 텍스트로 제공해야 한다.
  2. 의미 있는 배경 이미지: 배경 이미지의 의미가 사용자에게 전달되어야 하는 콘텐츠는 그 의미가 보조기술로 전달되도록 대체 텍스트를 제공해야 한다.
  3. 충분한 정보가 필요한 경우: 데이터 차트와 같이, 내용이 복잡한 콘텐츠는 사용자가 해당 콘텐츠의 의미를 충분히 파악할 수 있도록 대체 텍스트를 제공해야 한다.

다음과 같은 경우에는 대체 텍스트를 제공하지 않거나 제한적으로 제공할 수 있다.

  1. 대체 콘텐츠의 경우: 대체 콘텐츠에는 대체 텍스트를 반드시 제공할 필요는 없다. 예를 들어, 텍스트와 함께 동등한 내용의 수어 동영상을 제공하는 경우, 수어 동영상에는 대체 텍스트를 제공할 필요가 없다.
  2. 콘텐츠의 내용을 설명하는 대체 텍스트를 제공할 수 없는 경우: 생방송 콘텐츠와 같이, 그 내용이 지속적으로 변화하여 설명하기 어려운 경우, 해당 콘텐츠에 대한 간략한 용도를 알려주는 대체 텍스트를 제공하는 것으로 충분하다. 또한 색맹검사, 청각검사, 시력검사, 받아쓰기 등과 같은 검사 또는 시험의 경우에도 콘텐츠의 간략한 용도를 알려주는 대체 텍스트만으로 충분하다.
  3. 특정 감각으로만 제공되는 콘텐츠인 경우: 플루트 독주나 시각적 예술 작품 등의 경우, 해당 콘텐츠에 대한 간략한 용도를 알려주는 대체 텍스트만으로 충분하다.
  4. 불필요한 설명을 제공하는 경우: 단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우, 보조기술을 통해 해당 설명을 제공받을 때 오히려 혼란을 일으킬 가능성이 있으므로 대체 텍스트로 공백 문자를 제공해야 한다.
  5. 동일한 정보를 중복해서 제공하는 경우: 보조기술로 동일한 정보가 반복해서 전달되지 않도록 구현하는 것이 바람직하다.

검사항목 5.1.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 시각장애 또는 지적장애 등으로 인해 시각적으로 정보를 습득하는 데 어려움을 겪는 사용자들이 화면낭독프로그램과 같은 보조기술을 사용하여 해당 콘텐츠를 음성을 통해 들을 수 있으므로 최소한의 접근권을 보장받을 수 있게 된다.
  2. 사용자들을 위해 텍스트 아닌 콘텐츠를 텍스트로 표시하거나 대체 텍스트를 수어로 제공함으로써 해당 콘텐츠에 접근할 수 있다. 시청각중복장애인들 역시 텍스트 아닌 콘텐츠에 대응하는 대체 텍스트를 점자로 변환하는 보조기술을 이용하여 해당 콘텐츠에 대한 접근권을 보장받을 수 있다.
  3. 콘텐츠에 적절한 대체 텍스트를 제공한 경우, 시각으로 제공받는 정보가 불충분하여 사용자가 콘텐츠의 핵심내용을 인지할 수 없거나 잘못된 정보를 제공받음으로써 겪게 되는 불필요한 혼동을 줄일 수 있다.
  4. 대체 텍스트를 제공함으로써 텍스트 아닌 콘텐츠에 대한 검색이 가능하게 된다.
  5. 의미가 있는 배경 이미지가 의미하는 대체 텍스트를 보조기술 사용자가 인지할 수 있어 콘텐츠의 이해와 사용이 가능하게 된다.

5.2 멀티미디어 대체수단

5.2.1 (자막 제공) 멀티미디어 콘텐츠에는 자막, 대본 또는 수어를 제공해야 한다.

멀티미디어 콘텐츠를 장애인도 비장애인과 동등하게 인식할 수 있도록 제작하기 위해서는 자막, 대 본 또는 수어를 제공해야 한다. 여기에서 가장 중요한 요소는 멀티미디어 콘텐츠와 동등한 내용을 제공하는 것이다. 가장 바람직한 방법은 폐쇄자막을 오디오와 동기화시켜 제공하는 것이다. 대사 없 이 영상만 제공하는 경우, 화면해설(텍스트, 오디오, 대본)을 제공해야 한다. 음성만 제공하는 경우에 도 자막, 대본 또는 수어를 제공해야 한다. 자막, 대본 또는 수어는 멀티미디어 콘텐츠에 포함된 음 성의 문맥과 동등해야 한다.

대체수단 제공: 다음 중 한 가지 이상의 대체수단을 제공해야 한다.

  1. 자막 제공: 멀티미디어 콘텐츠를 재생시킬 때마다 자동적으로 자막을 화면에 표시할 수 있는 멀티미디어 콘텐츠는 본 검사항목을 준수한 것으로 간주할 수 있다. 자막은 멀티미디어 콘텐츠에 포함된 음성(대사)과 동등해야 한다. 필요에 따라 자막을 여러 언어로 제공하면, 사용자는 자신이 사용하기를 원하는 자막을 선택할 수 있다.
  2. 대본 제공: 자막과는 달리 멀티미디어가 재생되는 과정에서 시나리오를 제공하는 경우도 본 검사항목을 준수한 것으로 간주한다. 대본은 멀티미디어 콘텐츠에 포함된 음성(대사)과 동등해야 한다. 필요에 따라 대본을 여러 언어로 제공하면, 사용자는 자신이 사용하기를 원하는 대본을 선택할 수 있다.
  3. 수어 제공: 비디오 콘텐츠에 수어를 중첩하여 녹화한 콘텐츠도 본 검사항목을 준수한 것으로 간주한다. 수어는 멀티미디어 콘텐츠에 포함된 음성(대사)과 동등해야 한다.

검사항목 5.2.1절을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 청각장애인은 자막을 통해 음성이나 음향 정보에 접근할 수 있다. 또한 자막을 활용하면 해당 콘텐츠에 대한 인덱스를 작성하거나 내용 검색도 용이하게 할 수 있다. 수어를 제공하는 콘텐츠도 청각장애인의 접근이 용이하다.
  2. 장애인이 아닌 경우에도 자막이 포함된 영상 매체를 다양한 방법으로 활용할 수 있다. 예를 들어, 자막은 소란한 환경이나 오디오 재생기능이 갖추어져 있지 않은 환경에서 영상의 자세한 내용을 파악하는 데 유용하다. 사용자가 자막을 언어별로 선택할 수 있게 하면 외국어 습득과 같이 언어능력이나 읽기능력을 향상시키는 데 도움이 된다.

5.3 적응성

정보나 구조를 잃지 않고 다양한 방식(예: 단순한 레이아웃)으로 표시할 수 있는 콘텐츠를 제작해야 한다.

5.3.1 (표의 구성) 표는 이해하기 쉽게 구성해야 한다.

표를 제공할 경우, 표의 이해를 돕기 위한 내용 및 구조에 대한 정보를 제공해야 한다.

  1. 표 정보 제공: 데이터를 표로 구성할 경우, 표의 내용, 구조 등을 이해할 수 있는 정보를 제공하여 표의 이용 방법을 예측할 수 있도록 해야 한다.
  2. 표의 구성: 표의 내비게이션을 위하여, 표의 셀은 제목 셀과 데이터 셀이 구분되도록 구성해야 한다.

검사항목 5.3.1절을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 제목 셀과 데이터 셀이 구분되도록 구현한 데이터 테이블은 시각장애인에게 데이터 셀에 대한 제목 셀의 내용 또는 제목 셀과의 관계를 알려주므로 내용을 파악하기 쉽다.

5.3.2 (콘텐츠의 선형구조) 콘텐츠는 논리적인 순서로 제공해야 한다.

콘텐츠는 보조기술 사용자가 맥락을 이해할 수 있도록 논리적인 순서로 제공해야 한다.

  1. 콘텐츠의 선형구조 유지: 웹 페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 선형구조로 작성해야 한다.
  2. 내용, 표현 및 기능 분리: 브라우저 화면에 표시되는 콘텐츠의 순서는 웹 페이지에 수록된 콘텐츠의 선형구조와 항상 동일한 것은 아니다. 예를 들어, 스타일 시트를 사용하면 웹 페이지를 구성하는 콘텐츠의 순서를 변경하지 않고도 화면에 표시되는 콘텐츠의 배치(layout)를 임의로 변경할 수 있다. 따라서 웹 페이지를 구성하는 콘텐츠의 나열 순서는 그 맥락을 이해할 수 있도록 논리적으로 구성해야 한다. 배치를 시각적으로 변경해야 하는 경우에도 콘텐츠의 선형구조는 유지해야 한다.

검사항목 5.3.2을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 콘텐츠의 선형구조가 논리적인 콘텐츠는 지적장애, 언어장애 및 학습장애가 있는 사용자도 콘텐츠를 이해하는 데 도움을 준다.
  2. 콘텐츠의 선형구조가 논리적인 웹 콘텐츠는 스타일 시트를 바꾸거나 기능을 제거하더라도 그 내용을 순서대로 읽어 문서의 의미를 이해하기가 쉽다.

5.3.3 (명확한 지시사항 제공) 지시사항은 모양, 크기, 위치, 방향, 색, 소리 등에 관계없이 인식될 수 있어야 한다.

본 검사항목은 특정 요소를 가리키거나 지시사항을 전달하는 콘텐츠에 한정해 적용하는 것으로, 콘 텐츠의 사용에 필요한 지시사항을 시각이나 청각 등과 같은 특정한 단일 감각에만 의존하는 방법으 로 제공해서는 안 된다는 것이다. 즉, 여러 가지 다른 감각을 통해서도 지시사항을 인식하는 데 문제 가 없도록 콘텐츠를 제공해야 한다. 텍스트 콘텐츠(대체 텍스트 포함)는 보조기술을 통해 다른 감각 으로의 변환이 가능하기 때문에 텍스트 지시사항에는 추가적인 음성 콘텐츠를 제공할 필요가 없다.

  1. 색, 크기, 모양 또는 위치와 같은 정보에 대한 인식: 웹 콘텐츠는 콘텐츠에 접근하는 사용자들이 색, 크기, 모양 또는 위치에 관한 정보를 인식하지 못하더라도 원하는 콘텐츠에 접근할 수 있도록 제작해야 한다. 예를 들어, 특정 요소를 ‘동그란 버튼을 누르시오’ 또는 ‘오른쪽 버튼을 누르시오’라고 가리킬 때, 그 대상이 되는 버튼이 ‘동그란 버튼’ 또는 ‘오른쪽 버튼’이라는 대체 텍스트를 포함하고 있지 않을 경우, 시각장애를 지닌 사용자는 어떤 요소를 지칭하는지 알 수 없다. 따라서 이러한 경우, 가리키고자 하는 요소의 실제 명칭이나 그 요소가 포함하고 있는 대체 텍스트를 사용해 지칭하거나, 불가피하게 색, 크기, 모양, 위치와 같은 정보를 사용해 특정 요소를 가리킬 때는 이를 보완할 수 있는 다른 감각을 이용하는 정보를 제공해야 한다.
  2. 음성이나 음향 정보의 인식: 사용자에게 음성이나 음향을 사용해 지시사항을 전달하는 경우, 사용자가 소리를 들을 수 없더라도 전달하고자 하는 지시사항을 인식할 수 있어야 한다. 예를 들어, 온라인 시험 진행 중 사용자에게 비프음으로 정답인지 오답인지를 사용자에게 알려주면, 청각장애 사용자나 스피커가 설치되어 있지 않은 환경에 있는 사용자는 정답과 오답 여부를 확인할 수 없다. 이 경우, 비프음과 함께 정답과 오답 여부를 시각적으로 확인할 수 있는 수단을 제공하면 더 많은 사용자가 지시사항을 인지할 수 있다.

검사항목 5.3.3을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 시각장애인은 콘텐츠의 모양이나 위치에 의한 정보를 이해할 수 없기 때문에, 추가적인 정보를 제공하는 경우 콘텐츠를 이용할 수 있다.

5.4 명료성

배경으로부터 전경을 분리하는 것을 포함하여, 콘텐츠는 사용자가 더 쉽게 보고 들을 수 있도록 제작되어야 한다.

5.4.1 (색에 무관한 콘텐츠 인식) 콘텐츠는 색에 관계없이 인식될 수 있어야 한다.

콘텐츠에서 제공하는 모든 정보는 특정한 색을 구별할 수 없는 사용자, 흑백 디스플레이 사용자, 흑 백 인쇄물을 보는 사용자 및 고대비 모드 사용자가 인식할 수 있도록 제공해야 한다.

  1. 색에 의한 정보 표현 방지: 차트나 그래프 등을 고대비 모드로 화면에 표시하면 모든 색이 단색(회색조)으로 표시되어 사용자가 색을 구분하지 못하는 경우가 발생한다. 따라서 사용자가 경조 모드에서도 콘텐츠를 인식할 수 있도록 색만을 이용하여 정보를 제공하지 않아야 한다. 즉, 색은 시각적인 강조를 위해서만 사용해야 한다.
  2. 무늬를 이용한 정보 제공: 서로 다른 정보를 무늬로 구분하여 표시하면 경조 모드 사용자, 단색 디스플레이 사용자, 흑백 인쇄물의 사용자도 정보를 충분히 구분할 수 있다. 무늬와 색을 동시에 이용한 콘텐츠는 색각장애가 있는 사용자도 접근이 가능하다.

검사항목 5.4.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 색의 차이가 정보의 다름을 나타내지 않으므로, 색을 인지하는 데 장애가 있는 사용자도 혼동을 일으킬 염려가 없게 된다.
  2. 흑백 스크린(구형 PDA 등) 또는 고대비 모드 사용자도 콘텐츠의 내용이나 구조를 손쉽게 이해할 수 있다.

5.4.2 (자동 재생 금지) 자동으로 소리가 재생되지 않아야 한다.

웹 페이지에서 자동으로 소리(동영상, 오디오, 음성, 배경 음악 등 콘텐츠가 제공하는 모든 소리)가 재생됨으로 인해 화면낭독프로그램 사용자가 콘텐츠를 인식하고 사용하는 데 방해받지 않아야 한다. 단, 3초 미만의 소리는 허용한다. 3초 이상 재생되는 소리는 제어할 수 있는 수단(멈춤, 일시정지, 음 량 조절 등)을 함께 제공해야 한다. 참고로, 플랫폼은 콘텐츠가 제공하는 배경음의 음량을 조절하더 라도 화면낭독프로그램의 음량에는 영향을 주지 않아야 한다.

  1. 자동 재생음을 허용하는 경우: 자동으로 재생되는 소리는 3초 내에 멈추거나, 지정된 키(예: esc키)를 누르면 재생을 멈추도록 구현한다.
  2. 사용자 요구에 의한 재생: 콘텐츠에 포함된 멀티미디어 파일은 정지 상태로 제공하며 사용자가 요구할 경우에만 재생할 수 있도록 제어판(멈춤, 일시 정지, 음량 조절 등)을 제공한다.

검사항목 5.4.2을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 멀티미디어 콘텐츠가 자동적으로 실행되어 시각장애인이 사용하고 있는 화면낭독프로그램이 읽어주는 소리를 방해하면 큰 혼란을 야기할 수 있다. 따라서 3초 이후에는 해당 멀티미디어 콘텐츠가 자동적으로 만들어 내는 소리가 멈추어야 시각장애인이 이 페이지를 사용할 수 있다.

5.4.3 (텍스트 콘텐츠의 명도 대비) 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.

웹 페이지에서 보이는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 충분한 대비를 제공하여, 저시력장애인, 색각장애인, 고령자 등도 콘텐츠를 인식할 수 있도록 제공해야 한다. 다만, 로고, 장식 목적의 콘텐츠, 마우스나 키보드를 활용하여 초점을 받았을 때 명도 대비가 커지는 콘텐츠 등은 예 외로 한다.

  1. 콘텐츠의 명도 대비: 웹 페이지가 제공하는 텍스트 콘텐츠(텍스트 및 텍스트 이미지)와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다.
  2. 폰트 크기에 따른 명도 대비: 텍스트 콘텐츠를 구성하고 있는 텍스트 폰트를 18pt 이상 또는 14pt 굵은 폰트를 사용하는 경우, 명도 대비를 3 대 1까지 낮출 수 있다.
  3. 화면 확대가 가능한 콘텐츠: 화면 확대가 가능하도록 구현한 텍스트 콘텐츠(텍스트 및 텍스트 이미지)의 명도대비는 3 대 1까지 낮출 수 있다.

5.4.4 (콘텐츠 간의 구분) 이웃한 콘텐츠는 구별될 수 있어야 한다.

웹 페이지를 구성하는 이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 한다.

모든 이웃한 콘텐츠는 시각적으로 구분될 수 있도록 구현해야 한다. 이웃한 콘텐츠를 시각적으로 구 분하기 위한 예는 다음과 같다.

  1. 테두리를 이용하여 구분
  2. 콘텐츠 사이에 시각적인 구분선을 삽입하여 구분
  3. 서로 다른 무늬를 이용하여 구분
  4. 콘텐츠 배경색 간의 명도대비(채도)를 달리하여 구분
  5. 줄 간격 및 글자 간격을 조절하여 구분
  6. 기타 콘텐츠를 시각적으로 구분할 수 있는 방법 등

검사항목 5.4.4을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 이웃한 콘텐츠 간에 간격을 두면 손가락으로 이용할 수 있는 터치스크린을 채용한 기기에서도 콘텐츠의 식별과 조작이 가능하게 된다.

2. 운용의 용이성

운용의 용이성은 사용자가 장애 유무 등에 관계없이 웹사이트에서 제공하는 모든 기능을 운용할 수 있도록 제공하는 것을 의미한다. 운용의 용이성은 입력장치 접근성, 충분한 시간 제공, 광과민성 발 작 예방, 쉬운 내비게이션, 입력 방식의 5가지 지침으로 구성되어 있다.

표 3 — 운용의 용이성 관련 지침 및 검사항목
지침(5개) 검사항목(15개)
6.1. 입력장치 접근성 6.1.1. (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어 야 한다.
6.1.2. (초점 이동과 표시) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.
6.1.3. (조작 가능) 사용자 입력 및 콘트롤은 조작 가능하도록 제공되어 야 한다.
6.1.4 (문자 단축키) 문자 단축키는 오동작으로 인한 오류를 방지하여야 한다.
6.2. 충분한 시간 제공 6.2.1. (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.
6.2.2. (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.
6.3. 광과민성 발작 예방 6.3.1. (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번 쩍이는 콘텐츠를 제공하지 않아야 한다.
6.4 쉬운 내비게이션 6.4.1. (반복 영역 건너뛰기) 콘텐츠의 반복되는 영역은 건너뛸 수 있어 야 한다.
6.4.2. (제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제 공해야 한다.
6.4.3. (적절한 링크 텍스트) 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.
6.4.4. (고정된 참조 위치 정보) 전자출판문서 형식의 웹 페이지는 각 페이지로 이동할 수 있는 기능이 있어야 하고, 서식이나 플랫폼에 상관 없이 참조 위치 정보를 일관되게 제공ㆍ유지해야 한다.
6.5. 입력 방식 6.5.1. (단일 포인터 입력 지원) 다중 포인터 또는 경로기반 동작을 통 한 입력은 단일 포인터 입력으로도 조작할 수 있어야 한다.
6.5.2. (포인터 입력 취소) 단일 포인터 입력으로 실행되는 기능은 취소 할 수 있어야 한다.
6.5.3. (레이블과 네임) 텍스트 또는 텍스트 이미지가 포함된 레이블이 있는 사용자 인터페이스 구성요소는 네임에 시각적으로 표시되는 해당 텍스트를 포함해야 한다.
6.5.4. (동작기반 작동) 동작기반으로 작동하는 기능은 사용자 인터페이 스 구성요소로 조작할 수 있고, 동작기반 기능을 비활성화할 수 있어야 한다.

6.1 입력장치 접근성

6.1.1 (키보드 사용 보장) 모든 기능은 키보드만으로도 사용할 수 있어야 한다.

웹 페이지에서 제공하는 모든 기능은 키보드만으로도 사용할 수 있도록 제공해야 한다. 다만, 다음의 경우, 본 검사항목의 예외로 할 수 있다.

  1. 키보드 인터페이스와 기능: 콘텐츠의 모든 기능은 키보드로 사용이 가능해야 한다. 이 경우, 해당 기능을 사용하는 데 필요한 키보드의 조작 횟수의 많고 적음은 고려대상이 아니다.

  2. 예외 콘텐츠: 위치 지정 도구의 커서 궤적이 중요한 역할을 하는 콘텐츠(붓질 기능이 필요한 콘텐츠, 시뮬레이션 콘텐츠, 지리정보 응용 콘텐츠, 가상현실 콘텐츠 등), 움직임 측정 센서를 이용하는 콘텐츠는 본 검사항목의 예외 콘텐츠로 간주한다. 그러나 예외 콘텐츠의 경우에도 위치 지정 도구나 움직임 측정 센서를 이용하는 기능을 제외한 나머지 사용자 인터페이스는 키보드만으로도 사용할 수 있어야 한다.

검사항목 6.1.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 위치 지정 도구를 사용할 수 없는 시각장애인의 경우, 키보드만으로도 웹 콘텐츠나 웹사이트가 제공하는 모든 기능을 사용할 수 있다.

  2. 전통적인 키보드를 사용할 수 없는 지체장애인의 경우, 키보드 대신 음성 입력장치를 이용하더라도 웹 콘텐츠가 제공하는 모든 기능을 사용할 수 있다.

6.1.2 (초점 이동과 표시) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

(초점 이동과 표시) 키보드에 의한 초점은 논리적으로 이동해야 하며, 시각적으로 구별할 수 있어야 한다.

웹 페이지에서 제공하는 모든 기능을 키보드만으로 사용하는 경우에도 사용자 입력 간의 초점 이동 은 적절한 순서를 따라야 하며, 이 과정에서 콘텐츠는 조작이 불가능한 상태가 되거나 갑작스러운 페이지의 전환 등이 일어나지 않아야 한다.

또한 초점을 받은 콘텐츠는 저시력장애인과 지체장애인이 인지할 수 있도록 시각적으로 구별되어야 한다.

  1. 초점 이동 순서 유지: 사용자가 키보드를 이용하여 초점을 이동하는 경우 이동 순서가 관례를 벗어나면 사용자에게 혼란을 주기 때문에, 초점 이동 순서는 사용자가 예측하는 이동 순서와 일치해야 한다. 바람직한 방법은 기존의 관례를 따르도록 콘텐츠를 제공하는 것이다. 관례와 달리 초점 이동 순서를 결정해야 하는 경우, 사용자 입력 간의 이동 순서를 논리적으로 구현해야 한다. 예를 들어, 사용자 아이디, 비밀번호를 입력하는 입력 창과 로그인 버튼 간의 초점 이동 순서는 사용자 아이디, 비밀번호, 로그인 버튼의 순서이어야 한다.

  2. 함정 또는 오류 방지: 웹 콘텐츠는 더 이상 키보드 조작이 불가능한 상태가 되어 다음 사용자 입력 또는 콘트롤 등으로 초점을 이동할 수 없거나 이전 페이지로 초점을 이동할 수 없는 상태가 되지 않도록 구현해야 한다.

  3. 초점의 시각화: 사용자 입력 등이 위치 지정 도구(마우스)나 키보드 조작을 통해 초점을 받았을 때, 해당 콘트롤이 초점을 받았음을 시각적으로 구별할 수 있음을 의미한다. 대표적인 예로 키보드 조작을 통해 버튼이 초점을 받았을 때, 이 버튼의 주위에 점선의 테두리가 표시되는 것을 들 수 있다. 위치 지정 도구에 의한 초점과 키보드에 의한 초점의 표시 방법이 다른 것도 허용한다. 시각적으로 인식가능한 초점 표시는 시간제한이 없어야 한다.

검사항목 6.1.2을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 화면낭독프로그램을 이용하는 사용자의 경우, 사용자 입력 주변의 상하좌우에 위치한 콘텐츠에 대한 정보를 알 수 없다. 따라서 웹 콘텐츠를 사용하는 과정에서 키보드 조작에 의한 사용자 입력 간의 이동 순서는 관례를 따라야 한다. 그렇지 않으면 사용자 입력의 조작 과정에서 혼란을 주게 된다.

  2. 마우스나 키보드 조작을 통해 특정 영역으로 콘트롤을 이동하였을 경우 해당 영역이 초점을 받았음을 시각적으로 알려주면 저시력장애인, 고령자, 지체장애인뿐만 아니라 비장애인들도 현재 초점이 어느 콘트롤에 위치하고 있는지 확인가능하고 콘트롤의 기능을 활성화시킬 수 있는지 쉽게 인지할 수 있다.

6.1.3 (조작 가능) 사용자 입력 및 콘트롤은 조작 가능하도록 제공되어야 한다.

웹 페이지에서 제공하는 모든 이웃한 콘트롤은 개별적으로 선택하고 사용할 수 있도록 충분한 크기 로 제공해야 한다.

  1. 콘트롤의 크기: 콘텐츠에 포함된 모든 콘트롤은 대각선 방향의 길이를 6.0mm 이상으로 제공하는 것이 바람직하다.

  2. 링크, 사용자 입력, 기타 콘트롤 등의 안쪽 여백: 링크, 사용자 입력 및 기타 콘트롤은 테두리 안쪽으로 1픽셀 이상의 여백을 두고, 그곳에서는 위치 지정 도구의 조작에 반응하지 않도록 구현하는 것이 바람직하다.

검사항목 6.1.3을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 콘트롤을 크게 구현하면 터치스크린을 채용한 기기를 이용하는 손 떨림이 있는 사용자와 시각장애인도 콘트롤을 용이하게 찾아서 조작할 수 있다.

6.1.4 (문자 단축키) 문자 단축키는 오동작으로 인한 오류를 방지하여야 한다.

단일 문자 단축키(예: 대/소문자, 구두점, 기호 등 글자키나 숫자키 또는 특수문자키)를 제공하는 경 우, 오류를 방지하기 위하여 다음 중 하나 이상을 충족해야 한다.

  1. 비활성화: 단축키를 끌 수 있는 방법을 제공해야 한다.

  2. 재설정: 한 개 이상의 기능키(예: Ctrl, Alt, Shift, Option, Command 등)를 조합하여 단축키를 재설정할 수 있어야 한다.

  3. 초점을 받은 경우에만 활성화: 사용자 인터페이스 구성요소(예: 폼 콘트롤, 링크, 콘텐츠 에디터 등)가 초점을 받은 경우에만 단축키가 활성화되어야 한다.

검사항목 6.1.4을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 음성명령 사용자가 입력을 위해 음성을 사용하는 것만으로도 의도하지 않게 단일 문자 단축키를 실행시키는 오작동을 방지할 수 있다.

  2. 손 사용이 원활하지 않은 사용자의 단일 문자 단축키 사용 오류를 방지할 수 있다.

  3. 단일 문자 단축키 재설정 기능을 활용하여 익숙한 단축키로 변경할 수 있다.

6.2 충분한 시간 제공

6.2.1 (응답시간 조절) 시간제한이 있는 콘텐츠는 응답시간을 조절할 수 있어야 한다.

웹 콘텐츠 제작 시 시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하며, 보안 등의 사 유로 시간제한이 반드시 필요할 경우 이를 회피할 수 있는 수단을 제공해야 한다.

  1. 시간제한 콘텐츠 사용 배제: 시간제한이 있는 콘텐츠는 제공하지 않아야 한다.

  2. 예외 콘텐츠: 시간제한이 있더라도 온라인 경매, 실시간 게임 등과 같이 반응시간의 조절이 원천적으로 허용되지 않는 경우, 본 검사항목이 적용되지 않는다. 다만, 이 경우에도 사용자에게 시간제한이 있다는 것을 미리 알려주고, 종료되었을 경우에도 이를 알려주어야 한다. 세션 시간이 20시간 이상인 콘텐츠의 경우에도 예외로 간주한다.

  3. 반응시간 조절이 필요한 콘텐츠: 반응시간이 정해진 웹 콘텐츠를 사용자가 이용할 수 있도록 하기 위해서는 반응시간이 완료되기 전에 사용자가 다음 중 한 가지 방법을 선택하여 반응시간을 조절할 수 있는 수단을 제공해야 한다. 또한 반응시간 조절 기능은 충분한 시간(최소 20초 이상)을 두고 사전에 알려주어야 한다.

    1. 시간제한을 해제할 수 있어야 한다.
    2. 시간제한을 연장할 수 있어야 한다.

검사항목 6.2.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 비장애인보다 문서를 읽고 이해하는 데 더 많은 시간이 필요한 지적장애 또는 학습장애가 있는 사용자도 시간제한이 있는 콘텐츠를 시간에 관계없이 이용할 수 있게 된다.

6.2.2 (정지 기능 제공) 자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

웹 콘텐츠는 스크롤 및 자동 갱신되는 콘텐츠를 장애인 사용자가 이용할 수 있도록 일시 정지할 수 있는 수단을 제공해야 한다.

  1. 이동하거나 스크롤되는 콘텐츠 사용 배제: 스크롤 및 자동 갱신되는 콘텐츠를 사용하지 않는다.

  2. 이동하거나 스크롤되는 콘텐츠: 저시력장애인이나 지적장애인 등은 이동하거나 스크롤되는 콘텐츠를 사용하기 어려우므로, 웹 콘텐츠는 사용자가 이동이나 스크롤을 일시 정지시키고, 지나간 콘텐츠 또는 앞으로 나타날 콘텐츠를 선택할 수 있는 콘트롤(예: ‘앞으로 이동', ‘뒤로 이동’, ‘정지’ 등)을 제공해야 한다.

검사항목 6.2.2을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 배너와 같이, 빠르게 변화하는 콘텐츠를 이용하기 어려운 지체장애인, 고령자, 뇌병변장애인도 빠르게 변화하는 콘텐츠를 이용할 수 있다.

  2. 스크롤되는 뉴스 콘텐츠에서 이미 지나간 뉴스를 손쉽게 확인할 수 있는 기능이 제공되면 콘텐츠의 사용이 편리하게 된다.

6.3 광과민성 발작 예방

6.3.1 (깜빡임과 번쩍임 사용 제한) 초당 3~50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다.

깜빡이거나(blinking) 번쩍이는(flashing) 콘텐츠로 인해 발작을 일으키지 않도록 초당 3∼50회 주기로 깜빡이거나 번쩍이는 콘텐츠를 제공하지 않아야 한다. 10인치 이상의 스크린을 채용하고 있는 정보통 신기기(태블릿 기기, PC 모니터, 무인 안내기 등)에서는 콘텐츠에 의한 광과민성 발작 가능성을 특히 주의해야 한다.

  1. 번쩍이는 콘텐츠 사용 금지: 번쩍임이 초당 3~50회이며, 10인치 이상의 화면에 표시된 번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 전체 면적의 10%를 넘지 않아야 한다.

  2. 깜빡이는 콘텐츠 사용 금지: 초당 3~50회의 속도로 깜빡거리게 만든 콘텐츠는 그 깜빡임을 정지시킬 수 있어야 한다.

  3. 번쩍이는 시간 제한: 웹 페이지에 포함되는 콘텐츠의 번쩍이는 시간을 3초 미만으로 제한하면, 지속적인 번쩍임으로 인한 사용자(예: 광과민성 증후 환자, 학습장애인, 저시력장애인 등)의 발작을 예방하면서도 콘텐츠의 중요성을 알릴 수 있다.

검사항목 6.3.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 광과민성 증후가 있는 사용자들은 빛이 번쩍거리는 것에 민감하게 반응하여 발작을 일으킬 수 있다. 따라서 본 검사항목을 준수한 콘텐츠는 광과민성 증후가 있는 사용자도 접근 가능하다.

  2. 주의집중에 어려움이 있는 사람의 경우, 지속적으로 번쩍거림이 있는 콘텐츠를 집중하여 응시하기가 매우 어렵다. 따라서 본 검사항목을 만족하는 웹 콘텐츠는 주의집중에 어려움이 있는 사람도 접근이 가능하다.

6.5 입력 방식

6.5.1 (단일 포인터 입력 지원) 다중 포인터 또는 경로기반 동작을 통한 입력은 단일 포인터 입력으로도 조작할 수 있어야 한다.

두 개 이상의 손가락을 동시에 사용해야 하는 다중 포인터(예: 핀치 줌, 두 손가락 탭 등) 또는 쓸어 넘기기 등의 경로기반 동작(예: 스와이프, 끌기와 놓기, 그리기 등)을 통한 입력으로 작동하는 모든 기능은 단일 포인터 입력으로도 조작할 수 있어야 한다. 다만, 다음과 같은 경우에는 예외로 간주한 다.

  1. 필수적인 경우: 피아노 앱의 건반 동시누르기와 같은 다중 포인터나 서명과 같은 경로기반 동작을 통한 입력이 반드시 실행되어야 하는 경.

  2. 운영체제나 사용자 에이전트(예: 브라우저), 보조기기 등이 지원하는 동작(예: 운영체제가 제공하는 손가락 두 개 끌어서 스크롤하기)을 통한 입.

검사항목 6.5.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 한 손가락 또는 스틱 포인팅 장치를 사용하거나 다중 포인터 동작을 통한 입력이 불가능하거나 어려운 사용자도 해당 장치나 동작을 통한 입력을 할 수 있다.

  2. 손떨림, 시각장애 등으로 끌기 동작이나 복잡하거나 정교한 동작, 또는 그리기 동작을 통한 입력이 어려운 사용자도 해당 동작을 통한 입력을 적절하게 수행할 수 있다.

  3. 복잡한 조작 과정이나 수단을 통한 입력을 이해하기 어려운 인지 또는 학습장애 사용자도 해당 조작 과정이나 수단을 통한 입력을 보다 쉽게 수행할 수 있다.

6.5.2 (포인터 입력 취소) 단일 포인터 입력으로 실행되는 기능은 취소할 수 있어야 한다.

단일 포인터 입력으로 실행되는 기능은 해당 입력이 실수로 실행되는 것을 방지하기 위하여, 다음 중 하나 이상을 준수해야 한다.

  1. 다운 이벤트만으로 실행 금지: 기능은 다운 이벤트만으로 실행되지 않아야 한다.

  2. 중지 또는 실행취소: 기능은 업 이벤트에 완료되어야 하며, 실행 전에 중지시키거나 실행 후에 취소시킬 수 있어야 한다.

  3. 되돌리기: 다운 이벤트로 실행된 모든 기능은 업 이벤트로 되돌릴 수 있어야 한다.

  4. 필수적인 경우: 기능을 완료하는 데 다운 이벤트가 반드시 필요하다.

기능을 완료하는 데 다운 이벤트가 필수적인 경우로는 화면 피아노 건반, 슈팅게임 등이 있다.

검사항목 6.5.2을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 사용자가 잘못된 입력임을 인식했을 때 동작을 취소하거나 실행결과를 되돌릴 수 있다.

  2. 우발적으로 오동작을 일으킬 확률을 줄여준다.

6.5.3 (레이블과 네임) 텍스트 또는 텍스트 이미지가 포함된 레이블이 있는 사용자 인터페이스 구성요소는 시각적으로 표시되는 해당 텍스트를 네임에 포함해야 한다.

사용자 인터페이스 구성요소(예: 메뉴, 링크, 버튼 등)에서 시각적으로 표시되는 텍스트를 네임에 제공하지 않은 경우 보조기술이 해당 사용자 인터페이스 구성요소를 인식할 수 없기 때문에, 네임에는 시각적으로 표시되는 텍스트를 제공해야 한다. 또한 네임과 텍스트를 다르게 제공한 경우 해당 정보 사용자(예: 음성명령 사용자)가 혼란을 겪을 수 있기 때문에, 네임과 텍스트는 동일하게 제공하는 것이 좋으며, 동일하지 않게 제공할 경우 텍스트는 네임의 앞부분에 제시하는 것이 좋다. 단, 텍스트나 텍스트 이미지가 포함된 레이블이 없는 사용자 인터페이스 구성요소는 본 지침이 적용되지 않는다.

검사항목 6.5.3을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 음성 입력(speech-input) 사용자는 시각적으로 표시되는 텍스트를 사용하여 사용자 인터페이스 구성요소를 제어할 수 있다.

  2. 텍스트 음성 변환(TTS: Text-to-Speech) 사용자는 보조기술을 통해 음성으로 전달되는 텍스트와 시각적으로 표시되는 텍스트가 일치하기 때문에 해당 사용자 인터페이스 구성요소를 혼란 없이 보다 쉽게 인지ㆍ활용할 수 있다.

6.5.4 (동작기반 작동) 동작기반으로 작동하는 기능은 사용자 인터페이스 구성요소로 조작할 수 있고, 동작기반 기능을 비활성화할 수 있어야 한다.

사용자가 장치를 움직이거나 사용자의 움직임을 통하여 작동하는 기능(예: 흔들어서 실행 취소, 손동 작을 이용한 사진 촬영 등)은 사용자 인터페이스 구성요소로 조작할 수 있어야 하며, 의도하지 않는 동작으로 기능이 작동하는 것을 예방하기 위해 해당 기능을 비활성화할 수 있어야 한다. 다만, 다음 과 같은 경우에는 예외로 간주한다.

  1. 접근성 지원 인터페이스: 동작이 접근성 지원 인터페이스를 통해 기능을 조작하는 데 사용되는 경우(예: 안구마우스.

  2. 필수적인 경우: 동작이 기능의 실행에 반드시 필요하고, 동작의 실행에 대한 비활성화가 기능 자체를 무효화할 수 있는 경우(예: 만보기.

검사항목 6.5.4을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 장치가 고정되어 있거나 특정 동작을 행할 수 없는 사용자도 기능을 사용할 수 있다.

  2. 정확한 동작을 할 수 없거나, 의도하지 않은 동작으로 기능이 실행되는 것을 방지할 수 있다.

7. 이해의 용이성

이해의 용이성은 사용자가 장애 유무 등에 관계없이 웹 사이트에서 제공하는 콘텐츠를 이해할 수 있 도록 제공하는 것을 의미한다. 이해의 용이성은 가독성, 예측 가능성, 입력 도움의 3가지 지침으로 구성되어 있다.

표 4 — 이해의 용이성 관련 지침 및 검사항목

지침(3개)

검사항목(7개)

7.1. 가독성 7.1.1. (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
7.2 예측 가능성 7.2.1. (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
7.2.2. (찾기 쉬운 도움 정보) 도움 정보가 제공되는 경우, 각 페이지에서 동일한 상대적인 순서로 접근할 수 있어야 한다.

7.3. 입력 도움 7.3.1. (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.
7.3.2. (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.
7.3.3. (접근 가능한 인증) 인증 과정은 인지 기능 테스트에만 의존해서는 안 된다.
7.3.4. (반복 입력 정보) 반복되는 입력 정보는 자동 입력 또는 선택 입력할 수 있어야 한다.

7.1 가독성

7.1.1 (기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.

웹 브라우저는 웹 페이지를 구성하는 텍스트 콘텐츠의 언어 정보를 바탕으로 텍스트 콘텐츠를 화면 에 표시하거나 보조기술로 전달한다. 다국어를 지원하는 화면낭독프로그램을 사용하는 경우, 텍스트 콘텐츠의 언어 정보를 화면낭독프로그램으로 전달하여 정확한 발음으로 읽어주도록 제어하기도 한다. 따라서 웹 페이지의 기본 언어는 정확히 정의해야 한다.

  1. 웹 페이지의 언어 명시: 웹 페이지에서 제공하는 콘텐츠에 적용되는 기본 언어를 반드시 정의해야 한다.

검사항목 7.1.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 화면낭독프로그램과 점역 프로그램과 같은 보조기술은 웹 페이지의 기본 언어를 인식하여 자동적으로 음성 모듈을 선택하거나 해당 언어에 적합한 점역 방법을 선택할 수 있는 편리함이 있다.

7.2 예측 가능성

7.2.1 (사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.

콘트롤이나 사용자 입력은 초점을 받았을 때 의도하지 않는 기능이 자동적으로 실행되지 않도록 콘 텐츠를 개발해야 한다. 즉, 콘트롤이나 사용자 입력 기능은 사용자의 마우스 클릭이나 키보드 조작에 의하여 실행되어야 한다. 특히 새 창, 팝업창 등은 사용자가 인지하지 못한 상황에서 열리지 않아야 한다.

  1. 초점에 의한 맥락 변화: 웹 콘텐츠를 구성하는 콘트롤이 초점을 받았을 경우, 사용자가 의도하지 않은 기능이 실행되지 않아야 한다. 단, 기능의 실행이 아니라 초점을 받은 요소의 색깔이 반전되거나 테두리가 생기는 것과 같은 시각적인 변화, 또는 사용자 제어가 이동하지 않은 상태에서 나타나는 추가 정보 등은 초점에 의한 맥락 변화를 일으키는 기능의 실행으로 간주하지 않는다. 다음은 종종 발생하는 대표적인 오류들이다.

    1. 온라인 서식이 자동적으로 제출됨
    2. 새 창이 열림
    3. 드롭다운 메뉴가 열림만으로 특정 메뉴 항목이 실행됨
    4. 풀다운 메뉴를 사용하는 콘텐츠에서 초점을 받는 것만으로 특정 메뉴의 기능이 실행됨
    5. 사용자 제어(초점)가 다른 콘트롤로 이동하거나 사라지거나 또는 그 위치를 예측할 수 없음
  2. 입력에 따른 변화: 사용자가 선택할 수 있는 콘트롤(예: 콤보 박스, 라디오버튼, 체크 박스 등)에서 어떤 항목을 선택하는 경우, 해당 항목이 의미하는 기능이 실행되거나 서식 제출이 일어나지 않아야 한다. 실제로 해당 기능이 실행되거나 서식 제출이 일어나는 것은 사용자가 선택할 수 있는 콘트롤과 함께 제공되는 실행 버튼을 활성화(클릭)하였을 때 비로소 실행되어야 한다. 단, 기능의 실행이 아니라 초점을 받은 사용자 입력 또는 콘트롤의 색깔이 반전되거나 테두리가 생기는 것과 같은 시각적인 변화, 또는 사용자 제어(초점)가 이동하지 않은 상태에서 나타나는 추가 정보 등은 입력 변화에 따른 기능의 실행으로 간주하지 않는다.

  3. 새 창/팝업창: 사용자가 예측할 수 없는 상황에서 새 창을 열어 정보를 전달해서는 안 된다.

  4. 레이어 팝업: 레이어 팝업은 콘텐츠의 논리적 초점 이동 및 콘텐츠의 선형구조를 위반할 가능성이 많으므로 사용하지 않는 것이 바람직하다.

  5. 새 창/팝업창/레이어 팝업의 닫음: 새 창/팝업창/레이어 팝업에 초점이 있을 경우, 새 창/팝업창/레이어 팝업을 닫거나 종료 버튼을 클릭하였을 때, 해당 창 또는 팝업 등이 종료되어야 한다. 사용자가 화면에 나타난 새 창/팝업창/레이어 팝업을 닫거나 종료하도록 요구하였음에도 불구하고 해당 창 또는 팝업 등이 종료되지 않으면 사용자는 매우 당황하게 된다. 특히 레이어 팝업의 경우 이러한 혼란이 가중될 수 있다.

검사항목 7.2.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 시각장애, 지적장애 또는 지체장애가 있는 사람도 초점 및 문맥의 변화를 이해할 수 있게 된다.

  2. 사용자에게 미리 새 창 열림을 경고하면 뒤로 가기 버튼이 더 이상 예상처럼 동작하지 않는다는 사실을 알 수 있으므로 이용하는 데 따른 혼란이 줄어든다.

7.2.2 (찾기 쉬운 도움 정보) 도움 정보가 제공되는 경우, 각 페이지에서 동일한 상대적인 순서로 접근할 수 있어야 한다.

단일 페이지 웹 애플리케이션 또는 웹 페이지 세트에서 다음 도움 정보 중 하나 이상의 도움 정보가 제공되면, 최소한 하나의 도움 정보는 해당 페이지에서 동일한 상대적인 순서대로 제공되어야 한다.

  1. 담당자 상세 연락처: 전화번호, 이메일, 운영시간 등
  2. 담당자 연락 방법: 메신저, 채팅창, 게시판, SNS 등
  3. 도움말 옵션: FAQ, 사용법 등
  4. 자동화된 연결방법: 챗봇 등

도움 정보가 특정 페이지에서만 접근할 수 있는 등 각 페이지에서 상대적으로 동일한 위치에 제공되 지 않으면, 도움 정보의 위치를 찾기 어려운 사용자는 해당 도움 정보에 접근하기 어렵다.

검사항목 7.2.2을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 도움 정보가 상대적으로 동일한 위치에 제공되지 않으면, 사용자는 원하는 도움 정보를 찾는 데 어려움을 겪을 수 있다. 그러나 도움 정보가 동일한 상대적인 순서대로 제공되면, 사용자는 해당 도움 정보에 보다 쉽게 접근할 수 있다.

7.3 입력 도움

7.3.1 (오류 정정) 입력 오류를 정정할 수 있는 방법을 제공해야 한다.

입력서식 작성 시, 사용자의 실수로 오류가 발생할 경우, 이를 정정할 수 있는 방법을 제공해야 한다.

  1. 사용자 입력 오류 안내: 온라인 서식에서 오류가 발생하는 경우, 사용자에게 오류가 발생한 위치와 오류를 유발하게 된 이유 등에 관한 정보를 알려 주어야 한다. 예를 들어, 이름, 주소, 전화번호, 이메일 주소를 입력하도록 구성한 입력 서식에서 일부 항목을 기입하지 않고 제출하였을 경우, 어떤 항목의 입력이 누락되었는지를 알려 주어야 한다. 시스템 또는 플랫폼에서 발생한 오류에는 본 검사항목이 적용되지 않는다.

검사항목 7.3.2을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 입력 오류를 수정할 수 있는 방법에 대한 정보를 텍스트로 자세하게 제공하는 것은 학습장애가 있는 사용자가 입력 서식을 성공적으로 작성할 수 있도록 도와준다. 오류가 있는 곳에만 오류 표시를 하면 시각장애인이나 저시력장애인은 오류가 난 곳에 도달하기 전까지는 어떤 오류가 발생했는지 알기 어렵지만, 오류의 내용을 먼저 텍스트로 설명해주거나, 프로그램을 통해 오류가 발생한 위치로 초점을 이동시킨 후 오류의 내용을 설명해주면 입력 오류를 더 쉽게 정정할 수 있다.

  2. 실수로 인해 빚어지는 심각한 결과 또는 과실을 피하기 위해 오류 정정에 필요한 정보나 수단을 제공하는 것은 장애인뿐만 아니라 비장애인에게도 도움을 준다.

7.3.2 (레이블 제공) 사용자 입력에는 대응하는 레이블을 제공해야 한다.

사용자 입력은 용도를 이해할 수 있도록 레이블을 제공해야 한다.

  1. 사용자 입력에 대응하는 레이블 제공: 사용자 입력 근처에 사용법을 알려주는 레이블을 보조기술이 알 수 있도록 해당 콘트롤과 대응하여 제공해야 한다. 레이블과 사용자 입력 간의 관계를 보조기술이 인식할 수 있도록 대응시키지 않고 단순히 텍스트로만 제공할 경우, 보조기술은 해당 사용자 입력에 대한 레이블을 인식할 수 없다.

검사항목 7.3.2을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 레이블과 사용자 입력 간의 관계를 보조기술이 인식할 수 있도록 대응시키면 화면낭독프로그램을 사용하는 시각장애인에게 해당 콘트롤이 어떤 용도로 사용되는지를 알려줄 수 있으므로 잘못된 데이터의 입력을 방지할 수 있다.

7.3.3 (접근 가능한 인증) 인증 과정은 인지 기능 테스트에만 의존해서는 안 된다.

사용자 로그인 등과 같은 인증 과정이 인지 기능 테스트(예: 로그인을 위한 비밀번호 입력, 터치스크린 화면의 패턴 인식, 임의의 문자열 기억, 계산 수행, 특정 객체를 포함하고 있는 이미지 찾기 등)에 의존하는 경우, 인지 기능 테스트에 의존하지 않는 인증 방법을 적어도 하나 이상 제공해야 한다.

인지 기능 테스트에 의존하지 않고 인증을 하기 위해서는 브라우저가 아이디/비밀번호를 저장할 수 있도록 마크업된 서식, 공개인증(OAuth: Open Authorization)를 통한 서드 파티, 신체(얼굴, 지문 등)나 물건(휴대폰, USB 등)을 이용한 인증 등을 이용할 수 있다. 다만, 이미 사용자 자신에게 익숙하여 별 도의 인지적인 노력을 필요로 하지 않는 사용자의 이름이나 이메일 주소, 전화번호는 인지 기능 테 스트로 간주하지 않는다.

검사항목 7.3.3을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 기억, 읽기, 숫자계산 등에 어려움이 있는 사용자도 인지 능력에 상관없이 인증 과정을 수행할 수 있다.

성공 기준 7.3.4 (반복 입력 정보) 반복되는 입력 정보는 자동 입력 또는 선택 입력할 수 있어야 한다.

하나의 과정(process) 중 특정 단계(step)에서, 이전 단계에서 사용자가 이미 입력했거나 사용자에게 제공되었던 동일한 정보를 반복 입력해야 하는 경우, 반복되는 입력 정보는 자동으로 채워지거나 사 용자가 해당 정보를 선택 입력할 수 있어야 한다. 예를 들어, 온라인 구매에서 주문자와 수령자 주소 가 동일한 경우, 이전 단계에서 입력한 주문자 주소를 수령자 주소에 재입력 없이 선택하여 채울 수 있다. 다만, 패스워드와 같이 보안 목적 등으로 재입력이 필수적인 경우는 예외로 간주한다.

검사항목 7.3.4을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 기억 또는 인지 기능에 어려움을 겪는 사용자의 특정 정보에 대한 반복적인 입력으로 인한 스트레스와 실수 발생 가능성을 줄일 수 있다.

  2. 움직임에 제약이 있는 사용자(예: 스위치 콘트롤 또는 음성 입력 사용자)의 텍스트 입력 부담을 줄여줄 수 있다.

8. 견고성

견고성은 사용자가 콘텐츠를 이용할 수 있도록 기술에 영향을 받지 않아야 함을 의미한다. 견고성은 문법 준수, 웹 애플리케이션 접근성의 2가지 지침으로 구성되어 있다.

>표 5 — 견고성 관련 지침 및 검사항목
지침(2개) 검사항목(2개)
8.1. 문법 준수 8.1.1. (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
8.2. 웹 애플리케이션 접근성 8.2.1. (웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션 은 접근성이 있어야 한다.

8.1 문법 준수

8.1.1 (마크업 오류 방지) 마크업 언어의 요소는 열고 닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.

마크업 언어로 작성된 콘텐츠는 해당 마크업 언어의 문법을 최대한 준수하여 제공하는 것이 바람직 하다. 특히 요소의 열고 닫음, 중첩 관계의 오류가 없도록 제공해야 한다. 또한 요소의 속성도 마크 업 문법을 최대한 준수하여 제공하는 것이 바람직하다.

  1. 요소의 열고 닫음 일치: 마크업 언어로 작성된 콘텐츠는 표준에서 특별히 정한 경우를 제외하고 시작 요소와 끝나는 요소가 정의되어야 한다.

  2. 요소의 중첩 방지: 시작 요소와 끝나는 요소의 나열 순서는 포함 관계가 어긋나지 않아야 한다.

  3. 중복된 속성 사용 금지: 하나의 요소 안에서 속성을 중복하여 선언하지 않아야 한다.

  4. id 속성값 중복 선언 금지: 하나의 마크업 문서에서는 같은 id값을 중복하여 선언하지 않아야 한다.

검사항목 8.1.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 시작 요소와 끝나는 요소가 잘 대응되고 요소 간의 포함 관계가 어긋나지 않도록 웹 페이지의 마크업 문서를 구성하면, 웹 브라우저나 보조기술이 작동을 멈추지 않고 콘텐츠를 명확히 전달할 수 있다.

  2. 콘텐츠에 필요한 속성의 누락이나 중복된 경우를 없애 콘텐츠의 일부 기능이 누락되는 것을 방지할 수 있다.

8.2 웹 애플리케이션 접근성

8.2.1 (웹 애플리케이션 접근성 준수) 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야 한다.

웹 콘텐츠를 사용하는 데 필요한 플러그인 또는 웹 페이지의 기능을 실행하는 데 필요한 웹 애플리 케이션은 사용자가 웹 페이지에 접근하여 사용하는 것을 방해하지 않아야 한다. 웹 애플리케이션은 다음에 설명한 모든 요구사항을 적용하여 제작해야 한다.

  1. 접근성 프로그래밍 인터페이스 사용 지원: 웹 애플리케이션은 운영체제 또는 플랫폼이 제공하는 접근성 프로그래밍 인터페이스를 사용하여 제작해야 한다. 그렇지 않으면 보조기술이 웹 애플리케이션의 접근성 기능을 지원하지 못하는 경우가 발생할 수 있다.

  2. 접근성 프로그래밍 인터페이스 대체수단 제공: 웹 애플리케이션을 구현하는 과정에서 운영체제(플랫폼 포함)가 제공하는 접근성 프로그래밍 인터페이스가 정의되지 않은 새로운 기능을 구현할 경우, 그 기능의 명칭, 역할, 상태 및 값에 관한 정보를 운영체제(또는 플랫폼)의 접근성 프로그래밍 인터페이스로 전달하도록 구현함으로써 보조기술이 그 정보를 이용할 수 있게 해야 한다.

  3. 보조기술 지원: 국내의 보조기술로 접근이 불가능한 웹 애플리케이션은 가능한 한 사용하지 않는 것이 좋으며, 반드시 사용해야 하는 경우, 해당 웹 애플리케이션에 대한 대체수단을 제공해야 한다.

검사항목 8.2.1을 준수함으로써 얻을 수 있는 기대효과는 다음과 같다.

  1. 웹 애플리케이션이 접근성을 제공할 경우 보조기술이 웹 애플리케이션과 상호작용 가능하므로, 보조기술 사용자가 웹 애플리케이션을 활용할 수 있다.

  2. 웹 애플리케이션에 적용하려는 기능이 플랫폼 접근성 프로그래밍 인터페이스를 지원하지 못하더라도 필수적인 접근성 정보를 플랫폼 접근성 프로그래밍 인터페이스를 통하여 보조기술로 제공할 수 있게 되므로 새롭고 접근성이 있는 기술 개발이 가능하다.

3. 용어와 정의

1. 용어 정의

이 표준의 목적을 위하여 다음의 용어와 정의를 적용한다.

3.1.1 건너뛰기 링크(skip navigation)

반복 영역의 순차적인 내비게이션을 생략하고 웹 페이지의 핵심 영역으로 이동할 수 있는 수단(버튼, 텍스트 링크를 의미한다.)

3.1.2 고대비 모드(high contrast)

전경과 배경 간의 명도 대비를 강조하여 표시하는 것으로 해당 항목을 보다 뚜렷하게 식별할 수 있도록 도와준다. 또한 검정색 배경에 하얀색으로 텍스트를 표시하는 경우와 같이 명도 대비 또는 색상 대비가 큰 차이가 나도록 조정하여 화면에 표시하는 방식을 경조(硬調) 모드라고 하며, 최신 운영 체제에서는 기본적으로 이 기능을 지원하고 있다.

3.1.3 공백 문자(blank text)

아무런 정보도 가지고 있지 않은 문자열을 의미한다. HTML(Hyper Text Markup Language) 등의 문법 에서 공백 문자는 “”을 나타낸다. 공백 문자를 화면낭독프로그램(screen reader)을 사용하여 읽으면 아무런 소리도 나지 않는다.

3.1.4 광과민성 증후(photosensitive epilepsy)

빛의 깜빡거림에 의해 발작을 일으키는 증상을 말한다. 주로 초당 3회~50회 주기의 번쩍거림이 광과민성 발작을 일으키는 원인이 되며, 초당 20회 부근의 번쩍거림이 발작을 가장 잘 일으키는 주파수로 알려져 있다.

3.1.5 네임(name)

사용자가 소프트웨어를 통해 웹 콘텐츠 내의 구성요소를 식별할 수 있도록 제공된 텍스트를 의미한 다. 레이블(label)은 노출되어 있어 모든 사용자가 볼 수 있는 반면, 네임은 숨겨져 있을 수 있으며 보조기술에 의해서만 노출된다. 대부분의 경우, 레이블과 네임은 동일하다. 네임은 HTML의 name 속 성과는 관련이 없다.

3.1.6 다운 이벤트(down-event)

포인터가 눌려질 때 발생하는 플랫폼 이벤트. 다운 이벤트는 플랫폼에 따라 "터치스타트(touchstart)" 또는 "마우스다운(mousedown)"과 같은 다른 이름을 가질 수 있다.

3.1.7 대체수단(alternatives)

멀티미디어 콘텐츠에 포함된 음성(대화)을 대체하기 위한 콘텐츠. 자막, 구술된 내용을 글로 옮긴 대본(transcript), 수어(sign language) 등이 그것이다. 여기에서 자막과 대본은 텍스트 콘텐츠이며, 수어 는 미디어 형식의 대체 콘텐츠이다.

3.1.8 대체 콘텐츠(alternative content)

텍스트 콘텐츠를 오디오, 비디오 또는 오디오-비디오 형식으로 변환하여 제공하는 미디어 콘텐츠. 예를 들어, 어떤 텍스트를 수어로 번역하여 제공하는 비디오 파일은 대체 콘텐츠라고 할 수 있다.

3.1.9 대체 텍스트(alternative text)

텍스트 아닌 콘텐츠를 대신하기 위해 제공되는 등가의 텍스트. 동영상의 경우, 5.2절 멀티미디어 대체 수단에서 제시하는 대체수단을 제공해야 한다.

3.1.10 동일한 상대적인 순서(same relative order)

다른 항목 대비 상대적으로 동일한 순서(또는 위치)로서, 순서가 있는 항목들 내에 다른 항목이 추가 또는 제거되더라도 원래 항목들이 동일한 상대적인 순서대로(또는 위치에) 제시되는 경우를 말함. 예를 들어, 확장형 내비게이션 메뉴(expanding navigation menus)에 상세수준의(detailed level) 내비게이 션 메뉴를 추가 또는 제거하거나, 읽기 순서에서 하위단계 메뉴 섹션(section)을 추가 또는 제거하더 라도 원래 항목들은 동일한 상대적 순서(또는 위치)를 유지해야 한다.

3.1.11 드롭다운 메뉴(drop-down menu)

여러 개의 항목을 포함하고 있는 목록에서 하나의 항목만 보이다가 사용자가 메뉴 확장 버튼을 활성화시키면 나머지 목록의 전부 또는 일부가 아래로 펼쳐져 나타나는 방식의 사용자 입력 콘트롤. 콤보상자(combo box)라고도 한다.

3.1.12 레이블(label)

사용자가 웹 콘텐츠 내의 구성요소를 식별할 수 있도록 제시된 텍스트나 텍스트 대체수단이 있는 구 성요소. 네임(name)은 숨겨져 있을 수 있으며 보조기술에 의해서만 노출되는 반면, 레이블은 노출되 어 있어 모든 사용자가 볼 수 있다. 대부분의 경우, 네임과 레이블은 동일하다. 레이블은 HTML의 label 요소에 한정되지 않는다. HTML의 label 요소는 모든 사용자 입력(예: 텍스트 입력 상자, 라디오 버튼, 체크 박스, 드롭다운 메뉴 등)의 용도 또는 역할에 대한 설명을 의미한다.

3.1.13 레이어 팝업 콘텐츠(layer popup content)

팝업창 차단 기능이 있는 브라우저에서 시각적으로 팝업창과 같은 효과를 내도록 구현한 콘텐츠. 레 이어 팝업 콘텐츠는 같은 페이지의 일부 영역을 가리고 그 위에 표시되므로, 그 뒤의 콘텐츠를 보기 위해서는 반드시 레이어 팝업을 화면에서 사라지도록 해야 한다. 레이어 팝업은 웹 페이지에 포함되는 콘텐츠이므로, 6.1.2절(초점 이동과 표시)과 5.3.2절(콘텐츠의 선형구조)을 위반하지 않도록 구현해야 한다.

3.1.14 마우스 오버(mouse-over)

웹 페이지 안의 어떤 요소에 마우스 포인터를 올려놓았지만 마우스 버튼을 누르지 않은 상태를 말함. 따라서 마우스 오버는 해당 요소를 선택만 하고 활성화하지 않은 상태를 의미한다.

3.1.15 마우스 클릭(mouse click)

마우스 포인터를 특정 객체나 요소를 가리킨 다음에 마우스의 버튼을 누르는 행위. 마우스 클릭 이벤트가 발생하면 보통은 해당 객체가 활성화되어 어떤 동작이나 기능을 실행하며, 종종 맥락의 변화가 일어난다.

3.1.16 마크업 언어(markup language)

텍스트의 각 부분에 의미를 나타내는 정보를 기술할 수 있도록 정의한 언어. HTML, 확장 마크업 언 어(XML: eXtensible Markup Language) 등이 이에 해당한다.

3.1.17 멀티미디어(multimedia)

시간의 변화에 따른 정보를 제공하기 위하여 오디오 또는 비디오 콘텐츠를 또 다른 포맷과 동기화하 여 제공하도록 만들어진 콘텐츠 또는 콘텐츠 재생 과정의 특정 시점에서 사용자와의 상호작용이 필요한 매체

3.1.18 명도 대비(contrast)

색의 밝고 어두운 정도.

3.1.19 반복 영역(repetitive block)

반복되는 영역, 메뉴, 링크 모음과 같이 동일한 내용이 여러 웹 페이지에 걸쳐 같은 위치에서 나타나 는 영역. 글로벌 내비게이션(global navigation)도 반복 영역의 하나이다. 모든 페이지에 걸쳐 존재하는 광고 영역 등도 그 내용의 다름 여부와 관계없이 반복 영역으로 간주된다.

3.1.20 배경 이미지(background image)

콘텐츠의 배경을 장식하기 위하여 사용되는 이미지. 배경 이미지는 제거하더라도 콘텐츠의 이해와 사용에 아무런 영향을 주지 않아야 한다. 배경 이미지를 제거하였을 때 콘텐츠를 이해하기가 불가능 하거나 사용이 어려운 경우, 콘텐츠는 배경 이미지가 의미하는 정보를 보조기술로 전달하도록 구현해야 한다.

3.1.21 배치용 테이블(layout table)

제목 행과 제목 열이 있는 데이터용 테이블(data table)과는 달리, 콘텐츠 블록을 원하는 크기와 형태로 배치하기 위하여 사용한 테이블. 배치용 테이블은 제목 행, 제목 열 및 표 제목이 없다.

3.1.22 보조기술(assistive technology)

장애를 지닌 사용자의 요구조건을 만족시키는 기능을 추가하여 제공하는 하드웨어 또는 소프트웨어. 대표적으로, 화면낭독프로그램(screen reader), 화면확대프로그램, 특수 키보드 등을 들 수 있다. 보조 기술은 보조공학(기기) 또는 보조기기라고도 한다.

3.1.23 새 창, 팝업창(new window, popup window)

새로운 페이지를 보여주기 위해 현재의 창이 아닌 별도의 창 또는 탭으로 열리는 경우, 이를 새 창 이라고 함. 팝업창은 웹 페이지가 로드될 때 자동으로 열리는 새 창을 의미한다. 단, 스크립트 언어의 고유한 기능이나 플랫폼에 의해 생성되는 경고(alert), 확인(confirm), 입력 프롬프트(prompt) 등의 메시지 대화상자(dialog box)는 새 창이나 팝업창의 범주에 포함되지 않는다.

3.1.24 스타일 시트(style sheet)

문서의 표현 형태를 규정하는 일련의 명령문. 스타일 시트는 콘텐츠 제공자가 마련한 것, 사용자가 마련한 것, 웹 브라우저에 내장된 형태 등의 세 가지가 있다. 예를 들어, W3C의 종속형 시트(CSS: Cascading Style Sheets) 레벨 2, 3 등이 스타일 시트의 대표적인 표준 규격이다.

3.1.25 사용자 인터페이스 구성요소(user interface component)

사용자가 고유한 기능의 단일 콘트롤로 인식하는 콘텐츠. 대표적인 사용자 인터페이스 구성요소로는 입력 콘트롤(체크 박스, 라디오 버튼, 드롭다운 리스트, 리스트 박스, 버튼, 토글, 텍스트 필드, 날짜 필드 등)을 들 수 있다.

3.1.26 시간제한이 있는 콘텐츠(time-limited content)

시간을 통제할 수 있도록 구현된 콘텐츠. 시간제한이 있는 콘텐츠의 예는 다음과 같다.

  • 자동 갱신되도록 구성된 콘텐츠
  • 몇 초 후에 다른 페이지로 이동하도록 구성된 콘텐츠
  • 자동적으로 스크롤되는 콘텐츠
  • 짧은 기간 동안 나타났다 일정 시간 후에 자동적으로 사라지는 대화상자(dialog box), 팝업창, 레 이어 팝업 등
  • 일정 시간 동안 사용하지 않으면 웹 페이지에 대한 접근이 강제로 차단되거나 사용할 수 없게 되는 콘텐츠
3.1.27 업 이벤트(up-event)

포인터가 눌려 있다 떼어질 때 발생하는 플랫폼 이벤트. 업 이벤트는 플랫폼에 따라 "터치엔드 (touchend)" 또는 "마우스업(mouseup)"과 같은 다른 이름을 가질 수 있다.

3.1.28 온라인 서식(online form)

사용자의 입력을 통해 값을 수정하여 전달할 수 있는 여러 가지 콘트롤(예: 텍스트 입력 박스, 드롭 다운 선택 메뉴, 라디오 버튼, 누르는 버튼 등)과 그것의 레이블로 구성된 콘텐츠.

3.1.29 웹 애플리케이션(web application)

웹 콘텐츠에 포함되어 특정한 기능을 수행하도록 구성된 소프트웨어의 일종. 리치 인터넷 애플리케 이션(RIA: Rich Internet Application)이라고도 한다.

3.1.30 위치 지정 도구(pointing device)

마우스나 터치패드, 터치스크린과 같이, 컴퓨터 화면의 특정 지점을 직접 지정할 수 있는 장치. 터치 스크린을 채용한 기기에서는 끝이 뭉툭한 손가락으로도 콘트롤을 선택하거나 활성화시킬 수 있어야 하므로, 콘트롤은 조작이 가능한 크기로 제공되어야 한다.

3.1.31 음성 입력장치(voice input device)

음성으로 컴퓨터를 제어하거나 텍스트를 입력할 수 있도록 구성된 시스템 또는 이러한 시스템을 구성하는 데 사용되는 프로그램.

3.1.32 자막(captions)

영상 매체에 포함된 말, 음향 및 주변 소리 등을 텍스트로 표현한 매체. 자막은 영상 매체의 진행에 따라 해당 이벤트와 동기화되어야 한다. 자막은 크게 폐쇄자막(closed caption)과 개방 자막(open caption)으로 구분된다. 폐쇄자막은 사용자의 필요에 따라 자막을 끄거나 켤 수 있는 데 반해, 개방자 막은 캡션 정보가 비디오 콘텐츠에 함께 녹화되어 있어 사용자가 임의로 자막을 끄거나 켤 수 없다.

3.1.33 장식을 위한 글자(text for decoration)

정보 제공이나 콘텐츠 이용에 필요한 기능과는 무관하게 웹 페이지의 시각적인 표현만을 위해 사용 된 콘텐츠의 글자. 로고 등이 이에 해당된다.

3.1.34 적절한 제목(appropriate title)

콘텐츠의 내용을 쉽게 파악할 수 있도록 해당 주제나 목적을 간단명료하게 표현한 명.

3.1.35 접근성 프로그래밍 인터페이스(accessibility programming interface)

운영체제 또는 플랫폼은 응용 프로그램과 보조기술 간의 정보 전달 방법에 관한 프로그램 인터페이 스(programming interface)를 제공함. 예를 들어, Windows 환경의 MSAA, UI Automation, IAccessible2, MacOSX 환경의 AXAPI, Gnome 환경의 Gnome Accessibility Toolkit API, Java 플랫폼의 Java Access API 등이 그것이다. 웹 애플리케이션을 접근성 프로그래밍 인터페이스를 이용하여 구현하면 보조기 술과 호환성이 유지된다.

3.1.36 초점(focus)

웹 페이지 안에서 프로그램에 의해 또는 사용자의 행위(예: 탭(tab) 키를 이용한 이동)에 의해 어떤 요소(element)가 선택되었을 경우 초점이 그 요소에 있다고 말함. 또한 어떤 요소가 선택되었다는 것 은 그 요소가 사용 가능한 상태임을 의미한다. 대부분의 응용 소프트웨어(웹 브라우저 포함)에서 초 점을 받은 요소는 다른 요소와 구분할 수 있게 밑줄을 보이게 하거나, 테두리를 씌우거나 또는 색을 변경하는 등 시각적으로 구별할 수 있는 기능을 제공한다.

3.1.37 콘텐츠 블록(content block)

특정 내용에 관해 설명하거나 기술하고 있는 정보의 묶음 또는 영역. 일반적으로 하나의 주제를 설 명 또는 기술하고 있는 장(chapter)이나 절(section) 등을 들 수 있다.

3.1.38 콘텐츠의 선형구조(linear structure of content)

콘텐츠가 보조기술로 제공되는 순서. 웹 페이지의 모든 콘텐츠는 시각적인 2차원 공간의 상하좌우로 배치되어 있어서 원하는 곳을 바로 찾아가거나 그 기능을 바로 선택하여 실행할 수 있다. 그러나 화면낭독프로그램 사용자는 모든 콘텐츠를 순차적으로 접근할 수 있기 때문에 시각적인 배치가 아닌 읽어주는 순서가 중요하다. 콘텐츠의 선형구조라고 하며, 이 구조는 논리적이어야 한다. 마크업 언어 로 제작된 콘텐츠의 선형구조는 스타일 시트와 테이블 구조들을 제거하면 얻을 수 있다.

3.1.39 키보드(keyboard)

사용자가 텍스트를 입력하기 위하여 사용하는 입력장치. 여기에는 키보드의 자판입력을 해독하기 위 하여 사용되는 소프트웨어도 포함된다. 예를 들어, 키보드의 형태를 갖추지 않았지만 기능적으로 키 보드를 대신하는 입력장치(예: 노트북이나 개인휴대정보단말기(PDA: Personal Digital Assistant) 등의 터치패드, 음성 입력장치 등) 등도 키보드로 간주한다. 위치 지정 도구와 화면 키보드 프로그램을 조합한 가상 키보드 입력장치와 스마트폰이나 태블릿 기기의 키보드 입력 프로그램도 키보드의 일종으로 간주한다.

3.1.40 키보드 단축키(keyboard shortcut)

특정 동작이 일어나게 하는 대체수단. 하나 또는 하나 이상의 키를 누르는 것을 의미한다.

3.1.41 텍스트 아닌 콘텐츠(non-text content)

그림, 이미지 등으로 제작된 텍스트, 애니메이션, 아스키(ASCII) 그림문자, 불릿(bullet) 이미지, 그래픽 버튼, 이모티콘, 릿스피크(leetspeak) 등과 같이 표준 문자(부호) 체계가 아닌 시각적 또는 청각적 정 보가 포함된 콘텐츠. 한글 부호의 경우, 유니코드, 조합형 또는 완성형 부호 체계를 사용하여 작성된 텍스트 이외의 모든 경우를 포함한다.

3.1.42 텍스트 이미지(images of text)

특정한 시각적인 효과를 얻기 위하여 텍스트가 아닌 형태(예: 이미지)로 렌더링된 텍스트.

3.1.43 풀다운 메뉴(pull-down menu)

메뉴바(menu bar)에서 특정 항목을 선택(마우스 오버, 키보드를 이용한 초점)하거나, 활성화(마우스 클릭 또는 엔터키의 누름 등)하면 선택한 메뉴 항목의 아래쪽으로 하위 메뉴 항목들이 펼쳐져 나타나는 방식의 메뉴.

3.1.44 플러그인(plug-in)

어떤 응용 프로그램에 추가되어 특정한 기능을 수행하도록 구현한 프로그램 모듈. 웹 브라우저에서 사용되는 플래시 플레이어(Flash Player), 실버라이트 플레이어(Microsoft Silverlight Player), 검색기 (search engine) 및 자바 플러그인(Java plug-in) 등이 이에 해당한다.

3.1.45 핵심 영역(primary content)

웹 페이지의 핵심이 되는 주제 또는 콘텐츠를 담고 있는 영역. 웹 페이지별로 사용자에게 전달하고 싶은 핵심 주제를 담고 있는 콘텐츠가 위치한 영역을 의미한다. 예를 들어, 뉴스 포털의 경우, 헤드 라인 뉴스가 위치한 곳을 핵심 영역이라고 할 수 있다.

2. 정의

해당 사항 없음.

기여자

심의

정보보호 기술심의회

회장

염흥열 순천향대학교 교수

위원

간사

최영선 국립전파연구원 과장

원안 작성 협력

한국정보통신기술협회

연구책임자

노석준 성신여자대학교 교수

참여연구원

간사

한정기 한국지능정보화사회진흥원 수석연구원

부속서 A

웹 접근성 국제표준(WCAG 2.1) 지표 설명

이 설명은 이 표준의 인용표준을 요약한 것으로 표준의 일부는 아니다.

번호 성공지표(Success Criteria) 레벨 지표 설명
1.1.1 Non-text Content 텍스트 아닌 콘텐츠 A
  • 화면낭독프로그램* 사용자는 이미지(image)와 같은 텍스트 아닌 콘텐츠를 음성으로 들을 수 없다.

- 이미지에 텍스트 설명(대체 텍스트)을 추가하면, 화면낭독프로그램 사용자는 설명을 음성으로 변환하여 들을 수 있다.

예) 찾아오는 길을 이미지로 제공한 경우, 이미지를 대신할 수 있는 텍스트 설명(이미지가 포함한 정보를 충분한 설명)도 함께 제공

* 화면낭독프로그램: 화면의 텍스트를 음성으로 변환해 주는 프로그램

1.2.1 Audio-only and Video-only (Prerecorded) 오디오 전용 및 비디오 전용 (사전 녹음된) A
  • 오디오 및 비디오 전용 콘텐츠는 환경에 따라 내용 전달이 어려울 수 있다.

- 오디오 및 비디오 전용 콘텐츠를 대체할 수 있는 대체 콘텐츠를 제공하면, 환 경에 상관없이 콘텐츠를 사용할 수 있다.

예) 오디오 전용 콘텐츠에 영상, 수어, 자막 등을 추가로 제공

예) 비디오 전용 콘텐츠에 소리, 텍스트 등을 추가로 제공

1.2.2 Captions (Prerecorded)

자막 (사전 녹음된)

A
  • 콘텐츠의 오디오는 환경에 따라 전달이 어려울 수 있다.

- 오디오를 대체할 수 있는 자막을 제공한다.

예) 영화 등의 영상 하단에 동기화된 자막 제공

1.2.3 Audio Description or Media Alternative (Prerecorded) 오디오 해설 또는 미디어 대체수단 (사 전녹음된) A
  • 콘텐츠의 비디오는 환경에 따라 전달이 어려울 수 있다.

- 비디오를 대체할 수 있는 오디오 해설 또는 미디어 대체수단을 제공한다.

예) 뉴스 영상에서 말하고 있는 화자의 정보는 자막으로 제공되는 경우가 많은데, “OOO 방송 OOO 기자입니다.”라는 정보를 비디오 중간에 오디오로 제공

1.2.4 Captions (Live)

자막 (실시간)

AA
  • 실시간 콘텐츠는 자막 제공이 보다 어렵다.

- 실시간 콘텐츠도 자막을 제공한다.

예) 스포츠 생중계와 같은 실시간 영상에 자막을 실시간으로 제공

※ “1.2.2 자막(사전 녹음된)”의 범위를 실시간(live)까지 확장

1.2.5 Audio Description (Prerecorded) 오디오 해설 (사전 녹음된) AA
  • 비디오에 의존된 정보는 환경에 따라 전달이 어려울 수 있다.

    • 비디오 의존 정보에 오디오 해설을 제공한다.

    • 텍스트와 같은 별도의 미디어 대체수단은 영상과 동시 확인이 어려움으로, 동 시 확인이 가능한 오디오 해설이 사용자에게 더 편리할 수 있다.

예) 비디오에서 오디오가 나오지 않는 사이사이에, 오디오 해설 삽입

※ “1.2.3 오디오 해설 또는 미디어 대체수단 (사전 녹음된)”에서 오디오 해설만 가능

1.2.6 Sign Language (Prerecorded)

수어 (사전 녹음된)

AAA
  • 자막은 감정 정보를 전달하기 어렵다.

- 수어 사용자를 위해 자막 대신 수어를 제공한다.

예) 수화자의 동작 크기 및 강도, 표정 등을 통하여 감정 정보 전달

1.2.7 Extended Audio Description (Prerecorded) 확장된 오디오 해설 (사전 녹음된) AAA
  • 비디오에 제공되는 정보가 많으면 충분한 오디오 해설을 제공하기 어렵다.

- 영상을 멈추고 보다 자세한 오디오 해설을 제공한다.

예) 비디오를 통해 다양한 정보가 전달되는 드라마 등의 오디오 해설의 경우, 화면을 중간중간에 멈추고 보다 상세한 오디오 해설 제공

1.2.8 Media Alternative (Prerecorded) 미디어 대체수단 (사전 녹음된) AAA
  • 점자정보단말기는 텍스트 형태의 입력이 필요하다.

- 텍스트 형태의 미디어 대체수단을 제공한다.

예) 영상과 함께 대사 및 화면해설이 포함된 텍스트 다운로드 제공

* 점자정보단말기(braille): 기계적으로 구성된 6개 셀에 문자를 점자 형태로 출력할 수 있도록 고안된 단말기

1.2.9 Audio-only (Live)

오디오 전용 (실시간)

AAA
  • 실시간 오디오 콘텐츠는 대체수단 제공이 더 어렵다.

- 실시간 오디오 콘텐츠에 자막 또는 대본 등을 제공한다.

예) 라디오와 같은 실시간 오디오 콘텐츠에 속기사, 음성인식 소프트웨어 등 을 활용하여 자막 또는 대본 제공

1.3.1 Info and Relationships 정보 및 관계 A
  • 콘텐츠의 구조정보가 시각에만 의존하여 표현된 경우, 화면낭독프로그램 사용 자 등은 구조정보를 인식할 수 없다.

- 구조정보를 컴퓨터가 이해할 수 있는 방식으로 제공한다.

예) 표와 같이, 구조가 있는 콘텐츠에 제목, 요약, 헤더와 같은 구조정보 제공

1.3.2 Meaningful Sequence

의미가 있는 순서

A
  • 화면에 보이는 콘텐츠의 순서와 보조기기(예: 화면낭독프로그램)가 읽어주는 콘텐츠 순서가 다르면 의미가 혼동될 수 있다.

- 화면에 보이는 콘텐츠 내용의 순서와 실제 콘텐츠의 순서를 동일하게 한다. 예) 아래의 경우, 화면에 글을 세로로 적어서 “김밥 라면”이라고 표현한 것인데, 적절

한 마크업을 사용하여 화면낭독프로그램에서도 올바르게 읽히도록 할 수 있음

김 라 밥 면

1.3.3 Sensory Characteristics 감각 특성 A
  • 모양, 크기, 위치, 방향, 소리, 색 등 특정 감각에 의존하여 정보를 제공하면 환경에 따라 해당 정보를 전달할 수 없다.

- 정보를 특정 감각에 의존하여 표현하는 경우, 다른 감각으로도 인식할 수 있 도록 추가정보를 제공한다.

예) 녹화용 버튼이 빨간색인 경우, “빨간색 버튼을 누르시오.”라고 지시하지 말 고, 버튼과 연결된 이름(녹화)을 이용하여 “녹화 버튼을 누르시오”라고 지시

1.3.4 Orientation

방향

AA
  • 콘텐츠의 방향이 가로보기, 세로보기 등 한 방향으로 제한된다면, 다른 방향 으로 콘텐츠를 사용해야 하는 사용자는 콘텐츠를 사용할 수 없다.

- 사용자가 화면 방향을 결정할 수 있도록 해 주면, 특정한 기기나 방향으로 콘 텐츠를 사용해야 하는 사용자도 해당 콘텐츠를 사용할 수 있다.

예) 휠체어에 가로 방향으로 태블릿을 고정하여야 하는 사용자를 위해 콘텐츠 를 세로, 가로 방향에 무관하게 적절하게 재배치할 수 있도록 제공

1.3.5 Identify Input Purpose

입력 용도 식별

AA
  • 사용자는 웹 페이지 내에 정보를 입력하는 작업에 어려움을 겪을 수 있다.

- 자동완성 등 입력 도움이 작동될 수 있도록 정보를 제공한다.

예) 온라인 주문에서 사용자의 기존 주문, 주소 등이 제공되고, 집주소 입력에 친숙한 집모양 아이콘 등 제공

1.3.6 Identify Purpose

용도 식별

AAA
  • 사용자는 친숙하지 않은 화면을 사용하는 데 어려움을 겪을 수 있다.

- 화면을 구성하는 객체의 용도를 컴퓨터가 식별할 수 있도록 하면, 개인 특성 에 맞게 화면을 변경할 수 있다.

예) 화면에 중요 부분만 남겨 두고 나머지 부분을 안 보이게 하거나, 화면의 아이콘을 익숙한 아이콘으로 교체

1.4.1 Use of Color

색상사용

A
  • 색상에만 의존하여 정보를 제공하면 색상을 구별하기 어려운 사용자는 해당 정보 인식에 불편을 겪을 수 있다.

- 색상 이외에 텍스트 등 추가적인 정보를 제공하여 정보를 구분할 수 있게 한다. 예) 필수입력 부분을 붉은색으로만 표시하지 않고 필수라는 표시를 붙여주거

나 필수항목과 선택항목을 분리하는 방법 등으로 명확히 제시

1.4.2 Audio Control

오디오 제어

A
  • 자동재생되는 소리는 화면낭독프로그램 사용자를 방해할 수 있다.

- 소리가 3초 미만으로 제공되거나 정지시키는 기능을 제공해야 한다. 예) ESC 키로 자동재생 소리를 정지시키는 기능 제공

1.4.3 Contrast (Minimum)

명도대비 (최소)

AA
  • 글자색과 배경색의 명도가 비슷하면, 사용자는 글자를 읽는 데 어려움을 겪을 수 있다.

- 글자색과 배경색의 명도대비를 4.5:1 이상으로 제공한다.

예) 흰색 배경에 검은색 글자는 명도대비가 충분(21:1)하며, 흰색 배경에 회색 글자는 명도대비가 충분하지 않을 수 있음

1.4.4 Resize text

텍스트 크기 조정

AA
  • 글자의 크기를 확대할 수 없다면 저시력사용자는 불편을 겪을 수 있다.

- 화면확대프로그램과 같은 보조기기의 도움 없이 그리고 콘텐츠 및 기능의 손 실 없이 두 배 (200%)까지 글자를 확대할 수 있도록 제공한다.

예) 브라우저의 확대 기능을 이용하여 텍스트를 확대했을 때, 텍스트가 가려 지는 현상 없이 확대 가능

※ 자막이나, 텍스트 이미지(이미지로 만든 텍스트)는 해당하지 않음

1.4.5 Images of Text

텍스트 이미지

AA
  • 이미지로 제공된 텍스트는 사용자가 글꼴/색상 등을 변환하여 사용할 수 없다.

- 글자를 이미지가 아닌 텍스트로 제공하면, 사용자는 해당 텍스트를 자신의 요 구에 맞게 다양하게 변환하여 사용할 수 있다.

예) CSS를 활용하여 시각 효과가 적용된 텍스트 제공

※ 텍스트 이미지의 시각 효과를 사용자에게 맞게 다양하게 변경할 수 있거 나, 로고 및 상표와 같이 시각 효과가 필수적인 경우는 예외

1.4.6 Contrast (Enhanced)

명도대비 (향상된)

AAA
  • 글자색과 배경색의 명도가 비슷하면, 사용자는 글자를 읽는 데 어려움을 겪을 수 있다.

글자색과 배경색의 명도대비를 7:1 이상으로 제공한다.

※ “1.4.3 명도대비 (최소)”의 명도대비 기준을 4.5:1에서 7:1로 강화

1.4.7 Low or No Background Audio 낮거나 없는 배경음 AAA
  • 배경음은 전경음인 화면낭독프로그램 소리와 겹쳐져 전경음 청취를 방해할 수 있다.

- 배경음은 사용하지 않거나, 끌 수 있거나, 전경음보다 작게(20db 이상) 제공 한다.

예) ESC키를 눌러서 배경음을 끌 수 있도록 구현

1.4.8 Visual Presentation

시각적 표현

AAA
  • 사용자는 본인에게 맞지 않는 시각적 표현이 사용된 글을 읽기 어렵다.

    • 시각적 표현을 다음과 같이 조정할 수 있도록 한다.

      • 전경색/배경색 선택 가능

      • 한 줄 80자(한글 40자) 이하 작성

      • 정렬 없음, 충분한 줄(1.5배)/단락(줄의 1.5배) 간격 제공

      • 가로스크롤 발생 없이 글자를 2배까지 확대 가능

예) 글자색, 줄 간격 등 시각적 표현을 변경할 수 있는 기능 제공

1.4.9 Images of Text (No Exception) 텍스트 이미지 (예외 없음) AAA
  • 이미지로 제공된 텍스트는 사용자가 글꼴/색상 등을 변환하여 사용할 수 없다.

- 글자는 장식적인 목적이거나, 필수적인 경우(로고 등)를 제외하고 이미지 형 태가 아닌 텍스트로 제공한다.

예) CSS를 활용하여 시각 효과가 적용된 텍스트 제공

※ “1.4.5 텍스트 이미지”는 시각 효과를 사용자에게 맞게 변경할 수 있는 텍 스트 이미지를 예외로 인정하지만, 1.4.9는 인정하지 않음

1.4.10 Reflow

리플로우

AA
  • 콘텐츠를 확대할 때, 동시에 가로와 세로 스크롤이 생기면 사용자가 콘텐츠를 사용하기 불편하다.

- 확대 시(400%까지), 가로 또는 세로 스크롤만 생기도록 한다.

예) 반응형 웹(Responsive Web) 기술을 사용하여 가로 또는 세로 스크롤만 생기도록 콘텐츠 제작

※ 반응형 웹: 다양한 화면크기에 알맞게 콘텐츠를 배치하는 기법

1.4.11 Non-text Contrast 텍스트가 아닌 콘텐 츠의 명도대비 AA
  • 텍스트가 아닌 콘텐츠도 명도대비가 충분하지 않다면 구분하기 어렵다.

- 텍스트가 아닌 콘텐츠도 명도대비를 3:1 이상으로 제공한다.

예) 링크, 버튼, 입력ㆍ체크 박스와 같은 사용자 인터페이스나 내용 이해에 필 요한 그래픽 콘텐츠에 3:1 이상의 명도대비 제공

※ 사용할 수 없음을 알리기 위해 낮은 명도로 제공된 사용자 인터페이스는 예외임

1.4.12 Text Spacing

글자 간격

AA
  • 사용자가 글자 서식을 자신에게 맞게 변경하였을 때, 글자가 가리거나 겹치거 나 잘려서 콘텐츠를 인식할 수 없게 될 수 있다

- 글자 서식을 일정수준(줄 간격을 글자 1.5배, 문단 간격을 글자 2배, 글자 간 격을 글자 0.12배, 단어 간격을 글자 0.16배)까지 변경해도 콘텐츠의 내용과 기능을 유지할 수 있도록 제공한다.

예) 화면을 확대했을 때, 글자가 알아보기 가리거나 겹치거나 잘리지 않도록 제공

1.4.13 Content on Hover or Focus

호버 또는 초점을 받 은 콘텐츠

AA
  • 마우스 포인터를 위에 올리는 호버(Hover) 또는 초점으로 나타나거나 사라지 는 콘텐츠는 정밀한 동작이 어려운 사용자가 사용하기 곤란할 수 있다.

- 마우스 호버 또는 초점에 의해 나타난 콘텐츠는 닫을 수 있고, 마우스를 올려 서 사용할 수 있고, 호버나 초점을 유지하는 동안 사라지지 않아야 한다.

예) 마우스 호버로 나타난 콘텐츠를 ESC키 등을 이용하여 닫을 수 있게 구현

2.1.1 Keyboard

키보드

A
  • 마우스를 사용하기 어려운 사용자가 있다.

- 링크, 버튼 등 콘텐츠의 모든 기능이 키보드만으로도 사용가능하도록 한다. 예) 드래그 앤 드롭(drag and drop)을 대체할 수 있는 키보드 기능 제공

※ 그리기와 같은 경로기반 동작이 필수적인 경우는 키보드 사용 보장 예외임

2.1.2 No Keyboard Trap

키보드 트랩 방지

A
  • 키보드 운용이 불가능한 함정(Trap)이 있다면, 키보드 사용자는 콘텐츠를 사 용할 수 없게 된다.

- 키보드가 특정 부분에서 함정(Trap)에 빠지지 않도록 하고, 특별한 키 사용이 필요한 콘텐츠인 경우 그 사용법을 미리 알려준다.

예) 글쓰기 편집창 안에 들어온 초점을 편집창 밖으로 보내기 위한 단축키를 제공하고 관련 정보를 인지할 수 있도록 명시

2.1.3 Keyboard (No Exception)

키보드 (예외 없음)

AAA
  • 마우스를 사용하기 어려운 사용자가 있다.

- “2.1.1 키보드”를 강화한 지표로, 그리기와 같은 경로기반 동작도 예외로 하지 않고 모두 키보드 사용을 보장하도록 한다.

예) 경로기반 동작을 대체할 수 있는 기능 제공

2.1.4 Character Key Shortcuts 문자 단축키 A
  • 음성명령 사용자는 의도하지 않게 단일문자 단축키를 오동작시킬 수 있다.

- 문자 단축키를 비활성화하거나, 재지정하거나, 초점을 받은 경우에만 활성화 되게 하는 기능을 제공하여 오동작을 피할 수 있게 한다.

예) 단일문자 단축키를 제공하는 경우, 출력 불가능한 키(Alt, Ctrl, Shift 등)와 조합할 수 있게 재지정 기능 제공

2.2.1 Timing Adjustable

시간 조절 기능

A
  • 사용 시간에 제한이 있는 콘텐츠는 주어진 시간이 충분하지 않을 수 있다.

- 시간제한을 중지하거나, 조정하거나, 연장할 수 있는 기능을 제공한다.

예) 일정 시간 사용하지 않으면 로그아웃되는 콘텐츠의 경우, 시간 연장 여부 를 사용자에게 미리 질의

※ 경매와 같은 실시간 콘텐츠, 티켓 구매와 같은 시간제한이 필수적인 콘텐 츠, 시간제한이 20시간 이상인 경우는 예외

2.2.2 Pause, Stop, Hide 일시정지, 정지, 숨기 기 A
  • 움직이거나 깜빡이거나 자동 갱신되는 부분이 있는 콘텐츠는 사용자의 콘텐 츠 사용을 어렵게 할 수 있다.

- 시간에 따라 변경되는 부분에 대한 일시정지, 정지 또는 숨김 기능을 제공한다.

예) 계속적으로 스크롤되는 배너에 정지 기능 제공

※ 일정 시간(5초) 내에 움직임이 멈추는 콘텐츠는 해당되지 않음

2.2.3 No Timing

타이밍 제한 없음

AAA
  • 시간제한이 있는 콘텐츠는 주어진 시간이 충분하지 않을 수 있다.

- 필수적이지 않은 경우, 콘텐츠의 사용 시간제한이 없도록 한다.

예) 시험을 시간제한 없이 볼 수 있게 하거나, 게임을 1번씩 번갈아 가며 수

행하는 방식으로 개발

※ 경매와 같이 시간제한이 필수적인 경우는 예외

2.2.4 Interruptions

인터럽트

AAA
  • 콘텐츠가 의도하지 않게 갱신되거나 알람이 나타나는 등 인터럽트가 발생하 면 사용자가 현재 초점을 잃어버리는 등 사용에 어려움을 겪을 수 있다.

- 긴급상황이 아닌 경우, 사용자가 인터럽트(interruptions)를 지연시키거나 통제 할 수 있어야 한다.

예) 갱신이나 알림 등을 현재 작업이 끝난 이후 받거나, 받지 않도록 설정 가 능하게 기능 제공

2.2.5 Re-authenticating

재인증

AAA
  • 로그인 상태의 인증 세션 만료로 인하여 현재 작업 중인 내용을 잃어버린다 면, 사용자는 다시 처음부터 입력하게 되어 불편하다.

- 인증 세션 만료가 발생한 경우라도 재인증을 통하여 아무런 정보 손실 없이 기존 작업을 계속할 수 있도록 기능을 제공한다.

예) 글쓰기 중간에 인증 세션 만료로 로그아웃이 발생한 경우, 다시 로그인했 을 때 기존 작성 중인 글이 남아 있도록 기능 제공

2.2.6 Timeouts

타임아웃

AAA
  • 타임아웃이 사전통보 없이 발생한다면, 콘텐츠 사용에 어려움을 겪을 수 있다.

  • 타임아웃 기간이 충분히 긴 경우(20시간)가 아닌 경우, 타임아웃 기간을 사전 에 알려주도록 한다.

예) 로그아웃이 20시간 이상 발생하지 않도록 설정된 콘텐츠

2.3.1 Three Flashes or Below Threshold 3회 또는 임계값 미 만 번쩍임 A
  • 과도하게 번쩍이는 콘텐츠는 광과민성 발작 증상을 지닌 사용자의 발작 증상 을 유발할 수 있다.

- 초당 3회 이상 번쩍이는 콘텐츠를 제공하지 않는다.

예) 화면 전체를 차지하면서 과도하게 번쩍이는 영상을 사용하지 않음

※ 광과민성 발작: 뇌전증(간질)의 일종으로, 순간적으로 번쩍거리는 빛을 보 고 발작을 일으키는 것. “광과민성 증후군”이라고도 함

※ 번쩍임 정도가 심하지 않거나(초당 3회 미만), 작은 크기(화면 1/9 정도)는 예외

2.3.2 Three Flashes 3회 번쩍임 AAA
  • 과도하게 번쩍이는 콘텐츠는 광과민성 발작 증상을 지닌 사용자의 발작 증상 을 유발할 수 있다.

- “2.3.1 3회 또는 임계값 미만 번쩍임”을 강화한 지표로, 크기에 상관없이 3회 이상 번쩍이는 콘텐츠를 제공하지 않아야 한다.

예) 화면에서 차지하는 크기에 상관없이 번쩍이는 콘텐츠를 사용하지 않음

2.3.3 Animation from Interactions 상호작용 애니메이션 AAA
  • 작업의 수행을 시각적으로 보여주는 상호작용 애니메이션은 전정 장애가 있 는 사용자에게 어지러움, 구토 등을 유발할 수 있다.

- 의미전달 등을 위해 반드시 필요한 경우가 아니라면, 상호작용 애니메이션은 비활성화될 수 있어야 한다.

예) 상호작용 애니메이션 사용여부를 설정할 수 있는 기능 제공

※ 전정 장애: 평행을 담당하는 귀의 전정기관 관련 장애로, 어지럼증이 대표 증상

2.4.1 Bypass Blocks

블록 건너뛰기

A
  • 대메뉴와 같이 페이지 상단에 반복적으로 제공되는 콘텐츠를 건너뛰기 위하 여, 키보드 사용자는 여러 번 키 입력을 해야 하여 불편하다.

- 반복되는 콘텐츠를 건너뛰기 할 수 있도록 우회로(bypass)를 제공한다.

예) 대메뉴를 건너뛰어 본문으로 바로가는 링크를 대메뉴 앞에 제공

2.4.2 Page Titled

페이지 제목 제공

A
  • 페이지 내용과 상관없는 페이지 제목이 제공되면, 사용자는 페이지 내용을 파 악하는 데 어려움을 겪을 수 있다.

- 각 페이지의 내용에 맞는 적절한 페이지 제목을 제공한다.

예) “OOO 홈페이지에 오신 것을 환영합니다.”와 같은 동일 제목을 모든 페이 지에 제공하지 않고, “기관장 인사말”과 같이 페이지 내용을 대표할 수 있 게 제공

2.4.3 Focus Order

초점 순서

A
  • 초점 순서가 콘텐츠의 의미와 맞지 않으면, 키보드 사용자는 콘텐츠를 사용하 는 데 혼란을 겪을 수 있다.

- 초점 순서를 콘텐츠의 의미 및 이용 순서에 맞게 제공한다.

예) 로그인 입력창의 초점 순서가 “ID 입력창 → 확인 버튼 → PASSWORD 입력창” 순인 경우, “ID 입력창 → PASSWORD 입력창 → 확인 버튼” 되 도록 수정

2.4.4 Link Purpose (In Context)

링크 목적 (문맥상)

A
  • 의미가 모호한 링크 텍스트를 제공한다면, 사용자는 링크 선택의 결과를 예상 하기 어려워진다.

- 링크 텍스트 단독으로도 링크의 역할을 충분히 설명할 수 있도록 링크 텍스 트를 제공하거나, 문맥상 의미 파악이 가능하도록 제공한다.

예) 공지사항의 끝에 “공지사항 더보기” 또는 “더보기”(문맥상 “공지사항 더보 기” 라는 것을 알 수 있음)라는 링크 텍스트로 링크 제공

※ 링크 텍스트: 링크가 연결된 텍스트, 하이퍼텍스트라고도 함

2.4.5 Multiple Ways

다양한 방법

AA
  • 콘텐츠의 위치를 찾는 방법이 한 가지만 제공된다면, 사용자는 특정 콘텐츠를 찾기 어려울 수 있다.

- 대메뉴, 검색, 사이트 맵 등 콘텐츠를 찾는 다양한 방법을 제공한다.

예) 키보드 사용자가 탭(tab)키를 이용하여 사이트 대메뉴 중 “조직구성도” 메 뉴로 이동하며, 검색 창에서 “조직구성도” 검색하여 이동할 수 있도록 기 능 제공

2.4.6 Headings and Labels

제목과 레이블

AA
  • 콘텐츠를 이해하는 데 도움이 되는 제목과 레이블이 적절하지 않다면, 사용자 는 콘텐츠를 이해하기 어려울 수 있다.

- 적절한 내용의 제목과 레이블을 제공한다.

예) 뉴스 사이트 기사의 제목은 기사 내용을 충분히 대표할 수 있도록 제공

※ 제목과 레이블의 제공 여부 및 적절한 구현(코딩) 여부는 해당 지침의 평 가 범위가 아님. 제공된 경우, 적절성에 대해서만 평가

※ 적절한 코딩인지 여부는 “1.3.1 정보 및 관계”에서 평가

2.4.7 Focus Visible

보이는 초점

AA
  • 키보드 위치(포커스)가 보이지 않으면, 키보드 사용자는 현재 탐색 위치를 알 수 없어 콘텐츠를 사용하기 어려울 수 있다.

- 포커스를 밑줄, 테두리 등으로 구분할 수 있도록 제공한다.

예) 탭(tab)키를 이용하여 이동할 때, 포커스가 테두리 형태로 항상 보이도록 제공

2.4.8 Location

위치

AAA
  • 페이지 탐색 경로가 복잡하고 여러 단계로 되어 있으면, 사용자가 콘텐츠를 사용하기 어려울 수 있다.

- 웹 사이트 내, 사용자의 현재 위치를 알 수 있도록 위치 정보를 제공한다. 예) 사이트 이동 경로(breadcrumb trail)를 “홈 > 참여마당 > 자유게시판”과 같

은 형태로 제공

2.4.9 Link Purpose (Link Only)

링크 목적 (링크만)

AAA
  • 의미가 모호한 링크 텍스트를 제공한다면, 사용자는 링크를 선택의 결과를 예 상하기 어려워진다.

- "2.4.4 링크 목적 (문맥상)"를 강화한 지표로, 링크 텍스트 단독으로도 링크의 목적이나 역할을 설명할 수 있도록 제공한다.

예) “공지사항 더보기”는 현 지표를 만족하며, 문맥상 공지사항의 더보기임을 알 수 있도록 구현한 “더보기”는 만족하지 않음

2.4.10 Section Headings

절 제목

AAA
  • 콘텐츠가 제목으로 구조화되어 있지 않으면, 사용자 등은 콘텐츠를 사용하기 어려울 수 있다.

- 콘텐츠에 관련성이 있어 구조화할 수 있다면, 묶어서 제목을 제공한다.

예) 메뉴판에 “콜라, 사이다, 커피” 등이 있을 때, 상위 개념인 “음료”를 제목으 로 제공

2.5.1 Pointer Gestures

포인터 제스처

A
  • 두 손가락 이상의 복잡한 누르기나 화면을 계속적으로 눌러야 하는 드래그 등의 동작은 해당 동작을 하기 어려운 사용자가 있을 수 있다.

- 다중 누르기 및 경로기반 동작이 필수사항이 아니라면, 이를 대체할 수 있는 단일 누르기 동작을 제공한다.

예) 두 손가락으로 화면을 확대, 축소하는 핀치(pinch)가 요구되는 경우, 이를 대체하는 버튼 등의 단일 누르기를 함께 제공

2.5.2 Pointer Cancellation

포인터 취소

A
  • 기능이 단일 포인터(원‧더블 클릭, 원‧더블 탭, 길게 누르기, 경로기반 제스처 포함)로만 실행되면, 사용자는 실수로 해당 기능을 실행시키기 쉽다.

    • 실수를 대비하기 위해, 다음 중 1개 이상을 충족하도록 한다.

      • 누르는 동작(Down-Event)에 실행되지 않기

      • 중단(완료 전) 또는 원복(완료 후) 가능토록 하기

      • 떼는 동작(Up-Event)에 누르는 동작(Down-Event)의 결과 되돌리기

예) 버튼을 누른 상태에서 포커스를 옆으로 옮긴 후, 떼는 동작에 취소 기능 제공

※ 타이핑, 게임 등 누르는 동작에 실행이 반드시 필요한 경우는 예외임

2.5.3 Label in Name

레이블과 네임

A
  • 음성명령 사용자는 화면에 보이는 텍스트를 이용하여 버튼, 링크 등 기능을 실행시키는데, 사용자에게 보이는 텍스트와 보조기술이 인식한 텍스트가 다르 면 음성으로 기능을 실행시킬 수 없다.

- 화면에서 사용자에게 보이는 레이블은 보조기술이 인식할 수 있는 프로그램 에서의 네임과 동일하게 제공한다.

예) “실행”이라고 텍스트가 쓰여있는 버튼이 “실행”이라는 음성명령에 반응

2.5.4 Motion Actuation

동작기반 작동

A
  • 장치가 고정되어 있거나 사용자가 특정 동작을 하기 어려운 상황인 경우, 동 작기반으로 작동하는 기능을 원활하게 사용하지 못할 수 있다.

- 동작기반으로 작동하는 경우, 동작 외에 다른 방법으로 작동시킬 수 있는 기 능 및 우발적 작동을 막기 위한 비활성화 기능을 제공해야 한다.

예) 기기를 흔들어 화면전환이 발생한다면, 동일한 기능을 하는 인터페이스 제공

※ 동작기반 작동: 장치를 물리적으로 기울이거나 흔들거나 사용자의 특정 행동으로 기능이 작동되는 경우

※ 만보기와 같이 동작기반 작동이 필수적인 경우는 예외

2.5.5 Target Size

타겟 크기

AAA
  • 터치기반 환경에서 버튼 등이 충분한 크기로 제공되지 않으면, 정밀한 터치가 어려운 사용자는 해당 부분을 터치하기 어렵다.

- 포인트 영역의 크기를 44 x 44 CSS 픽셀 이상 충분한 크기로 제공한다. 예) 인접한 버튼이 같이 터치되지 않을 정도로 충분한 크기의 버튼 제공

※ 44 CSS 픽셀은 약 1.16cm임(W3C reference pixel 참조)

※ 페이지 내 충분한 크기의 대체 기능이 있거나, 텍스트의 일부이거나, 작 성자가 변경할 수 없는 사용자 에이전트에 의해 결정되는 부분, 필수적 인 경우는 예외

※ 스마트폰 쿼티(qwerty) 자판의 경우, 각 버튼의 크기가 충분하지는 않지 만, 사용자 에이전트가 제공하는 기능으로 예외

2.5.6 Concurrent Input Mechanisms 다양한 입력 방법 AAA
  • 사용자가 본인이 원하는 입력 방법을 사용할 수 없으면, 특정 입력방법을 사 용해야 하는 사용자는 입력에 어려움을 겪을 수 있다.

- 플랫폼에서 제공하는 다양한 입력방법(키보드, 마우스, 터치스크린, 스타일러 스, 음성 등)을 조합하여 사용할 수 있도록 보장한다.

예) 사용자가 상황에 따라 보다 편리한 입력 도구를 선택할 수 있도록 보장

※ 필수적인 경우(키보드가 필수적인 타자연습 등), 콘텐츠 보안, 사용자 설 정이 존중되어야 하는 경우 등은 예외

3.1.1 Language of Page

페이지의 언어

A
  • 현재 페이지에서 주로 사용된 언어가 무엇인지를 명시적으로 제공하지 않으 면, 화면낭독프로그램 등 보조공학기기는 해당 언어에 맞는 정확한 작동이 어 렵다.

- 현재 페이지에 사용된 언어가 무엇인지 명시한다.

예) 페이지 언어를 <html lang=“ko”> 한국어로 표시하면 ‘東京’은 ‘동경’으로 읽 힐 수 있으며, <html lang=“ja”> 일본어로 표시하면 ‘도쿄’로 읽힐 수 있음

3.1.2 Language of Parts

특정 부분의 언어

AA
  • 페이지 일부분에 다른 언어가 사용된 경우, 해당 언어가 무엇인지 명시적으로 제공하지 않으면, 화면낭독프로그램 등 보조공학기기는 해당 부분의 언어에 맞는 정확한 작동이 어렵다.

- 다른 언어가 사용된 일부분에 어떤 언어가 사용되었는지 명시한다.

예) <p lang=“ja”>東京</p>과 같이 사용된 언어정보 제공

3.1.3 Unusual Words

생소한 단어

AAA
  • 어려운 용어나 특정 분야에 한정된 단어 등을 사용하면, 사용자가 콘텐츠를 이해하기 어려울 수 있다.

- 어려운 용어, 전문용어 등에 설명, 정의 등을 제공한다.

예) "대체 텍스트"라는 단어에 링크를 걸어 설명을 제공하거나, 페이지 하단에 설명 제공

3.1.4 Abbreviations

약어

AAA
  • 어떤 말의 머리글자만 따서 사용하는 약어(Abbreviations)는 사용자가 해당 내 용을 이해하기 어려울 수 있다.

- 약어에 대해 의미를 알 수 있도록 단축 이전 전체 단어나 설명을 제공한다.

예) "W3C"의 단축 이전 단어인 "World Wide Web Consortium" 제공

3.1.5 Reading Level

읽기 수준

AAA
  • 높은 수준의 읽기 능력이 필요한 콘텐츠는 사용자가 이해하기 어려울 수 있 다.

- 중학교 교육 수준을 초과하는 읽기 능력이 필요한 콘텐츠는 이해를 돕기 위한 부가자료(예시, 이미지 등) 또는 중학교 수준 버전의 콘텐츠를 함께 제공한다. 예) “고진감래”라는 표현만을 사용하는 대신, “고생 끝에 낙이 온다”라는 풀이를

대신 제공하거나 “고진감래(고생 끝에 낙이 온다)”라고 풀이를 함께 제시

3.1.6 Pronunciation

발음

AAA
  • 화면낭독프로그램이 잘못된 발음으로 콘텐츠를 읽는 경우, 화면낭독프로그램 사용자는 콘텐츠를 이해하기 어려워질 수 있다.

- 발음에 따라 의미가 모호한 단어의 경우, 발음 정보를 제공한다.

예) WHO는 화면낭독프로그램에서 “후”라고 읽혀지는 대신, “더블유 에이치 오” 로 읽히게 하고 싶다면, “WHO(더블유 에이치 오)”와 같이 발음정보 제공

3.2.1 On Focus

초점 시

A
  • 사용자의 의도와 상관없이 단순히 초점을 받는 것으로 문맥이 변경된다면, 사 용자는 혼란에 빠지기 쉽다.

- 문맥이 단순히 초점을 받는 것만으로 변경되지 않고 사용자가 의도한 경우에 만 변경되도록 한다.

예) 관련 사이트로 이동하는 드롭다운 메뉴에 확인 버튼을 제공하여, 초점만 으로 페이지 이동이 발생하지 않고, “확인” 버튼 선택 후 이동

3.2.2 On Input

입력 시

A
  • 사용자의 의도와 상관없이 단순히 입력을 받는 것으로 문맥이 변경된다면, 사 용자는 혼란에 빠지기 쉽다.

- 문맥이 단순히 입력받는 것만으로 변경되지 않고 사용자가 의도한 경우에만 변경되도록 한다.

예) 입력 양식의 모든 값이 입력되었을 때, 입력 양식이 자동으로 제출되는 것 이 아니라, “확인” 버튼 등으로 사용자가 제출 의도를 명확히 한 경우에 제 출

3.2.3 Consistent Navigation

일관된 내비게이션

AA
  • 대메뉴와 같은 내비게이션 순서가 일관성 없이 제공된다면, 사용자는 내비게 이션하는 데 어려움을 겪을 수 있다.

- 대메뉴, 검색, 건너뛰기 링크 등 페이지를 이동하는 내비게이션이 동일한 순 서로 일관성 있게 제공한다.

예) 바로가기, 검색, 대메뉴 등을 모든 페이지에서 동일한 순서로 제공

3.2.4 Consistent Identification 일관된 식별 AA
  • 동일한 기능을 하는 아이콘, 버튼 등이 일관성 없이 제공되면, 사용자는 해당 아이콘, 버튼 등을 사용하는 데 어려움을 겪을 수 있다.

- 동일한 기능을 하는 아이콘, 버튼 등을 일관된 식별이 가능하도록 동일한 형 태로 제공한다.

예) 검색기능 버튼의 라벨을 “찾기” 또는 “검색” 등으로 혼용하여 사용하지 않 고, 하나의 라벨로 통일하여 사용

3.2.5 Change on Request

요구에 의한 변경

AAA
  • 새 창 열림, 페이지 이동 등과 같은 콘텐츠 문맥 변경이 사용자의 명확한 요구 없이 발생했을 때, 사용자는 문맥 변경을 인식하지 못하고 혼란에 빠질 수 있 다.

  • “확인” 버튼과 같은 사용자의 요구에 의해서만 콘텐츠의 문맥이 변경되거나, 이러한 문맥의 변경을 막는 방법을 제공한다.

예) 관련 사이트로 이동하는 드롭다운 메뉴에 확인 버튼을 제공하여, 사용자 의 명확한 요구 수용

3.3.1 Error Identification

오류 식별

A
  • 사용자 입력 오류가 있는 상황에서 사용자 입력 오류의 내용과 위치를 알려 주지 않으면, 사용자는 정확한 값을 입력하는 데 어려움을 겪을 수 있다.

- 잘못된 입력의 내용과 위치를 알려준다.

예) 숫자만 입력 가능한 생년월일 입력란에 문자를 입력했을 때, 시스템이 “생 년월일은 숫자만 입력 가능합니다.”라고 알려주는 경우

3.3.2 Labels or Instructions

레이블 또는 지시문

A
  • 회원가입 등 사용자 입력이 요구되는 상황에서 입력에 도움이 되는 레이블이나 지 시문이 제공되지 않으면, 사용자는 정확한 입력에 어려움을 겪을 수 있다.

- 입력에 도움이 되는 레이블이나 지시문을 제공한다.

예) 신규회원 아이디를 입력할 때, “아이디는 영문자, 숫자, 특수기호를 혼합하 여 8자리 이상이어야 한다.”라는 지시문 제공

※ 적절한 코딩인지 여부는 “1.3.1 정보 및 관계”에서 평가

3.3.3 Error Suggestion

오류 제안

AA
  • 사용자 입력에 오류가 있는 상황에서 입력 오류에 대한 수정방법을 제안해 주지 않으면, 사용자는 정확한 값을 입력하는 데 어려움을 겪을 수 있다.

- 사용자 입력 오류에 대한 올바른 입력을 제안해 준다.

예) 맞춤법이 잘못된 경우, 시스템이 오류를 인식하여 사용자에게 적절한 후 보 글자 제안

3.3.4 Error Prevention (Legal, Financial, Data)

오류 방지

(법, 금융, 데이터)

AA
  • 중요 데이터 변경에 실수가 있다면 사용자는 큰 불편을 겪을 수 있다.

- 법률(계약 등), 금전(구매 등), 개인정보 등 중요 데이터 변경에서, 행위를 원 래대로 되돌리는 기능, 미리 잘못된 입력을 체크해 주는 기능, 사용자가 최종 적으로 입력을 확인할 수 있는 기능 중 하나 이상의 기능을 제공한다.

예) 온라인 주문 시, 주문 중 사용자 실수로 의심되면 미리 알려주거나, 결재 전 주문내용을 한 번 더 확인할 수 있게 해주거나, 결재 후 주문을 취소 할 수 있는 기능 제공

3.3.5 Help

도움

AAA
  • 사용자는 콘텐츠의 의미를 파악하는데 어려움이 있을 수 있다.

- 상황에 맞는 도움말을 제공한다.

예) 다양한 입력이 요구되는 “온라인 회원 가입”에 레이블 이외에 추가적인 자세한 설명이 담겨있는 도움말 제공

3.3.6 Error Prevention (All) 오류 방지 (모든 경 우) AAA
  • 데이터를 변경하는 모든 경우, 사용자는 실수할 가능성이 있다.

- “3.3.4 오류 방지”를 강화한 지표로, 모든 경우에 대하여, 행위를 원래대로 되 돌리는 기능, 미리 잘못된 입력을 체크해 주는 기능, 또는 사용자가 최종적으 로 입력을 확인할 수 있는 기능 중 하나 이상의 기능을 제공한다.

예) 온라인으로 게시글을 올리는 경우, 작성글 중 사용자 실수가 의심되면 미 리 알려주거나, 게시 전 한 번 더 확인할 수 있게 해주거나, 게시를 취소 할 수 있는 기능 제공

4.1.1 Parsing

파싱

A
  • 마크업 언어로 제작된 콘텐츠에 문법 오류가 있으면, 보조기술이 콘텐츠를 적 절하게 해석하지 못하는 문제가 발생할 수 있다.

- 마크업으로 구성된 콘텐츠의 태그의 열고 닫음 및 중첩에 오류가 없고, 속성 및 ID가 중복되지 않도록 한다.

예) 마크업 검사(validator.w3.org 등)를 통해 문법오류가 없는 마크업 제공

4.1.2 Name, Role, Value

이름, 역할, 값

A
  • 링크, 입력, 버튼, 선택(link, input, button, select) 등 사용자 인터페이스는 HTML 기본기능이나 다른 방법으로 제작될 수 있는데, HTML 기본기능은 HTML 표준 을 준수하면 보조기술이 해당 사용자 인터페이스를 해석할 수 있는 반면, 다른 방법으로 구성된 사용자 인터페이스는 보조기술이 해석하기 어려울 수 있다.

  • 다른 방법으로 구성된 사용자 인터페이스에 이름, 역할, 값, 상태 등의 정보를 제공한다.

예) 링크를 버튼으로 사용하는 경우, <a href=“#” role=“button”>BUTTON</a>와 같이 role=“button” 부분을 추가하여 역할을 알려주면, 보조기술이 해당 부 분이 링크가 아닌 버튼임을 알 수 있음

※ WAI-ARIA를 활용하여 이름, 역할, 값, 상태 제공 가능

4.1.3 Status Messages

상태 메시지

AA
  • 상태 메시지가 화면의 어딘가에 표현되었다고 해서 화면을 읽어주는 화면낭 독프로그램이 그 부분을 읽어주는 것이 아니므로, 화면낭독프로그램 사용자는 해당 상태 메시지 정보를 받지 못할 가능성이 있다.

- 상태 메시지가 화면에 표시된 경우, 화면낭독프로그램 사용자가 읽는 위치를 상태 메시지로 옮기지 않고도 해당 상태 메시지를 들을 수 있도록 한다.

예) <p role="status" aria-live="assertive">상태 메시지</p>라고 구현

※ 상태 메시지: 사용자에게 “검색 결과 10개”, “다운로드 30% 진행”, “전화번 호 형식이 아닙니다”와 같은 상태 정보를 알려주는 메시지

※ 상태 메시지는 WAI ARIA의 Live 기능을 이용하여 구현 가능

총 78개(A 30개, AA 20개, AAA 28개)

참고문헌

다음 문서들은 본 표준의 이해를 돕기 위한 문서로서 특정 문서(발행일 및 판 번호 또는 개정 번호 를 명시한 것)와 일반 문서로 구별된다.

  1. JSA, JIS X8341-3, ‘고령자∙장애자 등 배려 설계 지침-정보 통신의 장비, 소프트웨어 및 서비스-제3 부: 웹 콘텐츠’, 2004.

  2. JSA, JIS X8341-3, ‘고령자∙장애자 등 배려 설계 지침-정보 통신의 장비, 소프트웨 어 및 서비스-제3 부: 웹 콘텐츠’, 2010.

  3. KCS, KCS.OT-10.0003/R2, ‘한국형 웹 콘텐츠 접근성 지침’, 2015.3.31.

  4. TTA, TTAK.KO-10.0213, ‘소프트웨어 접근성 지침 1.0’, 2006.12.27.

  5. TTA, TTAK.KO-10.0472, ‘공인인증서 가입자 S/W 접근성 지침’, 2010.12.23.

  6. TTA, TTAK.KO-10.0634, ‘모바일 애플리케이션 접근성 지침’, 2012.12.21.

  7. TTA, TTAK.OT-10.0003/R1, ‘한국형 웹 콘텐츠 접근성 지침 2.0’, 2009.12.22.

  8. United States Access Board, ‘미국 재활법 508조’, 2000.12.

KS X OT0003:2022 해설

이 해설은 이 표준과 관련된 사항을 설명하는 것으로, 표준의 일부는 아니다.

개요

제정의 취지

이 표준에서는 장애인이 비장애인과 동등하게 웹 콘텐츠에 접근할 수 있도록 웹 콘텐츠를 제작하는 방법에 관하여 기술하고 있다. 이 표준에 포함된 지침들은 웹 콘텐츠 저작자, 웹사이트 설계자들이 관련된 지침을 준수하여 접근성(accessibility)을 보장하는 웹 콘텐츠를 쉽게 만들 수 있도록 도와주기 위하여 제정되었다. 또한 보조기술개발자가 보조기술을 설계할 때도 이 표준을 참고할 수 있다.

그간의 개정 경위

  1. 제1차 개정(2010년)

    웹 접근성 국제표준 WCAG 2.0이 2008년에 개정됨에 따라, 주요 개정사항을 국내표준에 반영하였다.

  2. 제2차 개정(2015년)

    웹 사이트 이용환경이 PC에서 모바일 기기로 변경됨에 따라, 이에 필요한 내용을 추가하였다.

이번 개정(2022년)

개정의 취지

월드와이드웹콘소시엄(W3C, World Wide Web Consortium)의 웹 접근성 국제표준 WCAG 2.1(Web Accessibility Guidelines 2.1)이 2018년에 개정됨에 따라, 이를 국내표준에 반영하기 위해 작성하였다.

주요 개정내용

기존 국가표준 한국형 웹 콘텐츠 접근성 지침 2.1(KS X OT0003)에 최신 개정된 관련 국제표준 (WCAG 2.1)의 추가된 필수 검사항목을 추가하는 것과 전문가 의견을 골자로 하며, 기존 24개 검사항 목에 신규 9개 검사항목이 추가되는 것이 주요변경 사항이다.

추가되는 신규 검사항목 목록

6.1.4 문자 단축키

6.5.1 단일 포인터 입력 지원

6.5.2 포인터 입력 취소

6.5.3 레이블과 네임

6.5.4 동작기반 작동

6.4.4 고정된 참조 위치 정보

7.2.2 찾기 쉬운 도움 정보

7.3.3 접근 가능한 인증

7.3.4 반복 입력 정보

표준 적용 산업 분야 및 산업에 미치는 영향

이 표준은 국내 웹 관련 산업 및 정책 전반에 영향을 미칠 것이며, 장애인이 비장애인과 동등하게 인터넷을 이용할 수 있는 환경 조성에 기여할 것이다. 또한, 「국가정보화기본법」, 「장애인 차별금지 및 권리구제 등에 관한 법률」에 의거하여 의무화된 웹 접근성 부문의 표준으로 활용될 수 있다.

참조 표준(권고)

국외 표준(권고)

Web Content Accessibility Guidelines (WCAG) 2.1(2018)

국내 표준

해당 사항 없음.

참조 표준(권고)과의 비교

이 표준은 W3C가 장애인 등이 웹사이트에 접근하는 것을 보장하기 위한 목적으로 개발한 '웹 콘텐 츠 접근성 지침 2.1'를 참고하여 개발되었다. W3C의 웹 접근성 표준은 1999년 5월에 제정되었으며, 2008년, 2018년에 개정된 바 있다. 이 표준은 ‘W3C 웹 콘텐츠 접근성 가이드라인 2.1(2018)’의 성공 기준의 중요도 A항목을 중심으로 국내 여건을 고려하여 개발하였다.

표준의 이력 정보

표준의 이력

판수 제·개정일 제·개정 내역
제1판 2005.12.21. 제정 KCS.OT-10.0003
제2판 2010.12.31. 개정 KCS.OT-10.0003/R1
제3판 2015.03.31. 개정 KCS.OT-10.0003/R2
제4판 2022.00.00. 개정 KCS.OT-10.0003/R3

KCS.OT-10.0003/R3와 KCS.OT-10.0003/R2 목차 전후 대조표

KCS.OT-10.0003/R3 R2 대조 KCS.OT-10.0003/R2 R3 대조
5. 인식의 용이성 5. 인식의 용이성
5.1 대체 텍스트 5.1 대체 텍스트
5.1.1 적절한 대체 텍스트 제공 5.1.1 적절한 대체 텍스트 제공
5.2 멀티미디어 대체 수단 5.2 멀티미디어 대체 수단
5.2.1 자막 제공 5.2.1 자막 제공
5.3 적응성 신규
5.3.1 표의 구성 7.3.2
5.3.2 콘텐츠의 선형구조 7.3.1
5.3.3 명확한 지시사항 제공 5.3.2
5.4 명료성 5.3 5.3 명료성 5.4
5.4.1 색에 무관한 콘텐츠 인식 5.3.1 5.3.1 색에 무관한 콘텐츠 인식 5.4.1
5.4.2 자동 재생 금지 5.3.4 5.3.2 명확한 지시 사항 제공 5.3.3
5.4.3 텍스트 콘텐츠의 명도 대비 5.3.3 5.3.3 텍스트 콘텐츠의 명도 대비 5.4.3
5.4.4 콘텐츠 간의 구분 5.3.5 5.3.4 자동 재생 금지 5.4.2
5.3.5 콘텐츠 간의 구분 5.4.4
6. 운용의 용이성 6. 운용의 용이성
6.1 입력장치 접근성 6.1 입력장치 접근성
6.1.1 키보드 사용 보장 6.1.1 키보드 사용 보장
6.1.2 초점 이동 6.1.2 초점 이동
6.1.3 조작 가능 6.1.3 조작 가능
6.1.4 문자 단축키 신규
6.2. 충분한 시간 제공 6.2. 충분한 시간 제공
6.2.1. 응답시간 조절 6.2.1. 응답시간 조절
6.2.2. 정지 기능 제공 6.2.2. 정지 기능 제공
6.3 광과민성 발작 예방 6.3 광과민성 발작 예방
6.3.1. 깜빡임과 번쩍임 사용 제한 6.3.1. 깜빡임과 번쩍임 사용 제한
6.4. 쉬운 내비게이션 6.4. 쉬운 내비게이션
6.4.1. 반복 영역 건너뛰기 6.4.1. 반복 영역 건너뛰기
6.4.2. 제목 제공 6.4.2. 제목 제공
6.4.3. 적절한 링크 텍스트 6.4.3. 적절한 링크 텍스트
6.4.4 고정된 참조 위치 정보 신규
6.5 입력 방식 신규
6.5.1. 단일 포인터 입력 지원 신규
6.5.2. 포인터 입력 취소 신규
6.5.3. 레이블과 네임 신규
6.5.4. 동작기반 작동 신규
7. 이해의 용이성 7. 이해의 용이성
7.1. 가독성 7.1. 가독성
7.1.1. 기본 언어 표시 7.1.1. 기본 언어 표시
7.2. 예측 가능성 7.2. 예측 가능성
7.2.1. 사용자 요구에 따른 실행 7.2.1. 사용자 요구에 따른 실행
7.2.2 찾기 쉬운 도움 정보 신규
7.3 콘텐츠의 논리성 삭제
7.3.1 콘텐츠의 선형 구조 5.3.2
7.3.2 표의 구성 5.3.1
7.3. 입력 도움 7.4. 입력 도움 7.3
7.3.1. 오류 정정 7.4.1. 레이블 제공 7.3.2
7.3.2. 레이블 제공 7.4.2. 오류 정정 7.3.1
7.3.3 접근 가능한 인증 신규
7.3.4 반복 입력 정보 신규
8. 견고성 8. 견고성
8.1. 문법 준수 8.1. 문법 준수
8.1.1. 마크업 오류 방지 8.1.1. 마크업 오류 방지
8.2.1. 웹 애플리케이션 접근성 준 수 8.2.1. 웹 애플리케이션 접근성 준수

원칙 4개

지침 14개: 13개 > 14개, 신규 2개, 삭제 1개

검사항목 33개: 24개 > 33개, 신규 9개