표준은 원칙, 지침, 검사항목의 3단계로 구성되어 있다. 본 표준을 준수할 경우, 장애인, 고령자 등이 비장애인, 젊은이 등과 동등하게 웹사이트에서 제공하는 콘텐츠를 인식하고, 이를 운영하고 이해할 수 있다.

- 한국형 웹 콘텐츠 접근성 지침 2.2

KWCAG(한국형 웹 콘텐츠 접근성 지침)는 WCAG(Web Content accessibility guidelines)를 한국 상황에 맞게 작성한 지침입니다. 2005년 1.0 버전이 만들어졌고 2010년 2.0, 2015년 2.1, 2022년 2.2 버전이 발표됐습니다.

KWCAG는 4가지 원칙과 각 원칙을 준수하기 위한 지침, 지침의 준수여부를 확인하기 위한 검사항목으로 구성되어 있습니다. 웹 접근성 인증 심사 시에는 심사 기관마다 평가 기준은 조금씩 다르지만 기본적으로 KWCAG 검사항목을 기준으로 평가합니다.

이번 장에서는 KWCAG에서 다루는 원칙, 지침, 검사항목을 개발 단계에서 어떻게 적용할 수 있는지 살펴봅니다.

인식의 용이성

대체 텍스트

적절한 대체 텍스트 제공

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

예시

• Button 컴포넌트 사용 시 icon 이미지만 설정하는 것보다는 기능을 설명하는 텍스트를 추가하는 것이 좋습니다. 톱니 아이콘이 설정 기능을 제공한다는 것은 일부 사용자에게는 익숙하지만 그렇지 않은 경우도 있습니다.

  첫 번째 Button 컴포넌트처럼 텍스트를 추가해 주면 어떤 것을 설정하는 것인지 쉽게 인지할 수 있고 스크린 리더에서도 기능 정보를 읽어줄 수 있습니다.

• 화면 내 공간의 문제로 Button 컴포넌트에 icon 이미지만 표시하는 경우에는 스크린 리더 사용자가 인지할 수 있게 레이블 정보를 제공해야 합니다.

  마우스 사용자를 위해 툴팁 텍스트 정보를 제공하기도 하는데 스크린 리더에 따라 툴팁 텍스트를 읽지 않는 경우도 있습니다. 툴팁 텍스트와 별도로 레이블 정보를 제공해야 합니다.

넥사크로 N

• Environment 오브젝트 accessibilitydescreadtype 속성에서 스크린 리더에서 읽을 대상 범위를 설정할 수 있습니다.

  text 속성을 가지는 컴포넌트(Button, CheckBox 등)는 해당 정보를 accessibilitylabel 정보로 사용합니다. accessibilitylabel 속성값을 따로 설정하지 않아도 시각적으로 보이는 텍스트 기준으로 스크린 리더에서 읽어줍니다.

  하지만 text 속성이 없는 컴포넌트(Calendar, Grid 등)는 적절한 accessibilitylabel 속성값을 설정해 주어야 스크린 리더에서 컴포넌트가 어떤 의미인지 알 수 있습니다.

• accessibilitydescreadtype 속성에서 설정한 정보 외 UI 컴포넌트 특성에 따라 상태나 입력값에 대한 정보를 스크린 리더에서 읽을 수 있도록 정보를 제공합니다.

• 컴포넌트가 의미를 가지지 않고 시각적인 이미지로만 사용된 경우에는 accessibilityenable 속성값을 false로 설정해 스크린 리더에서 읽지 않도록 설정합니다.

멀티미디어 대체수단

자막 제공

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

넥사크로 N

• VideoPlayer 컴포넌트에서 별도 자막 파일을 로딩하는 기능은 지원하지 않습니다.

  캡션이 포함된 영상 콘텐츠를 사용해 주세요.

• WebBrowser, WebView 컴포넌트에서 외부 동영상 파일 로딩 시에는 레이블을 통해 영상 정보를 제공할 수 있습니다.

