Completion 0%

Education > NHN Web Content Accessibility Guidelines (NWCAG) 1.0

소개

NWCAG의 목적

NHN Web Content Accessibility Guidelines(이하 NWCAG) 1.0은 NHN에서 제공하는 웹 콘텐츠의 접근성을 보장하기 위한 목적으로 만들어졌다.
NWCAG는 한국정보화진흥원에서 제정한 KWCAG 2.0의 모든 내용을 포함하고 있어, NWCAG를 모두 준수했을 경우 한국정보화진흥원의 웹 접근성 품질 인증을 받을 수 있다. 또한 KWCAG에는 포함되지 않았지만 웹 접근성 개선에 도움이 되는 지침을 추가하였다.

NWCAG의 구조

NWCAG는 크게 세 단계로 구성되어 있다.

핵심 지침(Key Points, 8개)
웹 접근성 준수를 위해 꼭 알아야 할 핵심 지침 8가지를 의미한다. 핵심 지침은 '1'과 같이 1단계 숫자로 표현하였다.
지침(Guidelines, 27개)
핵심 지침을 만족할 수 있는 구체적인 항목이다. 지침에 대응되는 장애 환경과 담당자가 명시되어 있으며, 상세한 설명과 기대효과를 함께 제시하고 있다. 지침은 '1.1'과 같이 2단계 숫자로 표현하였다.
체크리스트(Checklist, 34개)
지침의 준수 여부를 확인할 수 있는 항목이다. 평가 방법 및 다양한 오류 유형과 통과 유형을 기술하고 있다. 체크리스트는 웹 접근성 품질 인증을 위해 반드시 준수해야 할 중요도 A 레벨과 반드시 적용할 필요는 없으나 적용하면 접근성이 향상되는 중요도 AA 레벨로 나뉜다. 체크리스트는 '1.1.1'과 같이 3단계 숫자로 표현하였다.

NWCAG 1.0

1. 대체 콘텐츠를 제공한다.

1.1 텍스트가 아닌 콘텐츠는 원래 제공하고자 하는 정보 그대로 대체 텍스트를 제공한다.

타 지침과의 관계

KWCAG 2.0: 1.1.1 적절한 대체 텍스트 제공 / WCAG 2.0: 1.1.1 Non-text Content

관련 장애

시각

관련 부서

마크업, Ajax, 플래시

지침 설명
  • 이미지 텍스트 - 텍스트가 이미지로 제공되는 경우에는 이미지에 포함된 내용 그대로 대체 텍스트를 제공한다. 대체 텍스트를 제공하지 않거나, 내용의 일부만 제공하지 않도록 한다.
  • 그림, 사진 - 나타내고자 하는 목적이 바르게 전달될 수 있도록 간단한 묘사를 대체 텍스트로 제공한다. 단순히 '그림', '사진', '이미지'와 같이 모호한 표현은 삼간다. 만약 그림이나 사진에 대한 설명을 별도로 제공한 경우, 대체 텍스트를 제공하지 않아도 무방하다. 동적으로 변하는 콘텐츠도 모호하지 않은 대체 텍스트를 제공해야 한다.
  • 정보전달을 위한 아이콘 - 아이콘의 의미가 구체적으로 전달 될 수 있는 대체 텍스트를 제공한다. 이 때, 비장애인도 아이콘의 의미를 바르게 파악할 수 있도록 title 속성을 이용하여 툴팁을 함께 표시한다.
  • 차트, 다이어그램 - 전달하고자 하는 정보 그대로 대체 텍스트를 제공한다. 포함하고 있는 데이터가 많을 경우에도 모든 내용을 포함하고 있어야 한다.
기대 효과

시각 장애 환경에서도 화면 낭독기를 통해 텍스트가 아닌 콘텐츠를 바르게 인식할 수 있도록 한다.

1.2 정보 전달을 위한 동영상은 캡션이나 원고를 제공한다.

타 지침과의 관계

KWCAG 2.0: 1.2.1 자막 제공 / WCAG 2.0: 1.2.1 Audio-only and Video-only (Prerecorded), 1.2.2 Audio-only and Video-only (Prerecorded), 1.2.3 Audio Description or Media Alternative (Prerecorded)

관련 장애

청각

