Chapter 1. 웹 접근성의 이해

1. 웹 접근성

1.1. 웹 접근성이란?

‘지능정보화 기본법’에 따라 장애인이나 고령자 분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용할 수 있도록 보장하는 것’

장애란? (wikipedia)

1. 신체나 정신에 기능적으로 문제가 있어서 제 기능을 하지 못하는 것.

2. 자신 주변의 세상과 소통하거나 특정 활동을 하기에 어렵게 만드는 조건.

1.2. 웹 접근성의 이해

장애인차별금지 및 권리구제 등에 관한 법률 (약칭 장애인차별금지법) 제20조(정보접근에서의 차별금지) [개정 2016. 2. 3.] ① 개인ㆍ법인ㆍ공공기관(이하 이 조에서 “개인 등”이라 한다)은 장애인이 전자정보와 비전자정보를 이용하고 그에 접근함에 있어서 장애를 이유로 제4조제1항제1호 및 제2호에서 금지한 차별행위를 하여서는 아니 된다. 제21조(정보통신•의사소통에서의 정당한 편의제공의무) [개정 2016. 2. 3., 2017. 9. 19.] ① (중략) 행위자 등이 생산·배포하는 전자정보 및 비전자정보에 대하여 장애인이 장애인 아닌 사람과 동등하게 접근·이용할 수 있도록 한국수어, 문자 등 필요한 수단을 제공해야 한다. 시행령 제 14조(정보통신•의사소통에서의 정당한 편의제공의 단계적 범위 및 편의의 내용) ② 법 제 21조 제 1항에 따라 제공하여야 하는 필요한 수단의 구체적인 내용은 다음 각 호와 같다.

1. 누구든지 신체적·기술적 여건과 관계없이 웹사이트를 통하여 원하는 서비스를 이용할 수 있도록 접근성이 보장되는 웹사이트

2. 한국수어 통역사, 음성통역사, 점자자료, 점자정보단말기, 큰 활자로 확대된 문서, 확대경, 녹음테이프, 표준텍스트파일, 개인형 보청기기, 자막, 한국수어 통역, 인쇄물음성변환출력기, 장애인용복사기, 화상전화기, 통신중계용 전화기 또는 이에 상응하는 수단