적응성

표의 구성

표는 이해하기 쉽게 구성해야 한다.

예시

• Grid 컴포넌트의 head, body 밴드에 2개 이상의 Row를 추가할 수 있습니다.

  시각적으로는 한정된 공간에 많은 정보를 보여줄 수 있지만 스크린 리더에서는 현재 Cell에서 참조하는 head 정보를 명확하게 알 수 없으며 해당 칼럼의 head 정보를 모두 출력합니다.

  아래 그림에서 2개의 head 밴드 Row를 가진 Grid 컴포넌트의 첫 번째 Cell은 "A 100"으로 인식되어야 하지만 head 정보를 모두 출력해 스크린 리더에서는 "A C 100"으로 읽고 사용자는 해당 값이 어떤 정보인지 명확하게 알 수 없습니다.

넥사크로 N

• Grid 컴포넌트의 head, body 밴드의 정보를 구분해 스크린 리더에서 읽습니다.

• body 밴드의 경우 head 셀 text 속성값을 읽고 body 셀 text 속성값을 읽습니다.

• head 밴드를 2줄 이상으로 설정한 경우 명확한 정보를 확인하기 어렵습니다. head 밴드는 1줄로 명확하게 구성합니다.

콘텐츠의 선형구조

콘텐츠는 논리적인 순서로 제공해야 한다.

예시

• 화면에서 스타일을 제거했을 때 원하는 순서대로 표시되는지 확인합니다.

  아래 이미지처럼 스타일을 제거했을 때 컴포넌트의 순서가 바뀌어 표시된다면 키보드 사용자와 스크린 리더 사용자에게 잘못된 정보가 전달될 수 있습니다.

넥사크로 N

• 키보드를 사용해 콘텐츠 이용 시 논리적인 순서로 접근할 수 있어야 합니다.

  Tab 키 입력 시 순서 바로잡기

명확한 지시사항 제공

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

넥사크로 N

• 지시문과 스크린 리더에 제공하는 정보는 일치해야 합니다.

  예를 들어 "아래쪽 화살표 버튼을 클릭하세요"라는 지문이 있다면 해당 이미지 또는 버튼의 accessibilitylabel 속성값은 "아래쪽 화살표"로 설정해야 합니다.

명료성

색에 무관한 콘텐츠 인식

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

예시

• 색상만으로 특정 정보를 전달해서는 안됩니다.

  아래 그림에서는 "버그"라는 텍스트로 정보를 전달하고 있으며 배경색이 "빨간색"인 경우는 긴급한 요구사항임을 의미합니다. 빨간색으로만 표시된 정보는 색을 구별하지 못하는 사용자에게도 전달되지 못하며 스크린 리더 사용자를 위한 추가적인 텍스트 정보를 전달해야 합니다.

  모두가 쉽게 인지할 수 있도록 텍스트를 "(긴급)버그" 같은 식으로 변경할 수 있습니다.

넥사크로 N

• 색 정보는 꾸밈 요소나 추가적인 정보로만 사용합니다.

  텍스트로 충분한 정보를 제공하고 시각적으로 쉽게 인지할 수 있게 색상 정보를 추가해야 합니다.

자동 재생 금지

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

넥사크로 N

• VideoPlayer 컴포넌트 사용 시 autoplay 속성값을 true로 설정하지 않습니다.

• VideoPlayer 컴포넌트의 showcontrolbar 속성값을 true로 설정해 기본 컨트롤이 표시될 수 있도록 합니다.

  기본 컨트롤을 표시하지 않을 경우 Button 컴포넌트 등을 사용해 사용자가 영상을 제어할 수 있는 기능을 제공합니다.

텍스트 콘텐츠의 명도 대비

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

예시