관련 부서

기획/UX, 디자인, 플래시

지침 설명

정보 전달을 위한 동영상이 제공될 때는 동기화된 캡션이나 원고를 제공하도록 한다. 단, 미술작품 갤러리나 가사가 없는 음악 등 특정 감각기관을 위한 콘텐츠에는 간단한 설명글을 제공하는 것으로도 충분하다.

기대 효과

청각 장애 환경에서 소리를 듣지 않아도 동영상 콘텐츠의 접근이 가능하다.

1.3 캡차 사용 시 대체 가능한 수단을 제공한다.

타 지침과의 관계

KWCAG 2.0: 1.3.2 명확한 지시사항 제공 / WCAG 2.0: 1.3.3 Sensory Characteristics

관련 장애

시각

관련 부서

기획/UX, 디자인, 마크업, Ajax

지침 설명

캡차(CAPTCHA)는 시각 자료를 대하는 사람과 기계의 차이를 통해 자동가입을 방지하는 기술로 시각 장애 환경에 처해 있는 경우 캡차를 이용할 수 없어 다음 단계로의 정보 접근이 어렵다. 따라서 시각 장애 환경에서도 인식 가능한 음성 캡차를 제공하거나 이메일이나 핸드폰 인증 방법을 사용하는 것이 좋다.

기대 효과

시각 장애 환경에서 캡차를 알아보지 못하여 발생하는 문제를 해소할 수 있으며, 구부러진 이미지의 인식이 어려운 비장애인도 회원 가입이 편리해질 수 있다.

2. 어떠한 경우에도 정보나 구조의 손실이 없어야 한다.

2.1 색상, 크기, 방향, 위치, 음향 효과 만으로 정보를 전달하지 않는다.

타 지침과의 관계

KWCAG 2.0: 1.3.1 색에 무관한 콘텐츠 인식, 1.3.2 명확한 지시사항 제공 / WCAG 2.0: 1.3.3 Sensory Characteristics, 1.4.1 Use of Color

관련 장애

시각, 청각

관련 부서

기획/UX, 디자인, 마크업, Ajax

지침 설명

색상 차이만으로 정보 전달을 할 경우, 색의 구분이 어렵거나 흑백 프린터로 출력했을 때 콘텐츠의 바른 인식이 어렵다. 따라서 색상 외에도 무늬나 모양을 다르게 하거나 영역별 지시 사항을 명확하게 제공하는 것이 바람직하다. 또한 '우측 버튼을 클릭하시오.' 와 같이 방향이, 위치만으로 정보를 전달할 경우 시각 장애 환경에서 인식하기 어렵다. 시간 제한이 완료되었거나 특정 기능이 수행되었을 때, 음향 효과만으로 정보를 전달하게 될 경우에는 청각 장애 환경에서 정보를 바르게 인식할 수 없으므로 음향 효과만으로 정보를 전달하지 않아야 한다.

기대 효과

시각 및 청각 장애 환경에서도 웹 콘텐츠를 바르게 인식할 수 있다.

2.2 W3C 명세에 맞게 마크업한다.

타 지침과의 관계

KWCAG 2.0: 4.1.1 마크업 오류 방지 / WCAG 2.0: 4.1.1 Parsing

관련 장애

비장애

관련 부서

마크업, Ajax

지침 설명

W3C 명세에 맞게 마크업을 한다는 것은 크게 두 가지를 의미한다. 하나는 문법 오류를 방지하여 브라우저가 잘못 해석하는 것을 막는 것이다. 발생하기 쉬운 문법 오류는 주로 요소의 중첩이 잘못되거나, id 속성에 중복된 값이 선언되는 경우이다. 두 번째 의미는 웹 표준을 준수하여 어떠한 사용자 환경에서도 동일하게 출력되는 것을 말한다. 브라우저마다 렌더링 방식에 다소 차이가 있긴 하나, W3C 명세에 맞게 마크업을 한다면 정보 전달에 문제가 없다.

기대 효과

브라우저의 잘못된 해석을 막고 모든 사용자 환경에서 동일한 형태로 웹 콘텐츠를 제공할 수 있다.

체크리스트 - 중요도 레벨 A

2.3 의미에 맞는 요소와 구조로 마크업한다.

