꿈의 바다를 항해하다.

• 검사 항목

링크의 용도나 목적지를 명확하게 이해할 수 있도록 링크 텍스트를 제공해야 한다.

1) 맥락과 무관한 링크: 링크의 용도나 목적지를 주변의 맥락과 관계없이 이해할 수 있도록 링크 텍스트를 제공해야 한다. 예를 들어, ‘여기’나 ‘더 보기’ 등과 같은 링크 텍스트를 제공하는 것보다 ‘한국정보화진흥원 홈페이지로 이동’ 혹은 ‘공지사항 더 보기’와 같이 해당 링크를 클릭했을 때 목적지에 관한 정보나 어떤 내용을 볼수 있는지를 보다 구체적으로 제시해야 한다. 또한 모든 링크 정보는 사용자가 쉽게 이해할 수 있도록 간단명료하게 제공해야 한다.

2) 이미지 링크: 아이콘(Icon)으로 링크 텍스트를 대신하여 표현한 경우(예를 들어, 홈페이지로 이동하기 위한 링크를 링크 텍스트가 아닌 집 모양의 아이콘 이미지로 대신하고 해당 아이콘에 홈 페이지로의 링크를 걸어놓은 경우), 해당 아이콘은 그 자체의 이미지만으로도 링크의 용도나 목적지, 내용 등을 충분히 이해할 수 있도록 직관적이고 명료해야 한다. 아이콘에 대체 텍스트를 제공하는 방법은 검사 항목 1.1.1(적절한 대체 텍스트 제공)을 참고하라.

3) 적절한 링크 제공 방법은 다음과 같다.

3-1) 텍스트 중에서 URL에 관한 정보를 제공하는 부분을 링크로 연결해야 한다.

3-2) 텍스트 중에서 URL에 관한 정보를 제공하는 부분의 바로 뒷부분을 링크로 연결 해야 한다.

3-3) URL에 관한 정보를 제공하는 텍스트와 URL로 이동하는 아이콘을 하나의 링크로 구성하는 것이 바람직하다. 이 경우, 아이콘 이미지에 제공해야 하는 대체 텍스트는 빈 글자로 구성해야 한다.

3-4) 동일한 제품을 서로 다른 관점에서 설명한 페이지로 이동하는 링크들은 링크 텍스트의 제목을 서로 다르게 구성하는 것이 바람직하다.

• 기대 효과

1) 웹 페이지의 상단이나 좌측 프레임에 링크 목록이 반복되는 영역이 위치하고 있으면 화면 낭독 프로그램은 이 링크 목록을 순서대로 읽어준 후에야 필요한 부분을 읽어주므로 매우 불편하다. 그러나 이 웹 페이지의 첫 부분에 콘텐츠의 핵심 부분으로 이동할 수 있는 건너뛰기 링크를 제공하면 필요한 위치로 빠르게 이동할 수 있다.

2) 하나의 긴 문장으로 구성된 콘텐츠의 경우, 사용자가 원하는 부분을 찾기 위해서는 처음부터 모두 읽어야 한다. 따라서 색인이 없는 긴 문장의 경우에 콘텐츠의 특정 영역으로 이동하는 것이 매우 불편하다. 그러나 문장의 시작 부분에 색인을 제공하면 필요한 부분으로 직접 이동할 수 있어 보다 쉽고 빠르게 내비게이션할 수 있다. 장, 절, 소절의 제목을 h1, h2, h3 등의 태그를 이용하여 구성하면 이들 태그 간을 빠르게 이동할 수 있다

3) 여러 페이지로 구성된 웹 사이트의 경우, 사이트 맵을 제공하면 사용자는 이를 이용하여 필요한 정보가 위치한 페이지로 보다 쉽고 빠르게 이동할 수 있다.

4) 모든 웹 페이지에 서로 다른 제목을 제공하면 동시에 여러 개의 웹 페이지가 열려 있더라도 사용자(예: 시각 장애인, 인지장애인, 지체장애인 등)는 해당 웹 페이지의 제목을 통해 초점을 받은 웹 페이지가 무엇에 관한 페이지인지를 쉽게 파악할 수 있어 열려있는 웹 페이지 간을 편리하게 이동할 수 있다. 이를 위해, 각 페이지는 해당 페이지만의 유일하고 배타적인(Unique and Exclusive) 페이지 제목을 가져야 한다.

