웹 접근성(Web Accessibility)
장애인, 고령자 등이 웹 사이트의 정보에 접근하고 이해할 수 있는 것
- 사용자 층 확대
- 다양한 환경, 기기를 지원하여 서비스 사용범위 확대
- 사회적 이미지 구축
접근성 지침
WCAG(Web Content Accessibility Guidelines) 2.0 을
한국 실정에 맞게 수정한 ‘한국형 웹 콘텐츠 접근성 지침 2.1
인식의 용이성(Perceivable)
모든 콘텐츠를 사용자가 인식할 수 있는가
1. 적절한 대체 텍스트
텍스트가 아닌 콘텐츠는 대체 텍스트 제공해야 한다
alt속성 사용<img src="이미지 주소" alt="대체 텍스트" />- 배경이미지는 정보인식이 필요없으므로
alt을 빈문자열 줘서 스크린 리더가 인식하지 않게 한다 - 인접 요소 내용으로 이미지 정보를 인식할 수 있으면, 대체 텍스트를 작성하지 않는다.
2. 자막 제공
멀티미디어 콘텐츠에서 자막, 원고나 수화를 제공하는가
- 자막 제공하는 동영상 사용
- 자막 지원하는 멀티미디어 플랫폼 사용
vidio요소 안에track요소로 자막 파일 부르기
<video ... >
<track src="자막.vtt" kind="captions" />
</video>3. 색에 무관한 콘텐츠 인식
색에 상관없이 콘텐츠가 인식되는가
- 콘텐츠에 테두리 추가
- 콘텐츠에 레이블 추가
4. 명확한 지시사항 제공
모양, 크기, 위치, 방향, 색, 소리 등 관계없이 지시사항이 인식되는가
- 동그란(모양), 가장 큰(크기), 오른쪽에(위치,방향), 주황색(색) 등의 버튼으로 지시됐다면, 시각장애 사용자의 경우 어떤 버튼인지 모른다.
따라서 버튼을 설명하는 대체 텍스트를 작성해야 한다 - 소리를 통해 지시사항이 이뤄진다면, 청각장애 사용자는 인지할 수 없다.
따라서 시각적인 정보를 제공해야 한다.
5. 텍스트 콘텐츠 명도 대비
텍스트 - 배경 간 명도대비는 4.5 대 1 이상이어야 한다
-
텍스트를 명확하게 보기 위해 명도대비를 지켜야 한다
-
밑의 경우 콘텐츠-배경 명도대비 3 대 1까지 허용된다
텍스트가 18pt 또는 굵은(Bold) 14pt 이상일 경우, 확대 가능한 페이지인 경우, 비활성화 된 콘텐츠인 경우, 장식 목적의 콘텐츠인 경우
6. 자동 재생 금지
- 스크린리더기 사용시 자동재생 소리가 겹쳐서 듣고자 하는 내용을 못 듣는다.
- 동영상, 오디오, 배경음악 등 모든 종류의 소리를 뜻함
- 불가피한 경우 밑처럼 구현
- 가장 먼저 위치하여 정지 가능하게 구현- esc 눌러 정지
- 3초 내 정지
7. 콘텐츠 간 구분
이웃한 콘텐츠는 시각적으로 구별되어야 한다
- 테두리, 구분선, 패턴, 명도대비, 간격 등으로 구분
운용의 용이성(Operable)
UI 구성요소는 조작 가능하고 내비게이션 할 수 있어야 한다.
8. 키보드 사용 보장
키보드만으로 모든 기능 사용가능하게 하기
- 키보드 조작만으로도 빠져나올 수 있게 구현하기
9. 초점 이동
키보드의 초점 이동을 논리적, 시각적으로 구별해야 한다
- 왼쪽에서 오른쪽 / 위에서 아래로 이동
10. 조작 가능
사용자 입력, 컨트롤은 조작 가능하도록 제공해야 한다
- 버튼컨트롤 대각선 길이 - 6mm 이상
- 버튼컨트롤 간 여백 - 1px 이상
11. 응답 시간 조절
시간제한있는 콘텐츠는 응답시간 조절할 수 있어야 함
- 시간제한 없는게 좋지만 있다면, 충분한 시간 / 종료안내 / 조절 수단 제공해야 한다
- 은행사이트 경우, 보안문제로 일정시간 후 자동 로그아웃 한다.
이때 일정시간 제공 / 종료될 남은 시간 안내 / 시간연장버튼과 바로 로그아웃 버튼 제공한다 - 스크린리더기, 키보드 사용자도 이런 수단 인지하는 충분한 시간 제공해야 한다
12. 정지 기능 제공
자동 변경 콘텐츠의 움직임을 제어 가능해야 한다
- 캐러셀 슬라이드 : 이전, 정지, 다음 기능 제공하고 마우스 호버나 키보드 접근 시 정지되도록 구현해야 한다
- 자동 변경 콘텐츠 : 실시간 검색어같은 콘텐츠는 이전,정지,다음 기능 없어도 접근 시 모든 콘텐츠 확인 가능해야 한다
13. 깜빡임과 번쩍임 사용 제한
초당 3~50회 주기의 깜빡임,번쩍이는 콘텐츠 제공 안해야 한다
- 불가피한 경우 밑 조건 중 하나를 충족해야 한다
- 번쩍임 콘텐츠 면적이 전체화면의 10% 미만
- 사전 경고하여 중단 가능한 수단 제공
- 3초 미만으로 시간 제한
14. 반복 영역 건너뛰기
반복 영역의 건너뛰기 구현
- 스크린리더기 경우, 네이게이션 바 등 모든 반복 요소도 반복해서 읽기 때문에, 건너뛰고 메인 콘텐츠로 이동하는 방법 제공해야 한다
- 맨 앞에 건너뛰기 링크 제공
- 메뉴 필요시만 열수 있도록 구현
15. 제목 제공
페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공
- 적절한 제목 제공함으로 원하는 내용에 빠르게 접근한다
- 특수 문자 1개까지만 사용
시각적 장식을 목적으로 특수 문자를 반복 사용하면 스크린 리더에서 불필요하게 반복해서 출력하므로 넣지 않아야 한다
16. 적절한 링크 텍스트
용도, 목적을 이해할 수 있어야 한다
- 이미지에 링크 있으면, 설명해주는 대체 텍스트를 작성
- 빈 링크가 없어야 한다
이해의 용이성(Understandable)
콘텐츠는 이해 가능해야 한다
17. 기본 언어 표시
주로 사용하는 언어를 명시
- HTML 요소에
lang속성 사용<html lang="ko"> - 페이지 내 다른 언어가 존재하는 경우, 해당 요소에
lang속성 표기
18. 사용자 요구에 따른 실행
사용자가 의도하지 않은 기능(새 창, 초점에 의한 맥락 변화 등)은 실행되지 않아야 한다.
-
페이지 진입 시 팝업 뜨지 않아야 하고, 모달은 가장 상단에 제공하여 가장 먼저 제어해야 한다.
-
스크린 리더 사용자는 새 창이 떴음를 인지못하고 기존 페이지를 계속 보고있다고 생각할 수 있기때문에 새 창 떴음을 안내해야 한다
-
링크 요소 안에 보이지 않는 요소를 넣어 새 창에 접근하게 됨을 안내
<a href="...">페이지<span class="blind">새 창</span></a> -
링크 요소에
title속성으로 "새 창" 작성<a href="..." title="새 창">페이지</a> -
링크 요소에
target=”_blank”속성 작성<a href="..." target="_blank">페이지</a>
-
19. 콘텐츠 선형 구조
논리적인 순서로 콘텐츠 제공
- 제목 - 내용 순서로 제공
20. 표 구성
이해하기 쉽게 표 구성
- 시각장애 사용자를 위해 듣기만해도 표 구조를 이해하기 쉽게 구성해야 한다
- table 요소 안
caption요소로 표 제목이나 간단한 요약 작성 - 제목 셀은
<th>, 데이터 셀은<td>사용 - 표 복잡할 경우, 간소화하여 scope나 id, headers 속성 사용하기
21. 레이블 제공
사용자 입력에 대응하는 레이블 제공
- 사용자가 정보 입력 시, 어떤 정보를 입력해야 하는지 알아야 한다
<input>에value나placeholder속성만 설정하는 것은 적합하지 않음
(X) <input type="text" placeholder="아이디" /><input>에id설정하고<label>요소의for속성으로 연결
(O) <lable for="user_id">아이디</label> <input id="user_id" type="text" placeholder="아이디" />title속성 사용
(O) <input type="text" title="아이디" placeholder="아이디" />- WAI-ARIA의
aria-label속성 사용
(O) <input type="text" aria-label="아이디" placeholder="아이디" />
WAI-ARIA의 경우 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋다.
HTML 속성이나 요소로 대체 가능하면 속성이나 요소를 우선적으로 사용해라.
22. 오류 정정
입력 오류를 정정하는 방법 제공하기
- 작성 중, 제출 시 오류가 발생하면 입력했던 내용이 그대로 유지되게 하기
- 오류 발생한 경우 사용자에게 오류 발생 원인 안내
- 오류 발생한 경우 오류가 발생한 위치로 초점 이동하기
견고성(Robust)
미래 기술로도 접근 가능하게 견고하게 만들어야 한다.
23. 마크업 오류 방지
: 마크업 언어의 요소는 열고/닫음, 중첩 관계 및 속성 선언에 오류가 없어야 한다.
- 요소 <열고></닫음> 지키기
(X) <div><span></div></span>
(O) <div><span></span></div>- 요소 속성을 중복해서 사용하지 않기
(X) <div class="중복" class="사용"></div>
(O) <div class="안 돼요"></div>- id 중복해서 사용하기 않기
(X) <div id="아이디"><span id="아이디"></span></div>24. 웹 애플리케이션 접근성 준수
콘텐츠에 포함된 웹 애플리케이션도 접근성 갖추기
- 웹 콘텐츠에 포함된 웹 애플리케이션도 접근성을 갖추고,
접근성을 갖추지 못했다면 대체 수단, 대체 텍스트를 제공