• 테마, 스타일 설정 시 색 명암을 분석할 수 있는 소프트웨어를 사용해 명도 대비를 체크합니다.

  무료로 배포되는 "색 명암 분석기" 등을 설치해 사용할 수 있습니다.

  https://www.tpgi.com/color-contrast-checker/

넥사크로 N

• 컴포넌트 테마는 공통으로 사용하고 개별 화면에서 스타일을 지정하지 않도록 합니다.

콘텐츠 간의 구분

이웃한 콘텐츠는 구별될 수 있어야 한다.

운영의 용이성

입력장치 접근성

키보드 사용 보장

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

넥사크로 N

• HTML에서 제공하지 않는 UI 컴포넌트 역시 키보드로 사용할 수 있어야 하며 사용할 수 있는 키보드 정보를 가이드 형태 또는 각 컴포넌트 접근 시 추가 정보로 제공해야 합니다.

  InitValueDefinition 기능을 사용해 각 컴포넌트별로 필요한 정보를 accessibilityaction 속성값으로 설정하고 공통으로 사용할 수 있습니다.

• 컴포넌트 도움말 항목에서 Basic Key Action, Accessibility Key Action 정보를 제공합니다.

  Basic Key Action은 접근성 환경 설정을 활성화하지 않았을 때 키보드 입력 시 동작을 설명하고

  Accessibility Key Action은 접근성 환경을 활성화했을 때 키보드 입력 시 동작을 설명합니다.

  Accessibility Key Action 항목에서 전체 컴포넌트의 Key Action 정보를 확인할 수 있습니다.

초점 이동과 표시 / 2.2(수정)

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

예시

• 초점이 이동한 상태에 대한 스타일 설정 시 경계선(border)이나 텍스트 꾸밈을 설정할 수 있습니다.

넥사크로 N

• 컴포넌트의 상태 변경 시 색 정보 외에 텍스트 밑줄 같은 시각적인 정보를 제공합니다.

조작 가능

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

넥사크로 N

• UI 컴포넌트 배치 시 기본 크기를 설정할 수 있습니다.

  프로젝트 탐색창에서 [TypeDefinition > Objects]를 선택하고 컴포넌트의 Width, Height 기본값을 변경할 수 있습니다.

• VideoPlayer 컴포넌트의 showcontrolbar 속성값을 true로 설정해 기본 컨트롤이 표시될 수 있도록 합니다.

문자 단축키 / 2.2(신규)

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

예시

• 웹 애플리케이션 단축키와 웹 브라우저 단축키가 충돌할 수 있습니다.

  충돌을 우회하더라도 웹 브라우저 업데이트 시 문제가 발생할 수 있으므로 같은 단축키는 사용하지 않도록 주의합니다.

넥사크로 N

• 컴포넌트의 hotkey 속성값 설정 시 2개 이상의 키를 조합해서 설정할 수 있습니다.

충분한 시간 제공

응답시간 조절

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

예시

• 보안 등의 사유로 자동으로 로그아웃 기능을 제공하는 사이트가 있습니다.

  사용자가 정보를 인지하고 시간을 연장할 수 있는 기능을 제공해야 합니다.

넥사크로 N

• setTimer 메서드로 시간제한을 설정한 경우 사용자가 시간을 연장할 수 있어야 합니다.

정지 기능 제공

자동으로 변경되는 콘텐츠는 움직임을 제어할 수 있어야 한다.

예시

• 슬라이드 형태로 표시되는 콘텐츠는 사용자가 조작할 수 있는 컨트롤을 제공해야 합니다.

넥사크로 N

• setTimer 메서드로 자동 변경되는 콘텐츠는 사용자가 멈출 수 있어야 합니다.

광과민성 발작 예방

깜빡임과 번쩍임 사용 제한

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

넥사크로 N

• VideoPlayer 컴포넌트에서 로딩하는 동영상뿐 아니라 ImageViewer 컴포넌트 또는 image를 로딩하는 컴포넌트에서도 반복되며 번쩍이는 이미지는 사용하지 않아야 합니다.

