웹 접근성(Web Accessibility) 4대 원칙

 

 

웹 접근성(Web Accessibility)은 '장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 동등하게 접근하고 이용할 수 있도록 보장한다'는 개념이다. 누구나 정보를 공유할 수 있는 정보 공간, '월드 와이드 웹'에서 웹 접근성이란, 내가 창조하는 인터넷 공간이 차별적인 공간이 되지 않기 위해서는 신경 써야 하는 부분일 것이다. 웹 접근성은 법적 의무사항으로 보장되어 있기도 하다.

 

한국형 웹 콘텐츠 접근성 지침(KWCAG: Korean Web Content Accessibility Guidelines) 중 가장 최근에 개정된 2.1 버전에 소개된 4가지 대원칙이 제시되어있다. 이 내용들을 눈여겨봄으로써 앞으로 어떤 것을 신경 써야 하는지 간단하게나마 살펴보자.

 

 

원칙 1 인식성 (perceivable)

1.1. 대체 텍스트

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

단순히 장식이나 시각적인 형태를 위해 사용되는 콘텐츠의 경우, 보조 기술을 통해 해당 설명을 제공받을 때 오히려 혼란을 일으킬 가능성이 있으므로 대체 텍스트로 공백 문자를 제공해야 한다. (➡️시각 자료)

1.2. 멀티미디어 대체 수단

멀티미디어 콘텐츠에는 자막, 대본 또는 수화를 제공해야 한다. 가장 중요한 요소는 멀티미디어 콘텐츠와 동등한 내용을 제공하는 것이다. (➡️시각 자료)

1.3. 명료성

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

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

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

예를 들어, 특정 요소를 ‘동그란 버튼을 누르시오’ 또는 ‘오른쪽 버튼을 누르시오’라고 가리킬 때, 그 대상이 되는 버튼이 ‘동그란 버튼’ 또는 ‘오른쪽 버튼’이라는 대체 텍스트를 포함하고 있지 않을 경우 시각 장애를 지닌 사용자는 어떤 요소를 지칭하는지 알 수 없다. 따라서 이러한 경우, 가리키고자 하는 요소의 실제 명칭이나 그 요소가 포함하고 있는 대체 텍스트를 사용해 지칭하거나, 불가피하게 색, 크기, 모양, 위치와 같은 정보를 사용해 특정 요소를 가리킬 때는 이를 보완할 수 있는 다른 감각을 이용하는 정보를 제공해야 한다.

또 다른 예로, 온라인 시험 진행 중 사용자에게 비프 음으로 정답 인지 오답인지를 사용자에게 알려주면, 청각 장애 사용자나 스피커가 설치되어 있지 않은 환경에 있는 사용자는 정답과 오답 여부를 확인할 수 없다. 이 경우에 비 프 음과 함께 정답과 오답 여부를 시각적으로 확인할 수 있는 수단을 제공하면 더 많은 사용자가 지시 사항을 인지할 수 있게 된다.

텍스트 및 텍스트 이미지는 배경 간의 충분한 대비를 제공하여, 저시력 장애인, 색각 장애인, 노인 등도 콘텐츠를 인식할 수 있도록 제공해야 한다. 텍스트 및 텍스트 이미지와 배경 간의 명도 대비는 4.5 대 1 이상이어야 한다. (➡️시각 자료)

자동으로 소리가 재생됨으로 인해 화면 낭독 프로그램 사용자가 콘텐츠를 인식하고 사용하는데 방해받지 않아야 한다. 단, 자동으로 재생되는 소리는 3 초 내에 멈추거나, 지정된 키(예 : esc 키)를 누르면 재생을 멈추도록 구현한 경우에 자동 재생음을 허용한다.

이웃한 콘텐츠는 시각적으로 구분되도록 제공해야 한다. 테두리, 구분선, 서로 다른 무늬 적용, 배경색 명도 또는 채도 조정, 줄 간격 또는 글자 간격 조정 등의 방법을 이용한다.

 