5) 웹 페이지를 구성하는 프레임에 각 프레임을 설명하는 제목을 제공하면 사용자(예: 시각 장애인, 인지장애인, 심각한 지체장애인 등)는 초점을 받은 프레임을 프레임 제목을 통해 파악할 수 있으므로 웹 페이지의 프레임을 매우 편리하게 이동할 수 있다. 이를 위해, 페이지의 경우와 마찬가지로, 동일한 페이지에 있는 프레임은 해당 프레임만의 유일하고 배타적인 프레임 제목을 가져야 한다.

6) 텍스트에 링크를 연결할 때, “여기를 클릭하세요.”와 같이 애매모호한 표현을 사용 하여 링크를 연결한 경우, 시각 장애인이나 인지장애인들 뿐만 아니라 비장애인들도 클릭했을 때 어떤 일이 일어날 것이며 무슨 내용이 제시될 것인지를 알 수 없다. 그러나 링크 텍스트가 직관적으로 주어졌을 경우, 장애인들은 해당 링크를 클릭 했을 때 무슨 내용이 제시될 것인지를 분명하게 알 수 있다.

7) 링크 텍스트를 직관적이고 의미 있게 구성하면 사용자가 링크의 용도나 목적지를 명확히 알 수 있다. 이 경우, 지체장애인은 원하지 않는 링크를 방문하기 위해 키보드를 여러 차례 입력하는 수고를 덜 수 있으며, 지적장애인은 원하지 않는 콘텐츠로 이동하거나 이동해 오는 혼란을 겪지 않는다. 또한 시각 장애인은 링크의 제목만 듣고도 링크의 용도나 목적지를 알 수 있다.

• 원칙 3. 이해의 용이성(Understandable): 콘텐츠는 이해할 수 있어야 한다.

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

이해의 용의성의 지침과 항목 목록

지침 (4개)	검사 항목 (6개)
3.1(가독성) 콘텐츠는 읽고 이해하기 쉬워야 한다.	3.1.1(기본 언어 표시) 주로 사용하는 언어를 명시해야 한다.
3.2(예측 가능성) 콘텐츠의 기능과 실행결과는 예측 가능해야 한다.	3.2.1(사용자 요구에 따른 실행) 사용자가 의도하지 않은 기능(새 창, 초점 변화 등)은 실행되지 않아야 한다.
3.3(콘텐츠의 논리성) 콘텐츠는 논리적으로 구성해야 한다.	3.3.1(콘텐츠의 선형화) 콘텐츠는 논리적인 순서로 제공해야 한다.
	3.3.2(표의 구성) 표는 이해하기 쉽게 구성해야 한다.
3.4(입력 도움) 입력 오류를 방지하거나 정정할 수 있어야 한다.	3.4.1(레이블 제공) 입력 서식에는 대응하는 레이블을 제공 해야 한다.
	3.4.2(오류 정정) 입력 오류를 정정할 수 있는 방법을 제공 해야 한다.

• 용어 설명

없음

• 검사 항목

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

• 기대 효과

1) 화면 낭독 프로그램과 같이 텍스트를 음성으로 전환(TTS: Text to Speech)하는 보조 기술이나 텍스트를 점자로 번역하는 점역 프로그램은 콘텐츠를 구성하는 기본 언어를 인식하여 자동적으로 음성을 변환하거나 해당 언어에 적합한 점역을 할 수 있는 편리함이 있다.

• 용어 설명

1) 온라인 서식(Online form): 온라인 서식은 사용자의 입력을 통해 값을 수정하여 전달할 수 있는 여러 가지 컨트롤(예: 텍스트 입력 상자, 드롭다운 선택 메뉴, 라디오 선택 메뉴, 누르는 버튼 등)과 그것의 레이블을 말한다.

2) 마우스 오버(Mouseover): 웹 페이지 안의 어떤 요소에 마우스 포인터를 올려놓았지만 아직 마우스 버튼을 누르지 않아 활성화되지 않은 상태를 지칭한다. 펜 입력 장치와 같은 특정한 위치 지정 도구에서는 이러한 상태를 지원하지 않는다.

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

4) 새 창, 팝업 창: 새로운 페이지를 보여주기 위해 현재의 창이 아닌 별도의 창 또는 탭으로 열리는 경우, 이를 새 창 또는 팝업 창이라고 부른다. 단, 스크립트 언어의 고유한 기능을 이용해 생성되는 경고(Alert), 확인(Confirm), 입력 프롬프트(Prompt)등의 메시지 대화상자는 새 창이나 팝업 창의 범주에 포함되지 않는다.

