[2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

27
한국장애인고용공단 김상준

Upload: nts-nuli

Post on 10-Jun-2015

1.236 views

Category:

Technology


5 download

TRANSCRIPT

Page 1: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

한국장애인고용공단 김상준

Page 2: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Page 3: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Page 4: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Page 5: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• 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

Page 6: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

정보통신 표준 제정 일반적 단계

1) 사업장, 학회, 기관 등 표준 Draft 의견 수렴

2) 한국정보통신기술협회(TTA)에 단체표준 제안 심의 후 제정

3) 방송통신위원회(KICS) 등에 국가표준 제안 심의 후 제정

Page 7: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Page 8: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• Should : … 해야 한다.

• Shall : … 하는 것이 바람직하다.

• 마크업(Markup) 요소를 언급했던 부분 삭제하거나 변경

• HTML5도 포함할 수 있도록 원칙면을 담음

• 소형 디스플레이와 터치기반 디바이스를 고려한 2개 검사항목 추가

• 기존 22개 검사항목에서 24개 검사항목으로 늘어남

Page 9: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Page 10: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

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 : 내용상 완화, 수정, 추가된 경우

+ : 추가된 검사 항목

Page 11: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• W3C 표준에 맞게 스크린리더에서

display : none ; , visibility : hidden ; 은 인식하지 않도록 개선 됨

• 방법1 : text-indent, position 등에 음수를 사용하거나

Box 요소 크기를 작게 하고 overflow : hidden ; 사용

• 방법2 : longdesc 사용(html5 제외)

• PC웹은 모두 해당되므로 사실상 3:1이 기준이 됨

• 모바일 웹은 <meta name=viewport..> 등으로 확대를 막게 되면

기존 원칙 적용

Page 12: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• 고정 간격, 테두리, 줄 맞춤, 무늬 등으로 구분하는 내용

• 디자인 상 거의 발생되지 않는 내용으로 권고(Shall) 수준의 검사항목

• 링크, 버튼 등 컨트롤(개체)의 크기를 6mm 이상으로 하라는 내용

• 사실상 모바일 웹을 고려하여 추가된 검사항목

• 디스플레이 크기 및 해상도에 따라 달라질 수 있는 내용으로..

국가 표준 제안 시 디바이스 기준이 제시될 예정

• 화면에 링크가 디자인 되어 있거나 키보드로 링크 접근 시 나타나도록 함

Page 13: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• <title>우편번호 찾기 [팝업]<title>

• 기존의 ‘공지사항 더 보기’는 맥락(논리적 순서)이 이해되면 ‘더보기’

만으로 충분

• Why? – 바로 가기, go, 상세보기, 확인, 추가, 취소, 조회 등과 같은 것과

형평성 맞춤

예 : 계좌이체 시 은행, 계좌번호 오류 내용 등

Page 14: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Page 15: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• KWCAG의 검사항목 중 불필요한 내용은 없음

• 그러나 검사항목별로 중요도는 다를 수 있음

• WA품질마크 인증을 위한 전문가 평가 시 검사항목별로 같은 점수를 산

정하고 있음

• 사용성 측면에서 볼 때 각 검사항목별로 가중치 부여 필요

예 : 대체텍스트가 없으면 정보접근 불가한 대상 집단이 나타나지만 ,

건너뛰기 링크가 없더라도 사용자가 불편할 뿐이지 정보접근은

가능함

Page 16: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• 최근 대 메뉴에 대한 UX를 포커스 이동 시 하위메뉴가 자동으로 열리도록

설계하고 있음

• 앞으로(tab)를 이용해서 이동하는 경우와 뒤로(shift + tab)를 이용해서

이동하는 경우 순서가 다르게 작동함

• KWCAG에서는 이런 경우 문제가 아님

• 사용자 측면에서는 혼란을 일으킬 수 있음

Page 17: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• KWCAG에서는 레이어팝업을 콘텐츠의 논리적 초점 이동 및 콘텐츠의

선형 구조를 위반할 가능성이 높음으로 자제를 권고하고 있음

• 화면읽기프로그램을 이용하는 시각장애인은 레이어 팝업이 나타났는지

확인이 불가능하며, 초점 이동에도 문제가 발생함

• 불가피하게 레이어 팝업을 이용해야 할 경우 사용자에게 미리 공지하도록

처리하고 초점을 이동하는 방법을 제공할 필요가 있음

Page 18: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• KWCAG에서는 label요소나 title속성 중 어떤 것으로든 온라인서식에

레이블을 제공하면 문제가 되지 않음

• 디자인적인 문제 때문에 label요소를 숨김 처리하거나, 생략하는 경우가

빈번하게 발생

• 현재 출시 되어있는 화면읽기프로그램들은 온라인서식에서 label요소나

title속성 모두 tab이동 시 읽어주도록 설계되어있음

• 반면 상지장애나 뇌병변장애인에게는 label요소를 이용해야 사용성이

증대될 수 있음

Page 19: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• KWCAG2.1에서는 링크텍스트가 맥락을 통해 이해될 수 있으면 문제가

되지 않는 것으로 변경되었음

• 개발자나 퍼블리셔 입장에서는 귀찮은 작업이지만, 사용성 측면에서 볼 때

지나치게 길지 않은 링크텍스트라면 친절을 베푸는 것도 좋다고 판단됨

• 모든 사람들이 맥락을 이해하고 웹을 사용할 만큼 정보화 수준이 높지

못함

Page 20: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Page 21: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침
Page 22: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• 모든 사람에게 필요한 기술임.

• 특히, 보조기술(화면읽기프로그램, 화면확대 프로그램 등)을 이용하는

시각장애인들에게는 필수적 요소로 작용함

• 한국형 웹 콘텐츠 접근성 지침2.0의 22개 검사항목 중 20개 (%)가

시각장애인과 직간접적으로 연관이 있음

• 화면읽기프로그램을 이용해서 KWCAG의 검사항목 중 일부는 빠르고

간편하게 전문가평가가 가능함

Page 23: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

페이지 제목 확인

(현재 가상커서가 위치한 페이지, 프레임, 콘텐츠 블럭에 대한 정보 제공)

프레임 제목 확인

콘텐츠 블록

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

Page 24: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

툴 팁 읽기 - ctrl+alt+shift+t

: 가상커서가 위치한 객체의 title속성과 label요소 등을 확인할 수 있음

Page 25: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

• 전체 요소 보기 : shift+insert+F1

• 요소의 자세한 정보 보기 : ctrl+shift+insert+F1

: 가상커서가 위치한 요소와 그것을 감싸고 있는 요소, 속성, 매개변수

등을 확인할 수 있음

Page 26: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

IE 향상 기능: ctrl+shift+c

: 가상커서가 위치한 영역의 텍스트, 이미지, 코딩 소스 등을 클립보드로

복사해주는 기능

Page 27: [2014널리세미나] 사용자 측면에서의 한국형 웹 콘텐츠 지침

감사합니다.