타 지침과의 관계

KWCAG 2.0: 3.3.2 표의 구성 / WCAG 2.0: 1.3.1 Info and Relationships

관련 장애

시각

관련 부서

마크업, Ajax

지침 설명

의미에 맞는 요소와 구조로 마크업하여, 웹 콘텐츠가 다른 형태로 변환되더라도 정보를 바르게 전달할 수 있어야 한다. 예를 들어, 시각 장애 환경에서 모든 콘텐츠가 선형화된 텍스트로 바뀌더라도 콘텐츠의 의미를 정확히 파악 할 수 있게 제목은 제목 요소(<h1>~<h6>)로, 목록은 목록 요소(<ul>,<ol>,<dl>)를 이용하여 마크업한다.

기대 효과

시각 장애 환경에서 화면낭독기를 통해 웹에 접근할 때에도 콘텐츠를 바르게 인식할 수 있다.

2.4 콘텐츠는 논리적인 순서에 맞게 제공한다.

타 지침과의 관계

KWCAG 2.0: 3.3.1 콘텐츠의 선형화 / WCAG 2.0: 1.3.2 Meaningful Sequence

관련 장애

시각, 운동

관련 부서

마크업, Ajax

지침 설명

콘텐츠를 논리적인 순서에 맞게 제공한다는 것은 선형화 되었을 때에도 정보가 정확하게 전달된다는 것을 의미한다. 화면에는 메뉴의 중첩 구조가 제대로 표현되지만, 선형화되었을 때 구조를 알 수 없다면 논리적 순서에 맞지 않게 콘텐츠가 제공된 것이다. 따라서 논리적인 순서를 고려하며 마크업하는 것이 바람직하며, 플래시 콘텐츠가 제공될 경우에는 Tabindex 속성을 지정하여 논리적인 순서로 콘텐츠 탐색이 가능하게 한다.

기대 효과

시각 및 운동 장애 환경에서 웹 탐색과 키보드 접근성이 좋아진다.

2.5 웹 브라우저가 기본적으로 지원하지 않는 객체는 대체 콘텐츠를 함께 제공한다.

타 지침과의 관계

KWCAG 2.0: 4.2.1 웹 애플리케이션 접근성 준수 / WCAG 2.0: 4.1.2 Name, Role, Value

관련 장애

비장애

관련 부서

기획/UX, 마크업, Ajax

지침 설명

웹 브라우저 자체에 내장되어 있지 않는 애플리케이션을 포함할 할 경우, 애플리케이션을 실행할 수 있는 플러그인 설치를 안내가 제공되어야 한다. 만약 플러그인 설치 여부와 관계 없이 애플리케이션을 실행할 수 없을 때는 대체 콘텐츠를 제공해주어야 한다.

기대 효과

웹 브라우저가 자체적으로 실행할 수 없는 콘텐츠도 접근이 가능하다.

2.6 단순 열람을 위한 문서는 뷰어를 반드시 제공한다.

타 지침과의 관계

신규 지침

관련 장애

비장애

관련 부서

기획/UX, Ajax

지침 설명

단순 열람을 위한 목적으로 문서를 제공하는 경우, 문서에 접근할 수 있도록 문서 형태에 맞는 뷰어를 제공해주어야 한다. 뷰어는 문서 바로 앞이나 뒤에 제공하여 필요 시 바로 설치 할 수 있도록 하는 것이 가장 바람직하다.

기대 효과

뷰어를 통해 모든 문서의 열람이 가능하다.

2.7 웹 브라우징 도구의 기본 인터페이스를 제한하지 않는다.

타 지침과의 관계

신규 지침

관련 장애

시각, 운동, 비장애

관련 부서

기획/UX, 마크업, Ajax

지침 설명

마우스 우클릭 메뉴를 자바스크립트로 막거나, accesskey 속성의 무분별한 사용으로 브라우저에서 제공하는 단축키를 사용할 수 없게 해서는 안 된다. 웹 콘텐츠가 브라우저의 기본 기능을 제한하지 않도록 한다.

기대 효과

브라우저에서 기본적으로 제공하는 기능을 문제 없이 사용할 수 있다.

3. 읽고 이해하기 쉬운 환경을 보장한다.