(https://www.law.go.kr/법령/장애인차별금지및권리구제등에관한법률)

지능정보화 기본법 [시행 2020. 12. 10.] 제46조(장애인ㆍ고령자 등의 지능정보서비스 접근 및 이용 보장) ① 국가기관등은 정보통신망을 통하여 정보나 서비스를 제공할 때 장애인ㆍ고령자 등이 웹사이트와 이동통신단말장치(「전파법」에 따라 할당받은 주파수를 사용하는 기간통신역무를 이용하기 위하여 필요한 단말장치를 말한다. 이하 같다)에 설치되는 응용 소프트웨어 등 대통령령으로 정하는 유ㆍ무선 정보통신을 쉽게 이용할 수 있도록 접근성을 보장하여야 한다. ② 지능정보서비스 제공자는 그 서비스를 제공할 때 장애인ㆍ고령자 등의 접근과 이용의 편익을 증진하기 위하여 노력하여야 한다. ③ 정보통신 또는 지능정보기술 관련 제조업자는 정보통신 또는 지능정보기술 관련 기기 및 소프트웨어(이하 “지능정보제품”이라 한다)를 설계, 제작, 가공할 때 장애인ㆍ고령자 등이 쉽게 접근하고 이용할 수 있도록 노력하여야 한다. 이 경우 장애인ㆍ고령자 등이 별도의 보조기구 없이 지능정보제품을 이용할 수 없는 경우에는 지능정보제품이 보조기구와 호환될 수 있게 노력하여야 한다.

(https://www.law.go.kr/법령/지능정보화기본법)

지능정보화 기본법 시행령 [시행 2020. 12. 10.] 제34조(장애인·고령자 등의 지능정보서비스 접근 및 이용 보장) ① 법 제46조제1항에서 "웹사이트와 이동통신단말장치(「전파법」에 따라 할당받은 주파수를 사용하는 기간통신역무를 이용하기 위하여 필요한 단말장치를 말한다. 이하 같다)에 설치되는 응용 소프트웨어 등 대통령령으로 정하는 유ㆍ무선 정보통신"이란 다음 각 호의 유ㆍ무선 정보통신을 말한다.

1. 웹사이트

2. 이동통신단말장치에 설치되는 응용 소프트웨어

제36조(정보통신접근성 품질인증 기준) ① 법 제47조제1항에 따른 정보통신접근성 품질인증(이하 “정보통신접근성 품질인증”이라 한다)의 기준은 정보통신접근성 품질인증 대상인 유·무선 정보통신에 관련된 다음 각 호의 기준을 말한다.

1. 모든 콘텐츠가 시각ㆍ청각 등의 장애유형 또는 나이에 관계없이 사용자가 인식할 수 있을 것

2. 모든 콘텐츠가 시각ㆍ청각 등의 장애유형 또는 나이에 관계없이 사용자가 운용할 수 있는 방법으로 제시되어 있을 것)

3. 사용자가 쉽게 이해할 수 있도록 콘텐츠 제어방식을 구성할 것

4. 다양한 방법의 기술로 콘텐츠에 접근할 수 있도록 견고하게 만들 것

② 제1항에 따른 정보통신접근성 품질인증의 세부기준은 과학기술정보통신부령으로 정한다.

(https://www.law.go.kr/법령/지능정보화기본법시행령)

1. 인식의 용이성

1. 운용의 용이성

1. 이해의 용이성

1. 견고성

1.3. 다양한 장애 환경

1.3.1. 시각적 측면의 장애 환경

• 전맹 (앞을 전혀 볼 수 없는 상태)

• 저시력 (대상이 흐릿하게 보이는 상태)

• 색맹, 색약 (색상을 분별하는 데 어려움이 있는 상태)

• 고령자 (노화로 인한 시력 저하)

• 일시적인 시각 기능 불능 및 저하 (예: 운전 중)

• 장치 이상 및 부재 (예: 어두운 조명, 모니터 성능)
 

1.3.2. 이동성 측면의 장애 환경

• 지체장애 및 중증 운동 장애 (신체의 움직임에 제한이 있는 상태)

• 손 운동 장애와 같이 키보드나 마우스를 이용하기 어려운 상태

• 고령자 (노화로 인한 신체 기능 저하)

• 일시적인 신체 기능 불능 및 저하

• 장치 이상 및 부재 (예: 키보드, 마우스)
 

1.3.3. 청각 측면의 장애 환경

• 농 (청각 능력이 거의 없는 상태)

• 난청 (보청기로 청력 보완이 가능한 상태)

• 고령자 (노화로 인한 청각 기능 저하)

• 장치 이상 및 부재 (예: 스피커)

• 지나친 소음

1.3.4. 인지적 측면의 장애 환경

• 발달 장애 (읽기나 문장 이해에 어려움이 있는 상태)

• 언어 및 학습 장애

• 사용자의 경험치 (예: 신규 사용자, 사용법을 빠르게 습득하기 어려운 환경, 웹페이지를 자주 사용하지 않는 경우, 외국어가 자유롭지 않은 경우 등)

1.4. 장애 환경에 대응하는 프론트엔드 웹 개발자의 역할

1.4.1.시각 장애 환경 대응

• 앞이 전혀 보이지 않는 사용자
• 스크린 리더를 이용해 모든 웹 콘텐츠의 내용을 파악할 수 있도록 적절한 대체 텍스트를 제공합니다.
• 콘텐츠 배경음은 자동 재생되지 않습니다. 스크린 리더 이용자가 콘텐츠를 이해하는 데 방해될 수 있기 때문입니다.
• 표는 셀 제목을 명시해 내용과 구조에 대한 정보를 제공합니다.
• 사용자가 입력하는 서식 근처에는 해당 용도를 설명하는 레이블을 제공합니다.

• 저시력 사용자
• 콘텐츠 각 영역은 분명하게 구별되도록 만듭니다. 텍스트 콘텐츠와 배경의 명도 대비, 테두리, 구분 선, 무늬, 줄 및 글자 간격 등의 조절이 필요합니다.
• 모든 기능은 키보드 만으로 조작할 수 있어야 합니다.

• 색 구분이 어려운 사용자
• 색에 상관없이 차트나 그래프 등을 패턴, 굵기 등의 다양한 방법으로 구분합니다.

1.4.2.이동성 장애 환경 대응

• 신체 움직임에 제한이 있어 마우스와 키보드의 정교한 사용이 어려운 사용자
• 키보드에 의한 초점 이동은 이용자가 예측할 수 있는 논리적인 순서로 이뤄져야 합니다.
예시) 초점 이동이 더 이상 불가능하거나 이전 페이지로 돌아갈 수 없는 상태가 되지 않도록 합니다.
예시) 초점 받은 버튼은 테두리 등을 설정해 시각적으로 구분합니다.