쉬운 내비게이션

반복 영역 건너뛰기

콘텐츠의 반복되는 영역은 건너뛸 수 있어야 한다.

넥사크로 N

• 페이지 로딩 후 Tab 키 또는 ↓ 키 입력 시 본문 내용으로 바로 갈 수 있는 링크영역을 표시합니다.

제목 제공

페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

넥사크로 N

• 웹 브라우저 탭에 표시되는 제목은 각 프레임, Form 오브젝트의 titletext 속성값이 "-"로 연결되어 처리됩니다.

  스크린 리더에서는 "-"는 읽지 않습니다.

• 상위 오브젝트의 showcascadetitletext 속성값이 true로 설정되어 있어야 하위 오브젝트의 titletext 속성값이 표시됩니다.

• "사이트 제목, 페이지 제목" 순으로 읽고 싶다면 MainFrame 오브젝트의 titletext 속성값을 설정하고 ChildFrame 오브젝트의 titletext 속성값은 설정하지 않습니다. 그리고 각 Form 오브젝트의 titletext 속성값을 설정합니다.

  "페이지 제목, 사이트 제목" 순으로 읽고 싶다면 MainFrame 오브젝트의 titletext 속성값을 사용자가 메뉴 선택 시 동적으로 업데이트할 수 있습니다.

적절한 링크 텍스트

링크 텍스트는 용도나 목적을 이해할 수 있도록 제공해야 한다.

예시

• 대제목이 앞에 있고 항목이 표시되는 경우 스크린 리더 사용자가 대제목을 인지하기 어려울 수 있습니다.

  각 항목에서 구분 정보를 같이 제공합니다.

• 한국어 설정 시 영어로 제공된 정보는 의도되지 않은 발음으로 읽을 수 있습니다.

  한국어로 레이블을 명확하게 설정해 주세요.

넥사크로 N

• Button을 링크 형태로 제공할 경우에는 accessibilityrole 속성값을 "link"로 변경해주어야 합니다.

고정된 참조 위치 정보 / 2.2(신규)

전자출판문서 형식의 웹 페이지는 각 페이지로 이동할 수 있는 기능이 있어야 하고, 서식이나 플랫폼에 상관없이 참조 위치 정보를 일관되게 제공ㆍ유지해야 한다.

예시

• 페이지 정보 표시는 사이트 내 모든 페이지에서 일관성을 유지해야 합니다.

넥사크로 N

• Grid 컴포넌트에 바인딩된 데이터를 페이지 형태로 보이거나 "더보기" 버튼을 배치할 경우 일관성 있게 제공해야 합니다.

입력 방식 / 2.2(신규)

단일 포인터 입력 지원 / 2.2(신규)

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

넥사크로 N

• 다중 포인터로 동작하는 기능은 단일 포인터 또는 별도 기능 버튼을 제공해 같은 동작을 할 수 있어야 합니다.

포인터 입력 취소 / 2.2(신규)

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

넥사크로 N

• onlbuttondown 이벤트 대신 onclick 이벤트를 사용합니다.

  Grid 컴포넌트처럼 onclick 이벤트가 제한되는 경우에는 onlbuttondown 이벤트 대신 onlbuttonup 이벤트에서 Grid 컴포넌트 영역을 벗어나고 있는지 확인한 후 필요한 기능을 처리합니다.

레이블과 네임 / 2.2(신규)

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

넥사크로 N

• 필수 입력하는 항목은 accessibilitylabel 속성값 설정 시 다음과 같은 순서로 지정합니다.

  "필수입력 [레이블]"

  스크린 리더에서는 "필수입력 [레이블] 편집창"으로 읽습니다.

동작기반 작동 / 2.2(신규)

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

넥사크로 N

• 동작 기반 기능을 추가할 때는 UI만으로 조작할 수 있는 기능을 구현한 후 동작 기반 기능을 추가합니다.