3.1 주 언어를 명시한다.

타 지침과의 관계

KWCAG 2.0: 3.1.1 기본 언어 표시 / WCAG 2.0: 3.1.1 Language of Page

관련 장애

시각

관련 부서

마크업, Ajax

지침 설명

주언어는 HTML 코드에서 lang 속성에 알맞은 언어코드를 입력함으로써 제공할 수 있다.

기대 효과

시각 장애 환경에서 화면낭독기로 웹에 접근하는 경우, 주언어가 명시되어 있으면 해당 언어에 알맞게 출력되어 콘텐츠의 이해가 수월해진다.

3.2 자동으로 재생되는 3초 이상의 음성 정보는 콘텐츠 시작 부분에서 사용자가 제어할 수 있게 한다.

타 지침과의 관계

KWCAG 2.0: 1.3.4 배경음 사용 금지 / WCAG 2.0: 1.4.2 Audio Control

관련 장애

시각

관련 부서

마크업, Ajax

지침 설명

자동으로 재생되는 음성 정보는 화면낭독기 사용 시 웹 콘텐츠를 이해하는데 혼란을 줄 수 있다. 또한 예기치 못한 소리는 비장애인에게도 방해가 될 수 있다. 자동으로 재생되는 음성정보가 3초 이상일 경우에는, 반드시 콘텐츠 시작 시에 음성 정보를 제어할 수 있도록 한다.

기대 효과

시각 장애 환경에서 화면낭독기로 웹 콘텐츠에 접근하는 경우 혼란이 없다.

3.3 콘텐츠와 배경간의 명도 대비는 4.5:1 이상이 되게 한다.

타 지침과의 관계

KWCAG 2.0: 1.3.3 텍스트 콘텐츠의 명도 대비 / WCAG 2.0: 1.4.3 Contrast (Minimum)

관련 장애

시각

관련 부서

기획/UX, 디자인

지침 설명

저시력, 노안의 경우 명도가 뚜렷하지 않은 콘텐츠를 제대로 인식하기 어렵다. 따라서 콘텐츠와 배경의 명도 대비는 4.5:1 이상으로 제공하는 것이 바람직하다. 4.5:1의 비율은 ISO, ANSI에서 제시하고 있는 최소한의 명도 대비(3:1)와 웹의 주 사용층인 20/40대 중 명도구분이 어려울 수 있는 비율을 함께 적용한 것이다. 배경과 로고는 제외하며 24px 이상이거나 굵은 18px 이상의 큰 글씨는 배경과의 명도 대비가 3:1이어도 무방하다.

기대 효과

저시력, 노안과 같은 시각 장애 환경에서 콘텐츠를 바르게 이해할 수 있다.

4. 충분한 시간을 보장한다.

4.1 시간 제한이 있는 콘텐츠는 지양하며, 서비스 특성상 제공되어야 할 경우, 사용자에게 미리 공지한다.

타 지침과의 관계

KWCAG 2.0: 2.2.1 응답시간 조절 / WCAG 2.0: 2.2.1 Timing Adjustable

관련 장애

시각, 학습, 운동

관련 부서

기획/UX, 디자인, 마크업, Ajax

지침 설명

시간 제한이 있는 콘텐츠는 최대한 제공하지 않는 것이 바람직하다. 그러나 경매나, 온라인 시험과 같이 시간 제한이 있는 시간 제한의 특수성을 띈 서비스는 사전에 시간 제한이 있음을 공지하고, 남은 시간을 알려주어야 한다.

기대 효과

웹 콘텐츠를 탐색하고 이해하는데 상대적으로 시간이 많이 필요한 경우에도 시간에 구애받지 않고 웹 콘텐츠에 접근할 수 있다.

4.2 자동으로 갱신되는 콘텐츠는 사용자가 제어할 수 있게 한다.

타 지침과의 관계

KWCAG 2.0: 2.2.2 정지 기능 제공 / WCAG 2.0: 2.2.2 Pause, Stop, Hide

관련 장애

시각, 학습, 운동

관련 부서

기획/UX, 디자인, 마크업, Ajax

지침 설명

