[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
TRANSCRIPT
한국장애인고용공단 김상준
• TTA, TTAS.OT-10.0003 • 2004.12.23
• 한국정보통신표준, KICS.OT-10.0003 • 2005.12.21
• 한국정보통신표준, KICS.OT-10.0003/R1 • 2010.12.31
• 한국정보통신표준, KICS.OT-10.0003/R2 • 2013.12.18
정보통신 표준 제정 일반적 단계
1) 사업장, 학회, 기관 등 표준 Draft 의견 수렴
2) 한국정보통신기술협회(TTA)에 단체표준 제안 심의 후 제정
3) 방송통신위원회(KICS) 등에 국가표준 제안 심의 후 제정
• Should : … 해야 한다.
• Shall : … 하는 것이 바람직하다.
• 마크업(Markup) 요소를 언급했던 부분 삭제하거나 변경
• HTML5도 포함할 수 있도록 원칙면을 담음
• 소형 디스플레이와 터치기반 디바이스를 고려한 2개 검사항목 추가
• 기존 22개 검사항목에서 24개 검사항목으로 늘어남
v 1. 적절한 대체 텍스트 제공
2. 자막 제공
3. 색에 무관한 콘텐츠 인식
4. 명확한 지시사항 제공
v 5. 텍스트 콘텐츠의 명도 대비
6. 자동 재생 금지
+ 7. 콘텐츠 간의 구분
8. 키보드 사용 보장
9. 초점 이동
+ 10. 조작 가능
11. 응답시간 조절
12. 정지 기능 제공
13. 깜빡임과 번쩍임 사용 제한
V 14. 반복 영역 건너뛰기
V 15. 제목 제공
v 16. 적절한 링크 텍스트
17. 기본 언어 표시
V 18. 사용자 요구에 따른 실행
19. 콘텐츠의 선형 구조
20. 표의 구성
21. 레이블 제공
V 22. 오류 정정
23. 마크업 오류 방지
24. 웹 애플리케이션 접근성 준수
V : 내용상 완화, 수정, 추가된 경우
+ : 추가된 검사 항목
• W3C 표준에 맞게 스크린리더에서
display : none ; , visibility : hidden ; 은 인식하지 않도록 개선 됨
• 방법1 : text-indent, position 등에 음수를 사용하거나
Box 요소 크기를 작게 하고 overflow : hidden ; 사용
• 방법2 : longdesc 사용(html5 제외)
• PC웹은 모두 해당되므로 사실상 3:1이 기준이 됨
• 모바일 웹은 <meta name=viewport..> 등으로 확대를 막게 되면
기존 원칙 적용
• 고정 간격, 테두리, 줄 맞춤, 무늬 등으로 구분하는 내용
• 디자인 상 거의 발생되지 않는 내용으로 권고(Shall) 수준의 검사항목
• 링크, 버튼 등 컨트롤(개체)의 크기를 6mm 이상으로 하라는 내용
• 사실상 모바일 웹을 고려하여 추가된 검사항목
• 디스플레이 크기 및 해상도에 따라 달라질 수 있는 내용으로..
국가 표준 제안 시 디바이스 기준이 제시될 예정
• 화면에 링크가 디자인 되어 있거나 키보드로 링크 접근 시 나타나도록 함
• <title>우편번호 찾기 [팝업]<title>
• 기존의 ‘공지사항 더 보기’는 맥락(논리적 순서)이 이해되면 ‘더보기’
만으로 충분
• Why? – 바로 가기, go, 상세보기, 확인, 추가, 취소, 조회 등과 같은 것과
형평성 맞춤
예 : 계좌이체 시 은행, 계좌번호 오류 내용 등
• KWCAG의 검사항목 중 불필요한 내용은 없음
• 그러나 검사항목별로 중요도는 다를 수 있음
• WA품질마크 인증을 위한 전문가 평가 시 검사항목별로 같은 점수를 산
정하고 있음
• 사용성 측면에서 볼 때 각 검사항목별로 가중치 부여 필요
예 : 대체텍스트가 없으면 정보접근 불가한 대상 집단이 나타나지만 ,
건너뛰기 링크가 없더라도 사용자가 불편할 뿐이지 정보접근은
가능함
• 최근 대 메뉴에 대한 UX를 포커스 이동 시 하위메뉴가 자동으로 열리도록
설계하고 있음
• 앞으로(tab)를 이용해서 이동하는 경우와 뒤로(shift + tab)를 이용해서
이동하는 경우 순서가 다르게 작동함
• KWCAG에서는 이런 경우 문제가 아님
• 사용자 측면에서는 혼란을 일으킬 수 있음
• KWCAG에서는 레이어팝업을 콘텐츠의 논리적 초점 이동 및 콘텐츠의
선형 구조를 위반할 가능성이 높음으로 자제를 권고하고 있음
• 화면읽기프로그램을 이용하는 시각장애인은 레이어 팝업이 나타났는지
확인이 불가능하며, 초점 이동에도 문제가 발생함
• 불가피하게 레이어 팝업을 이용해야 할 경우 사용자에게 미리 공지하도록
처리하고 초점을 이동하는 방법을 제공할 필요가 있음
• KWCAG에서는 label요소나 title속성 중 어떤 것으로든 온라인서식에
레이블을 제공하면 문제가 되지 않음
• 디자인적인 문제 때문에 label요소를 숨김 처리하거나, 생략하는 경우가
빈번하게 발생
• 현재 출시 되어있는 화면읽기프로그램들은 온라인서식에서 label요소나
title속성 모두 tab이동 시 읽어주도록 설계되어있음
• 반면 상지장애나 뇌병변장애인에게는 label요소를 이용해야 사용성이
증대될 수 있음
• KWCAG2.1에서는 링크텍스트가 맥락을 통해 이해될 수 있으면 문제가
되지 않는 것으로 변경되었음
• 개발자나 퍼블리셔 입장에서는 귀찮은 작업이지만, 사용성 측면에서 볼 때
지나치게 길지 않은 링크텍스트라면 친절을 베푸는 것도 좋다고 판단됨
• 모든 사람들이 맥락을 이해하고 웹을 사용할 만큼 정보화 수준이 높지
못함
• 모든 사람에게 필요한 기술임.
• 특히, 보조기술(화면읽기프로그램, 화면확대 프로그램 등)을 이용하는
시각장애인들에게는 필수적 요소로 작용함
• 한국형 웹 콘텐츠 접근성 지침2.0의 22개 검사항목 중 20개 (%)가
시각장애인과 직간접적으로 연관이 있음
• 화면읽기프로그램을 이용해서 KWCAG의 검사항목 중 일부는 빠르고
간편하게 전문가평가가 가능함
페이지 제목 확인
(현재 가상커서가 위치한 페이지, 프레임, 콘텐츠 블럭에 대한 정보 제공)
프레임 제목 확인
콘텐츠 블록
Sense
Reader V4.0
ctrl+shift+f
f or
alt+shift+w
h
JAWS for Window V13.0
insert+f
m or
ctrl+insert+m
h
툴 팁 읽기 - ctrl+alt+shift+t
: 가상커서가 위치한 객체의 title속성과 label요소 등을 확인할 수 있음
• 전체 요소 보기 : shift+insert+F1
• 요소의 자세한 정보 보기 : ctrl+shift+insert+F1
: 가상커서가 위치한 요소와 그것을 감싸고 있는 요소, 속성, 매개변수
등을 확인할 수 있음
IE 향상 기능: ctrl+shift+c
: 가상커서가 위치한 영역의 텍스트, 이미지, 코딩 소스 등을 클립보드로
복사해주는 기능
감사합니다.