5) 레이어 팝업(Layer popup): 대부분의 최신 브라우저에서는 새 창과 팝업 창이 무분별하게 생성되어 사용자에게 불편을 주거나 보안의 위협을 가하는 것을 막기 위해 팝업 창 차단 기능을 제공하고 있다. 그러나 일부 웹 페이지 제작자가 이것을 피하기 위해 시각적으로 팝업 창과 같은 효과를 내도록 같은 페이지 내에서 기존 콘텐츠를 가리고 그 위의 새로운 층에 팝업 창처럼 보이는 콘텐츠 영역을 보이도록 한 경우, 이를 통상적으로 레이어 팝업이라고 부른다.

6) 드롭다운 메뉴(Drop-down menu): 여러 개의 항목 중 하나를 선택하기 위해 목록을 다 나열하지 않고 첫 번째 항목만 보이다가 사용자가 메뉴 확장 버튼을 활성화 시키면 나머지 목록의 전부 또는 일부가 아래로 펼쳐져 나타나는 방식의 온라인 입력 서식 컨트롤을 드롭다운 메뉴 또는 드롭다운 목록이라 한다. 하이퍼텍스트 생성언어(HTML: HyperText Markup Language)과 같은 마크업 언어나 플래시와 같은 플러그 인 방식의 응용 프로그램에서는 드롭다운 메뉴를 표시하기 위해 내장된 컨트롤을 제공한다.

7) 풀다운 메뉴(Pull-down menu): 일반적으로 가로로 늘어진 메뉴 바(Menu bar)에서 특정 항목을 선택(마우스 오버, 키보드를 이용한 초점, 마우스 클릭이나 엔터 키를 이용한 활성화에 의해 선택이 이루어질 수 있음)하면 하위 메뉴 항목들이 선택한 항목의 아래쪽으로 펼쳐져 나타나는 방식의 메뉴를 말한다.

• 검사 항목

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

1) 초점(Focus)에 따른 변화: 웹 콘텐츠를 구성하는 컨트롤이 초점을 받았을 경우, 사용자가 의도하지 않은 기능이 실행되지 않아야 한다. 단, 기능의 실행이 아니라 초점을 받은 요소의 색깔이 반전되거나 테두리가 생기는 것과 같은 시각적인 변화, 또는 사용자 제어가 이동하지 않은 상태에서 나타나는 추가 정보 등은 초점 변화에 따른 기능의 실행으로 간주하지 않는다. 잘못된 예는 다음과 같다.

1-1) 온라인 서식이 자동적으로 제출됨

1-2) 새 창이 열림

1-3) 드롭다운 메뉴나 풀다운 메뉴를 사용하는 경우에 해당 메뉴가 실행됨

1-4) 사용자 제어가 다른 컨트롤로 이동하거나 사라지거나 예측할 수 없음

2) 입력에 따른 변화: 사용자가 선택할 수 있는 컨트롤(예: 콤보박스, 라디오 박스, 체크박스 등)과 같이 어떤 항목을 선택하는 경우, 특정 항목을 선택(초점을 받음)하는 것으로 해당 항목이 의미하는 기능이 실행되지 않아야 한다. 실제로 해당 기능이 실행되는 것은 사용자 선택 컨트롤과 함께 제공되는 실행 버튼을 클릭하거나 활성화 하였을 때 비로소 실행되어야 한다.

3) 새 창/팝업 창/레이어 팝업: 사용자가 예측할 수 없는 상황에서 새 창 또는 팝업 창이 열리고 이를 통해 정보나 기능을 전달하면 안 된다. 레이어 팝업이 시각적으로는 맨 앞이지만 키보드로 접근하는 경우 맨 뒤인 경우가 있기 때문에, 사용자가 예측할 수 없는 상황에서 레이어 팝업 창으로 정보나 기능을 전달해서는 안 된다.

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

• 기대 효과

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

2) 시력이 전혀 없는 상태인 전맹(Achromatopsia)이나 저시력자는 새 창이 갑자기 뜨는 것과 같이 문맥의 변화가 발생하는 것을 인지하기 어렵다. 새 창 열기가 불가피 하게 필요한 경우, 사용자에게 미리 새 창 열림을 경고하여 뒤로 가기 버튼이 더 이상 예상처럼 동작하지 않는다는 사실을 알려 주면 혼란을 줄일 수 있다.