실시간 급상승 검색어처럼 자동으로 갱신되는 콘텐츠는 글 읽는 속도가 느리거나 마우스 조작이 어려운 사람이 원하는 정보에 쉽게 접근할 수 없다. 이 경우에는 자동으로 갱신되는 콘텐츠의 움직임을 사용자가 멈출 수 있도록 마우스나 키보드 포커스가 닿았을 때 자동 갱신을 멈추거나 정지 버튼을 제공해야한다. 또한 지나친 콘텐츠를 탐색할 수 있도록 이전, 다음 버튼을 제공해야 한다.

기대 효과

글을 읽는 속도가 느리거나 빠르게 이동하는 콘텐츠를 이해하기 어려운 환경에서도 콘텐츠를 바르게 이해할 수 있다.

5. 발작을 유발할 수 있는 콘텐츠는 제공하지 않는다.

5.1 1초에 3회 이상 깜빡거림이 있는 콘텐츠는 제공하지 않는다.

타 지침과의 관계

KWCAG 2.0: 2.3.1 깜빡임과 번쩍임 사용 제한 / WCAG 2.0: 2.3.1 Three Flashes or Below Threshold

관련 장애

발작

관련 부서

기획/UX, 디자인, 플래시

지침 설명

깜박거리는 콘텐츠는 광과민성경련 장애가 있는 사람에게 발작을 유발할 수 있다. 뿐만 아니라, 비장애인에게도 핵심 콘텐츠를 이해하는데 장애가 된다. 모니터 해상도와 깜박거리는 빈도수에 따라 차이가 있을 수 있으나 일반적으로 1초에 3회 이상 깜박거리지 않아야 안전하다.

기대 효과

광과민성경련 장애가 있는 사람이 문제 없이 웹 콘텐츠에 접근 할 수 있다.

6. 키보드 접근성을 보장한다.

6.1 마우스 이벤트로 동작하는 기능은 키보드로도 사용이 가능해야 한다.

타 지침과의 관계

KWCAG 2.0: 2.1.1 키보드 사용 보장 / WCAG 2.0: 2.1.1 Keyboard

관련 장애

시각, 운동

관련 부서

기획/UX, 디자인, 마크업, Ajax, 플래시

지침 설명

웹 콘텐츠의 사용성을 높이기 위해 마우스 오버나 드래그&드롭 이벤트를 사용하는 경우가 있다. 이 때는 마우스 이벤트를 없애기 보다 키보드로도 동일한 기능을 수행할 수 있는 방법을 제시하여 키보드만으로 웹 콘텐츠를 운용하는데 무리가 없도록 한다.

기대 효과

시각 및 운동 장애 환경에서 마우스를 사용할 수 없을 때에도 키보드만으로 웹 콘텐츠를 이용하는데 문제가 없다.

6.2 키보드 포커스는 논리적인 순서로 이동해야 한다.

타 지침과의 관계

KWCAG 2.0: 2.1.1 키보드 사용 보장, 2.1.2 초점 이동 / WCAG 2.0: 2.1.1 Keyboard, 2.1.2 No Keyboard Trap, 2.4.3 Focus Order

관련 장애

시각, 운동

관련 부서

마크업, Ajax, 플래시

지침 설명

Tab키로 웹을 탐색할 때 모든 요소에 논리적인 순서로 접근 가능해야 하며, 키보드 포커스가 같은 영역에서 맴돌거나 더 이상의 이동이 어려운 경우가 발생하지 않도록 해야 한다. 아이프레임이나 플래시처럼 기본 맥락과 다른 형태의 콘텐츠가 삽입되더라도 무리 없이 키보드로 탐색 가능해야 한다.

기대 효과

시각 및 운동 장애 환경에서 마우스를 사용할 수 없을 때에도 키보드만으로 웹 콘텐츠를 이용하는데 문제가 없다.

6.3 포커스를 받은 영역은 시각적으로 구분이 가능해야 한다.

타 지침과의 관계

KWCAG 2.0: 2.1.2 초점 이동 / WCAG 2.0: 2.4.7 Focus Visible

관련 장애

운동

관련 부서

기획/UX, 디자인, 마크업, Ajax, 플래시

지침 설명