이해의 용이성

가독성

기본 언어 표시

주로 사용하는 언어를 명시해야 한다.

넥사크로 N

• Environment의 locale 속성값에 따라 HTML 태그의 lang 속성이 설정됩니다.

  한국어일 경우 lang 속성값을 "ko_KR"로 설정합니다.

예측 가능성

사용자 요구에 따른 실행

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

넥사크로 N

• 자동으로 선택되거나 편집 상태로 전환되는 속성 사용 시에는 해당 정보를 사전에 사용자가 인지할 수 있도록 제공해야 합니다.

  Grid 컴포넌트의 autoenter 속성, 텍스트 편집 영역을 가진 컴포넌트의 autoselect, autoskip 속성

• 화면 로딩 시 팝업창 형태로 공지문이 표시되지 않도록 합니다.

  필요한 경우에는 창을 닫을 수 있는 방법에 대한 정보를 제공하고 창이 닫히면 적절한 위치에 초점이 이동될 수 있게 합니다.

찾기 쉬운 도움 정보 / 2.2(신규)

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

넥사크로 N

• 페이지 정보가 담긴 푸터 영역을 Div 컴포넌트로 설정한 경우 accessibilityrole 속성값을 "heading"으로 설정하고 빠르게 접근할 수 있습니다.

입력 도움

오류 정정

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

예시

• 입력되지 않는 정보를 알려주고 해당 위치로 초점을 이동합니다.

넥사크로 N

• 입력값 오류 시 alert 메서드를 실행하고 오류를 정정해야 하는 컴포넌트에 포커스를 이동할 수 있습니다.

레이블 제공

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

넥사크로 N

• 컴포넌트 단위로 레이블(accessibilitylabel)을 설정할 수 있으며 Grid 컴포넌트의 경우 head, body, cell 단위로 레이블을 설정할 수 있습니다.

• accessibilitylabel 속성값은 참조값 형식으로 다른 컴포넌트의 레이블을 참조할 수 있습니다.

  예를 들어 Edit 컴포넌트의 accessibilitylabel 속성값을 "@Static01"로 설정하면 Static 컴포넌트의 text 속성값 또는 accessibilitylabel 속성값을 Edit 컴포넌트의 accessibilitylabel 속성값으로 처리합니다.

접근 가능한 인증 / 2.2(신규)

인증 과정은 인지 기능 테스트에만 의존해서는 안 된다.

넥사크로 N

• DataObject 오브젝트를 사용해 외부에서 제공하는 인증 API에 접근할 수 있습니다.

반복 입력 정보 / 2.2(신규)

반복되는 입력 정보는 자동 입력 또는 선택 입력할 수 있어야 한다.

예시

• 개인화 설정을 통해 맞춤 설정을 할 수 있습니다.

넥사크로 N

• Environment의 Cookie나 Variable 또는 Application의 Dataset, Variable, DataObject를 활용해 반복되는 정보를 관리하고 자동으로 채워질 수 있도록 설정할 수 있습니다.

견고성

문법 준수

마크업 오류 방지

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

넥사크로 N

• generate 된 js 파일과 라이브러리를 통해 HTML 파일을 생성합니다. 기본적인 마크업 오류에 대해서는 제품에서 보장하고 있습니다.

  부트스트랩 파일을 수정하는 경우 마크업 오류가 없도록 주의해야 합니다.

웹 애플리케이션 접근성

웹 애플리케이션 접근성 준수

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

넥사크로 N

• WebBrowser, WebView 컴포넌트를 사용해 웹 애플리케이션을 로딩하는 경우 해당 웹 애플리케이션에 대한 기본적인 정보를 제공합니다.

  로딩하는 웹 애플리케이션은 접근성을 지원해야 하며 지원하지 못하는 경우 해당 정보를 대체할 수 있는 정보를 제공해야 합니다.