웹 접근성(web accessibility)이란? 적용 방법

웹 접근성의 이해

웹 접근성이란?

모든 사용자(장애인, 노인 등)가 모든 기기에서 웹에 접근할 수 있도록 하는 것

 

웹 접근성을 지켜야 하는 이유

13년 4월 11일부터 장애인 차별 금지법(장차법)이 시행되었고 

정보에 대해서 장애인이 비장애인과 동등하게 접근할 수 있도록 제공되어야 한다.

 

 

"웹의 힘은 보편성에 있다.

장애에 구애 없이 모든 사람이 접근할 수 있도록

하는 것이 웹의 필수 요소다."

 

 

장애 환경

시각 : 전맹, 저시력, 색맹, 색약, 노안, 운전 중

청각 : 난청, 스피커 없음, 소음

운동 : 지체장애, 마우스 없음

소프트웨어 : 운영체제/브라우저 미지원

네트워크 : 저속, 접속 불안정

 

1. 전맹 시각 장애

시력이 전혀, 거의 없어 앞을 볼 수 없습니다.

발달된 다른 감각(청각:스크린 리더 / 촉각 : 점자 정보 단말기)으로 웹을 이용합니다.

 

2. 저시력 시각 장애

안경이나 렌즈, 치료, 수술로 해결할 수 없는 시력으로 일상생활이 어렵습니다.

(시력 저하, 시야 장애, 색약/색맹 등)

좀 더 크고 선명하게(화면 확대, 고대비 등) 볼 수 있는 기능을 이용합니다.

 

3. 중증 운동 장애

손 또는 팔을 사용하지 못하고 목만 움직일 수 있는 장애 환경입니다.

보조기기를 이용하여 키보드를 조작(헤드 포인터, 빅키 키보드, 키가드 등)할 수 있습니다.

 

4. 손 운동 장애

한 손만 사용 가능하며, 마우스나 키보드의 정교한 조작이 어려운(손 떨림 장애, 한 손 장애 등) 장애 환경입니다.

보조기기를 이용하여 마우스와 키보드를 쉽게 조작(트랙볼 마우스, 한 손 사용자용 키보드 등)할 수 있습니다.

 

5. 청각 장애

들을 수 없기 때문에 알림음, 영상 같은 정보를 제공받을 수 없습니다.

안내 문구나 자막 같은 화면의 글씨를 읽습니다.

 

6. 맥 사용자

 

7. 느린 인터넷

인터넷이 느려 로딩이 잘 안되어 UI가 깨지는 등의 웹 페이지를 인식하는데 불편함을 줄 수 있습니다.

 

 

---

 

웹 접근성 지침

0. 웹 접근성 지침 소개

WCAG(Web Content Accessibility Guidelines) 
W3C에서 발표한 웹 콘텐츠 접근성 지침.
1990년대부터 영국 · 호주 · 미국 · 일본 등이 장애인 차별 금지 관련법에 따라 모든 이의 웹 접근성을 높였으며, 1997년 5월 W3C가 '웹 콘텐츠 접근성 지침(WCAG)'를 내놓아 제도 확산에 속도를 더했습니다. 

 

KWCAG(Korean Web Content Accessibility Guidelines)
해외 웹 표준 기술 동향을 토대로 국내 설정에 맞게 반영된 한국형 웹 콘텐츠 접근성 지침.
원칙 4개, 지침 13개, 항목 24개로 구성.
한국도 2009년 5월 '국가 정보화 기본법'을 개정해 '장애인 · 고령자 등의 정보 접근 및 이용 보장'을 명시했으며, 2015년까지 한국 내 모든 인터넷 사이트가 웹 접근성을 보장하게 규정했습니다.

 

 

1. 적절한 대체 텍스트 제공

<img src="160314.png" alt="주식수수료 평생무료 비대면계좌개설 신규/온라인/유관기관 제비용 제외 2018년 12월 31일까지 선물/옵션 1년 무료, 신용이자 연 3.5% 60일 우대">

비장애인들은 이미지를 보면 시각적으로 내용 인식이 가능하지만 시각적으로 인식이 불가능한 사용자들은 청각적으로 내용을 인식할 수 있도록 보는 것과 듣는 것이 동등하게 대체 텍스트를 제공해야 합니다.
스크린 리더로 들으면 alt 값을 읽어줍니다.
img 요소뿐만 아니라 추가적으로 input의 type이 image이거나 button인 경우, 또는 이미지맵의 area에도 대체 텍스트가 존재한다면 alt로 제공해 주시면 됩니다.

 

 

2. 자막 제공

 

3. 색에 무관한 콘텐츠 인식

 

4. 명확한 지시 사항 제공

 

5. 텍스트 콘텐츠의 명도 대비

 

6. 자동 재생 금지

 

7. 콘텐츠 간의 구분

 

8. 키보드 사용 보장

 

9. 초점 이동

 

10. 조작 기능

 

11. 응답 시간 조절

 

12. 정지 기능 제공

 

13. 깜빡임과 번쩍임 사용 제한

 

14. 반복 영역 건너뛰기

 

15. 제목 제공

 

16. 적절한 링크 텍스트

 

17. 기본 언어 표시

 

18. 사용자 요구에 따른 실행

 

19. 콘텐츠의 선형 구조

 

20. 표의 구성

 

21. 레이블 제공

 

22. 오류 정정

 

23. 마크업 오류 방지

 

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

 

 

---

웹 접근성 진단 도구

 

Colour Contrast Analyser (CCA)

https://developer.paciellogroup.com/resources/contrastanalyser/

Colour Contrast Analyser (CCA)

전경 색과 배경색의 명도 대비를 체크해주는 프로그램
현재까지 최신 버전 2.5.0
명도 대비는 최소 3:1 이상이 되도록 구현

KWCAG a11y inspector

https://chrome.google.com/webstore/detail/kwcag-a11y-inspector/ngcmkfaolkgkjbddhjnhgoekgaamjibo?hl=ko

kwcag a11y inspector

컨트롤의 대각선 길이를 측정해주는 프로그램
크롬 웹 스토어에서 설치 가능
웹에서의 컨트롤 크기는 대각선 6mm 이상으로 구현
 
OpenWAX
접근성을 자동으로 진단해주는 프로그램
크롬 웹 스토어에서 설치 가능
자동 진단이 정확하지는 않아 수동 진단 병행 필요

W3C Validation

https://validator.w3.org/

The W3C Markup Validation Service

웹 표준을 검사하는 사이트
접근성 오류, 특히 마크업 오류 확인 시 많이 사용
 

 

---

스크린 리더

스크린을 읽어주는 프로그램으로 PC와 모바일에서 사용하는 스크린리더는 다르다.

 

윈도우 (설치형)
- 센스리더 베이직 6.5
- NVDA Version 2018.4

MAC (시스템 제공)
- VoiceOver

Android (시스템 제공)
- Talkback
- Voice Assistant

iOS (시스템 제공)
- VoiceOver

 

 

 

 

 

 

edwith 웹 접근성 이해 강의

https://www.edwith.org/web-accessibility

웹 접근성 이해 강좌소개 : edwith