키보드나 마우스를 통해서 특정 영역이 포커스를 받았을 때, 그 지점을 시각적으로 인지할 수 있어야 한다. 브라우저마다 약간의 차이는 있으나, 텍스트 인풋 박스에 커서가 깜박거리거나 링크 영역에 포커스가 받았을 때 점선 모양이 표시되는 것이 해당된다. this.blur()outline:none 스타일을 지정하여 브라우저에서 기본적으로 제공되는 포커스 표시를 없애지 않도록 한다. 포커스를 인지할 수 있는 다른 방법을 제공한다면 outline:none을 사용하여도 무방하다.

기대 효과

키보드나 마우스를 통해 포커스를 받은 부분이 시각적으로 인지 가능하게 된다.

7. 쉽고 빠른 내비게이션 환경을 보장한다.

7.1 페이지, 프레임, 콘텐츠 블록에는 각 영역을 설명하는 제목을 제공한다.

타 지침과의 관계

KWCAG 2.0: 2.4.2 제목 제공 / WCAG 2.0: 2.4.2 Page Titled

관련 장애

시각

관련 부서

기획/UX, 디자인, 마크업, Ajax

지침 설명

웹 페이지의 제목은 브라우저 가장 위에 나타나며, 현재 보고 있는 웹 페이지의 전체 내용 쉽게 파악할 수 있게 한다. 웹 페이지의 제목은 <title> 요소로 제공한다. 프레임은 웹 페이지 내에 속한 또 다른 웹 페이지이기 때문에 전체 맥락에서 웹 콘텐츠를 이해하는데 어려움이 없도록 title 속성을 이용하여 프레임의 제목을 제공한다. 콘텐츠 블록에는 <h1>~<h6> 요소를 이용하여 콘텐츠를 이해하는데 도움을 줄 수 있는 적절한 제목을 제공한다.

기대 효과

각 영역에 제목을 제공하는 것은 화면낭독기를 이용할 때 원하는 콘텐츠에 빠르게 접근할 수 있는 수단이 될 뿐만 아니라 비장애 환경에서도 웹 콘텐츠를 이해하는데 유용하다.

7.2 반복되는 콘텐츠를 건너뛸 수 있는 링크를 제공한다.

타 지침과의 관계

KWCAG 2.0: 2.4.1 반복 영역 건너뛰기 / WCAG 2.0: 2.4.1 Bypass Blocks

관련 장애

시각

관련 부서

기획/UX, 디자인, 마크업

지침 설명

시각 및 운동 장애 환경에서 순차적으로 웹 콘텐츠를 탐색할 때, 메뉴처럼 페이지마다 반복되는 콘텐츠는 거쳐야 하는 것은 매우 번거로운 일이다. 따라서 콘텐츠 시작 부분에 건너뛰기 링크를 제공하여 핵심 콘텐츠에 바로 접근할 수 있도록 한다. 너무 많은 수의 건너뛰기 링크는 오히려 불편함을 초래하니, 건너뛰기 링크는 3개 이하로 제공하는 것이 가장 바람직하다.

기대 효과

순차적으로 웹 콘텐츠를 탐색해야 하는 장애 환경에서 반복되는 콘텐츠는 건너뛰고 핵심 콘텐츠를 바로 탐색할 수 있다.

7.3 링크 텍스트는 명확하게 제공한다.

타 지침과의 관계

KWCAG 2.0: 2.4.3 적절한 링크 텍스트 / WCAG 2.0: 2.4.4 Link Purpose (In Context)

관련 장애

시각

관련 부서

기획/UX, 디자인, 마크업

지침 설명

링크 텍스트는 '홈으로 '나 '더보기 '와 같이 단독적으로 쓰였을 때 용도나 목적지가 모호하지 않게 해야한다. '캐스트 홈 가기'나 '공지사항 더보기'와 같이 구체적인 목적지를 제시하는 텍스트를 사용하는 것이 좋으며, 구체적인 텍스트를 제공하기에 공간의 제약이 있을 때는 화면낭독기에서만 인식할 수 있는 숨김 텍스트나 툴팁으로 표현되는 title 속성으로 구체적인 텍스트를 제공한다.

기대 효과

화면낭독기를 이용할 경우에도 링크의 용도 및 목적지를 정확하게 파악할 수 있다.

8. 사용자 오류를 예방한다.

8.1 사용자가 의도하지 않은 기능은 실행되지 않게 한다.