1.4.3.청각 장애 환경 대응

• 소리를 들을 수 없는 사용자
• 멀티미디어 콘텐츠는 같은 내용의 자막, 대본, 수어를 제공합니다.

1.4.4.인지 장애 환경 대응

• 콘텐츠를 이해하는 데 어려움을 겪는 사용자
• 시간제한이 있는 콘텐츠는 지양합니다. 시간에 상관없이 이용할 수 있도록 응답시간을 조절할 수 있어야 합니다.
• 사용자가 인지하지 못한 상황에서 의도하지 않은 기능은 실행되지 않도록 합니다.
예시) 새 창, 팝업 열림은 경고를 해주고, 창을 껐을 때 바로 종료해서 혼란을 줄입니다.
• 웹페이지를 구성하는 콘텐츠는 논리적인 순서로 구성합니다.

1.4.5. 공통 준수 사항

• 지시 사항은 모양, 크기, 위치, 방향, 색, 소리 등과 관계없이 파악할 수 있어야 합니다.
예시) ‘동그란 버튼을 누르시오’라고 들었을 때 시각 장애를 지닌 사용자는 어떤 버튼을 가리키는지 알 수 없습니다. 대체 텍스트를 제공하거나 다른 감각을 활용해 이용할 수 있는 정보를 제시합니다.
예시) 온라인 시험을 본다면 정답과 오답 여부를 음성 외에도 시각적으로 확인할 수 있도록 합니다.

• 사용자 입력 및 컨트롤은 조작이 가능하도록 제공합니다. 터치스크린 이용 시 손 떨림이 있는 사용자와 시각 장애인도 컨트롤을 용이하게 찾을 수 있어야 합니다.

• 스크롤이나 자동 갱신되는 콘텐츠의 경우, 정지 기능과 전후 페이지를 선택할 수 있는 컨트롤을 제공합니다. 시각 장애나 지적 장애를 가진 이용자, 고령자에게 빠르게 변화하는 콘텐츠는 이용하는데 어려울 수 있습니다.

• 3초 이상 깜빡거리거나 번쩍이는 자동 재생 콘텐츠는 제공하지 않습니다.

• 반복되는 영역은 건너뛸 수 있는 방법을 제공합니다.

• 페이지, 프레임, 콘텐츠 블록에 적절한 제목을 제공합니다. 제목은 간단하고 유일하며 해당 페이지를 짐작할 수 있어야 합니다.

• 링크 텍스트는 용도나 목적지를 직관적으로 이해할 수 있도록 제공합니다.

• 웹 페이지에서 주로 사용하는 기본 언어를 정확하게 명시합니다.
예시) 한국어를 주로 사용하는 웹 페이지의 경우 <html lang="ko" ... >

• 서식 입력 시 오류가 생긴다면 이용자가 정정할 수 있는 방법을 제공합니다.
예시) 일부 항목을 기입하지 않으면 입력칸으로 돌아가는 기능을 제공합니다.

• 마크업 문법을 준수하여 콘텐츠 누락이 없도록 합니다.

• 콘텐츠에 포함된 웹 애플리케이션은 접근할 수 있어야 합니다.
• 웹 애플리케이션은 웹 콘텐츠 내에서 어떠한 기능을 하도록 짜여진 소프트웨어의 일종입니다.