원칙 2 운용성 (operable)

2.1. 입력장치 접근성

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

예를 들어, 사용자 아이디, 비밀번호를 입력하는 입력 창과 로그인 버튼 간의 초점 이동 순서는 사용 자 아이디, 비밀번호, 로그인 버튼의 순서이어야 한다. 더 이상 키보드 조작이 불가능한 상태가 되어 다음 사용자 입력 또는 컨트롤 등으로 초점을 이동할 수 없거나 이전 페이지로 초점을 이동할 수 없는 상태가 되지 않아야 한다.

또한 키보드 조작을 통해 버튼이 초점을 받았을 때 이 버튼의 주위에 점선의 테두리가 표시되도록 하여 사용자 입력 등이 조작을 통해 초점을 받았을 때, 해당 컨트롤이 초점을 받았음을 시각적으로 구별할 수 있도록 한다. (➡️시각 자료)

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

예를 들어 콘텐츠에 포함된 모든 컨트롤은 대각선 방향의 길이를 6.0 mm 이상으로 제공하는 것이 바람직하다. 링크, 사용자 입력 및 기타 컨트 롤은 테두리 안쪽으로 1 픽셀 이상의 여백을 두고 이곳에서는 위치 지정 도구의 조 작에 반응하지 않도록 구현하는 것이 바람직하다. (➡️시각 자료)

2.2. 충분한 시간 제공

시간제한이 있는 콘텐츠는 가급적 포함하지 않는 것이 바람직하다. 보안 등의 사유로 시간제한이 반드시 필요할 경우에는 반응 시간이 완료되기 전에 사용자가 시간제한을 해제 또는 연장할 수 있는 수단을 제공해야 한다. 반응 시간 조절 기능은 최소 20초 전에 알려 주어야 한다.

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

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

2.3. 광과민성 발작 예방

깜빡이거나(flashing) 번쩍이는(blinking) 콘텐츠로 인해 발작을 일으키지 않도록 빠르게 깜빡이거나 번쩍이는 콘텐츠를 초당 3∼50 회 주기로 제공하지 않아야 한다.

특히, 10 인치 이상의 기기에서는 콘텐츠에 의한 광과민성 발작 가능성을 주의해야 하므로 화면에 표시된 번쩍이는 콘텐츠가 차지하는 면적의 합이 화면 전체 면적의 10%를 넘지 않아야 한다. 콘텐츠의 번쩍이는 시간을 3 초 미만으로 제한하면 지속적인 번쩍임으로 인한 사용자의 발작을 예방하면서도 콘텐츠의 중요성을 알릴 수 있다. 

2.4. 쉬운 내비게이션

페이지가 로드되거나 갱신될 때마다 모든 웹페이지에 공통적으로 들어있는 메뉴 등을 다시 도달하게 되는 키보드 사용자와 화면 낭독 프로그램 사용자가 겪게 되는 불편을 방지하기 위해, 사용자가 메뉴 등과 같은 반복 영역을 바로 건너뛰어 핵심 영역으로 직접 이동할 수 있는 수단을 제공해야 한다.

예를 들어, 웹 페이지가 제공하는 핵심 영역이 위치 한 곳으로 직접 이동하는 건너뛰기 링크를 제공한다. 건너뛰기 링크는 웹 페이지의 가장 앞에 제공한다. 여러 개의 건너뛰기 링크를 제공하는 경우에는 핵 심 영역으로 이동하기 위한 건너뛰기 링크를 가장 먼저 나타내도록 한다. 

페이지, 프레임, 콘텐츠 블록의 제목은 간단명료해야 하며, 해당 페이지, 프레임, 콘텐츠 블록을 유추할 수 있도록 제공해야 한다.