타 지침과의 관계

KWCAG 2.0: 3.2.1 사용자 요구에 따른 실행 / WCAG 2.0: 3.2.1 On Focus, 3.2.2 On Input

관련 장애

시각, 운동

관련 부서

기획/UX, 디자인, 마크업, Ajax, 플래시

지침 설명

셀렉트 박스의 옵션을 선택 변경하는 것 만으로 페이지가 전환되거나 새 창이 뜨게 되면 시각 장애 환경에서 변화를 인지할 수 없어 다음 단계로의 진행이 어렵다. 의도하지 않은 기능의 실행은 비장애 환경에서도 사용자에게 혼란을 야기시킬 수 있다. 초점이나 입력을 받은 후에 발생할 수 있는 변화를 사전에 공지하거나, 사용자가 수행한 기능을 완료할 수 있는 버튼을 별도로 제공하는 것이 바람직하다.

기대 효과

의도하지 않는 기능의 방해를 받지 않는다.

8.2 폼 콘트롤 요소의 역할을 명확하게 이해할 수 있는 레이블을 제공한다.

타 지침과의 관계

KWCAG 2.0: 3.4.1 레이블 제공 / WCAG 2.0: 3.3.2 Labels or Instructions

관련 장애

시각

관련 부서

마크업, Ajax

지침 설명

텍스트 입력 박스, 라디오 버튼, 체크박스, 셀렉트 박스가 제공될 때는 각 요소의 역할을 명확하게 이해할 수 있는 label을 함께 제공해 준다. 이 때, 폼 콘트롤 요소의 id값과 labelfor값을 동일하게 연결시키면 화면낭독기에서도 폼 콘트롤 요소를 바르게 인식할 수 있다.

기대 효과

label을 제공함으로써 시각 장애 환경에서도 폼 콘트롤 요소를 바르게 인식할 수 있다.

8.3 잘못된 값이 입력되었을 경우, 사용자에게 알려주고 수정할 수 있게 한다.

타 지침과의 관계

KWCAG 2.0: 3.4.2 오류 정정 / WCAG 2.0: 3.3.1 Error Identification

관련 장애

시각, 운동

관련 부서

기획/UX, Ajax

지침 설명

입력 오류가 발생했을 때, 사용자에게 알려주고 수정할 수 있도록 하는 것이 바람직 하다. 잘못된 부분을 명확하지 않게 표시하거나, 수정되어야 하는 곳에 포커스가 바로 이동되지 않으면 불필요한 동작을 수행해야 하는 상황이 발생한다.

기대 효과

사용자의 입력 오류 발생 시, 불필요한 동작 없이 오류를 바로잡을 수 있다.

8.4 유효한 값을 입력할 수 있도록 안내 텍스트를 미리 제공한다.

타 지침과의 관계

WCAG 2.0: 3.3.5 Help

관련 장애

시각, 비장애

관련 부서

기획/UX, 디자인, 마크업, Ajax

지침 설명

특정 데이터의 입력을 요하는 경우, 유효한 값이 입력될 수 있는 안내 텍스트를 미리 제공하여 사용자의 오류를 최대한 방지할 수 있도록 한다.

기대 효과

사용자의 입력 오류를 방지할 수 있다.

8.5 세션 만료 시, 재 인증 후에도 이전 동작을 무리 없이 수행할 수 있게 한다.

타 지침과의 관계

WCAG 2.0: 2.2.5 Re-authenticating

관련 장애

시각, 운동

관련 부서

기획/UX, Ajax

지침 설명

아무런 동작 없이 일정한 시간이 지나면 보안상의 이유로 세션을 종료시키는 경우가 있다. 이 때, 사용자가 입력한 값이 저장되지 않고 모두 날아가게 되는데 정보 입력의 시간이 오래 걸리는 장애 환경에서는 세션 만료가 다음 단계로의 접근을 어렵게 하는 장애물과 다름 없다. 따라서 세션이 만료되더라도 간단한 재 인증을 거쳐 이전 동작을 무리 없이 수행할 수 있도록 데이터가 저장되어 있어야 한다.

기대 효과

세션 만료 후에도 재 인증을 거쳐 원하는 동작을 쉽게 마무리 할 수 있다.