예를 들어, 여러 개의 웹 페이지가 열려 있는 경우 사용자(예 : 시각 장애인, 지적 장애인, 중증 지체 장애인 등)는 제목을 통해 웹 페이지를 선택하므로 모든 웹 페이지에는 해당 페이지를 간단명료하게 설명한 제목을 제공해야 한다. 웹 페이지 제목은 유일하고 서로 다르게 제공해야 한다. 팝업 창에도 제목을 제공해야 하고, 아무런 내용이 없는 프레임에도 '빈 프레임' 등과 같이 제목을 제공한다. 본문이 없는 콘텐츠 블록에는 제목을 붙이지 않는다.

링크는 주변 맥락을 통하여 용도나 목적지를 명확하게 이해할 수 있는 링크 텍스트를 제공해야 한다. 이미지 링크를 제공하는 경우에는 URL에 관한 정보를 제공하는 텍스트와 URL로 이동하는 이미지 링크는 하나의 링크로 구성하는 것이 바람직하다. 이 경우, 이미지 링크의 대체 텍스트는 공백 문자로 제공해야 한다.

 

원칙 3 이해성 (understandable)

3.1. 가독성

다국어를 지원하는 화면 낭독 프로 그램을 사용하는 경우, 텍스트 콘텐츠의 언어 정보를 화면 낭독 프로그램으로 전달하기 때문에 콘텐츠에 적용되는 기본 언어를 반드시 명시해야 한다.

3.2. 예측 가능성

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

3.3. 콘텐츠의 논리성

웹 페이지를 구성하는 모든 콘텐츠는 사용자가 그 내용을 이해할 수 있도록 선형 구조로 작성되어야 한다. 스타일 시트를 사용하면 웹 페이지를 구성하는 콘텐츠의 순서를 변경하지 않고도 화면에 표시되는 콘텐츠의 배치를 임의로 변경하더라도 웹 페이지를 구성하는 콘텐츠의 나열 순서는 그 맥락을 이해할 수 있도록 논리적으로 구성해야 한다. 

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

3.4. 입력 도움

사용자 입력 근처에 사용법을 알려주는 레이블을 제공해야 한다.

레이블과 사용자 입력 간의 관계를 보조 기술이 인식할 수 있도록 대응시키면 화면 낭독 프로그램을 사용하는 시각 장애인에게 해당 컨트롤이 어떤 용도로 사용되는지를 알려줄 수 있으나 단순히 텍스트로만 제공할 경우 잘못된 데이터의 입력을 유발할 수 있다.

입력 서식 작성 시, 사용자의 실수로 오류가 발생할 경우 이를 정정할 수 있는 방법을 제공해야 한다. 또 온라인 서식에서 오류가 발생하는 경우, 사용자에게 오류 가 발생한 위치와 오류를 유발하게 된 이유 등에 관한 정보를 알려 주어야 한다.

예를 들어, 이름, 주소, 전화번호, 이메일 주소를 입력하도록 구성한 입력 서식에서 일부 항목을 기입하지 않고 제출하였을 경우, 어떤 항목의 입력이 누락되었는지를 알려 주어야 한다. (➡️시각 자료)

 

원칙 4 견고성 (robust)

4.1. 문법 준수

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

4.2. 웹 애플리케이션 접근성

웹 콘텐츠를 사용하는 데 필요한 플러그인 또는 웹 페이지의 기능을 실행하는 데 필요한 웹 애플리케이션은 사용자가 웹 페이지에 접근하여 사용하는 것을 방해하지 않아야 한다. 국내의 보조 기술로 접근이 불가능한 웹 애플리케이션은 가능한 한 사용하지 않는 것이 좋으며, 꼭 사용해야 하는 경우에는 해당 웹 애플리케이션에 대한 대체 수단을 제공해야 한다

 

 

 

 

 

참고자료

한국형 웹 콘텐츠 접근성 지침 2.1(Korean Web Content Accessibility Guidelines 2.1)

HTML 제목 태그의 이해

WAI-ARIA 가이드라인(레진)

table 태그 웹 접근성 - caption, scope 중심으로