SlideShare une entreprise Scribd logo
1  sur  27
Télécharger pour lire hors ligne
한국장애인고용공단 김상준
• 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 
: 가상커서가 위치한 영역의 텍스트, 이미지, 코딩 소스 등을 클립보드로 복사해주는 기능
감사합니다.

Contenu connexe

Tendances

[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래NAVER D2
 
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까NAVER D2
 
GA로 게임 로그 분석하기
GA로 게임 로그 분석하기GA로 게임 로그 분석하기
GA로 게임 로그 분석하기Alan Kang
 
비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초Gihyo Joshua Jang
 
자바병렬프로그래밍 9.gui 애플리케이션
자바병렬프로그래밍 9.gui 애플리케이션자바병렬프로그래밍 9.gui 애플리케이션
자바병렬프로그래밍 9.gui 애플리케이션Choonghyun Yang
 
[NDC 2011] 게임 개발자를 위한 데이터분석의 도입
[NDC 2011] 게임 개발자를 위한 데이터분석의 도입[NDC 2011] 게임 개발자를 위한 데이터분석의 도입
[NDC 2011] 게임 개발자를 위한 데이터분석의 도입Hoon Park
 

Tendances (8)

Bootstrap
BootstrapBootstrap
Bootstrap
 
Bootstrap
BootstrapBootstrap
Bootstrap
 
[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래[132]웨일 브라우저 1년 그리고 미래
[132]웨일 브라우저 1년 그리고 미래
 
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
[123]동네 커피샵도 사이렌 오더를 쓸 수 있을까
 
GA로 게임 로그 분석하기
GA로 게임 로그 분석하기GA로 게임 로그 분석하기
GA로 게임 로그 분석하기
 
비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초비 개발자를 위한 웹 개발 기초
비 개발자를 위한 웹 개발 기초
 
자바병렬프로그래밍 9.gui 애플리케이션
자바병렬프로그래밍 9.gui 애플리케이션자바병렬프로그래밍 9.gui 애플리케이션
자바병렬프로그래밍 9.gui 애플리케이션
 
[NDC 2011] 게임 개발자를 위한 데이터분석의 도입
[NDC 2011] 게임 개발자를 위한 데이터분석의 도입[NDC 2011] 게임 개발자를 위한 데이터분석의 도입
[NDC 2011] 게임 개발자를 위한 데이터분석의 도입
 

En vedette

웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편yamoo9
 
머티리얼 디자인(material design)
머티리얼 디자인(material design)머티리얼 디자인(material design)
머티리얼 디자인(material design)Woncheol Lee
 
Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기Doran Hwang
 
Do you Promise?
Do you Promise?Do you Promise?
Do you Promise?jungkees
 
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?Nts Nuli
 
모바일 무한 스크롤 개발
모바일 무한 스크롤 개발모바일 무한 스크롤 개발
모바일 무한 스크롤 개발NAVER D2
 
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSJavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSNAVER D2
 
개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기NAVER D2
 

En vedette (8)

웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
웹 접근성을 고려한 UI 컴포넌트 디자인 - 캐로셀(carousel) 편
 
머티리얼 디자인(material design)
머티리얼 디자인(material design)머티리얼 디자인(material design)
머티리얼 디자인(material design)
 
Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기Material design 3분 만에 살펴보기
Material design 3분 만에 살펴보기
 
Do you Promise?
Do you Promise?Do you Promise?
Do you Promise?
 
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
[2014널리세미나] 시맨틱한 HTML5 마크업 구조 설계, 어떻게 할까?
 
모바일 무한 스크롤 개발
모바일 무한 스크롤 개발모바일 무한 스크롤 개발
모바일 무한 스크롤 개발
 
JavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJSJavaScript로 오픈소스를 해보자. bsJS
JavaScript로 오픈소스를 해보자. bsJS
 
개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기개발자를 위한 웹표준 & 웹접근성이야기
개발자를 위한 웹표준 & 웹접근성이야기
 

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

웹표준을 기반한 크로스 브라우징 표준화 (2005)
 웹표준을 기반한 크로스 브라우징 표준화 (2005) 웹표준을 기반한 크로스 브라우징 표준화 (2005)
웹표준을 기반한 크로스 브라우징 표준화 (2005)Channy Yun
 
2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리Jay Park
 
AWS Finance Symposium_바로 도입할 수 있는 금융권 업무의 클라우드 아키텍처 알아보기
AWS Finance Symposium_바로 도입할 수 있는 금융권 업무의 클라우드 아키텍처 알아보기AWS Finance Symposium_바로 도입할 수 있는 금융권 업무의 클라우드 아키텍처 알아보기
AWS Finance Symposium_바로 도입할 수 있는 금융권 업무의 클라우드 아키텍처 알아보기Amazon Web Services Korea
 
세션5_데보션테크데이_이상근.pdf
세션5_데보션테크데이_이상근.pdf세션5_데보션테크데이_이상근.pdf
세션5_데보션테크데이_이상근.pdfJaesuk Ahn
 
Event storming based msa training commerce example v2
Event storming based msa training commerce example v2Event storming based msa training commerce example v2
Event storming based msa training commerce example v2uEngine Solutions
 
Event storming based msa training commerce example
Event storming based msa training commerce exampleEvent storming based msa training commerce example
Event storming based msa training commerce exampleuEngine Solutions
 
기말레포트
기말레포트기말레포트
기말레포트Miri Kim
 
모바일 개발 트랜드
모바일 개발 트랜드모바일 개발 트랜드
모바일 개발 트랜드Terry Cho
 
[DDC 2018] Metatron 오픈소스화 및 생태계 구축 (SKT 이정룡, 김지호)
[DDC 2018] Metatron 오픈소스화 및 생태계 구축 (SKT 이정룡, 김지호)[DDC 2018] Metatron 오픈소스화 및 생태계 구축 (SKT 이정룡, 김지호)
[DDC 2018] Metatron 오픈소스화 및 생태계 구축 (SKT 이정룡, 김지호)Metatron
 
Data discovery qlikview
Data discovery   qlikviewData discovery   qlikview
Data discovery qlikviewchoi3773
 
Event storming based msa training commerce example add_handson_v3
Event storming based msa training commerce example add_handson_v3Event storming based msa training commerce example add_handson_v3
Event storming based msa training commerce example add_handson_v3uEngine Solutions
 
엔터프라이즈 웹 동향 및 적용사례
엔터프라이즈 웹 동향 및 적용사례엔터프라이즈 웹 동향 및 적용사례
엔터프라이즈 웹 동향 및 적용사례욱래 김
 
Plm analytics 2017
Plm analytics 2017Plm analytics 2017
Plm analytics 2017dohun kim
 
웹표준의 이해
웹표준의 이해웹표준의 이해
웹표준의 이해Leehooan
 
꿀밋업1탄_왜_마이크로서비스인가
꿀밋업1탄_왜_마이크로서비스인가꿀밋업1탄_왜_마이크로서비스인가
꿀밋업1탄_왜_마이크로서비스인가VMware Tanzu Korea
 
제조업의 AWS 기반 주요 워크로드 및 고객 사례:: 이현석::AWS Summit Seoul 2018
제조업의 AWS 기반 주요 워크로드 및 고객 사례:: 이현석::AWS Summit Seoul 2018 제조업의 AWS 기반 주요 워크로드 및 고객 사례:: 이현석::AWS Summit Seoul 2018
제조업의 AWS 기반 주요 워크로드 및 고객 사례:: 이현석::AWS Summit Seoul 2018 Amazon Web Services Korea
 
태블로 소프트웨어(Tableau Software) 소개
태블로 소프트웨어(Tableau Software) 소개태블로 소프트웨어(Tableau Software) 소개
태블로 소프트웨어(Tableau Software) 소개HT Kim
 
Case Study를 통해 본 데이터사이언스 협업 플랫폼의 필요성 (옥주영 컨설턴트, Hancom MDS) :: AWS Techforum ...
Case Study를 통해 본 데이터사이언스 협업 플랫폼의 필요성 (옥주영 컨설턴트, Hancom MDS) :: AWS Techforum ...Case Study를 통해 본 데이터사이언스 협업 플랫폼의 필요성 (옥주영 컨설턴트, Hancom MDS) :: AWS Techforum ...
Case Study를 통해 본 데이터사이언스 협업 플랫폼의 필요성 (옥주영 컨설턴트, Hancom MDS) :: AWS Techforum ...Amazon Web Services Korea
 
All about Data Center Migration Session 1. <Case Study> 오비맥주 사례로 알아보는 DC 마이그레...
All about Data Center Migration Session 1. <Case Study> 오비맥주 사례로 알아보는 DC 마이그레...All about Data Center Migration Session 1. <Case Study> 오비맥주 사례로 알아보는 DC 마이그레...
All about Data Center Migration Session 1. <Case Study> 오비맥주 사례로 알아보는 DC 마이그레...BESPIN GLOBAL
 
국내외 Io t 기술 표준
국내외 Io t 기술 표준국내외 Io t 기술 표준
국내외 Io t 기술 표준남억 김
 

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

웹표준을 기반한 크로스 브라우징 표준화 (2005)
 웹표준을 기반한 크로스 브라우징 표준화 (2005) 웹표준을 기반한 크로스 브라우징 표준화 (2005)
웹표준을 기반한 크로스 브라우징 표준화 (2005)
 
2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리2020년 9월 5일 개발 이야기 정리
2020년 9월 5일 개발 이야기 정리
 
AWS Finance Symposium_바로 도입할 수 있는 금융권 업무의 클라우드 아키텍처 알아보기
AWS Finance Symposium_바로 도입할 수 있는 금융권 업무의 클라우드 아키텍처 알아보기AWS Finance Symposium_바로 도입할 수 있는 금융권 업무의 클라우드 아키텍처 알아보기
AWS Finance Symposium_바로 도입할 수 있는 금융권 업무의 클라우드 아키텍처 알아보기
 
세션5_데보션테크데이_이상근.pdf
세션5_데보션테크데이_이상근.pdf세션5_데보션테크데이_이상근.pdf
세션5_데보션테크데이_이상근.pdf
 
Event storming based msa training commerce example v2
Event storming based msa training commerce example v2Event storming based msa training commerce example v2
Event storming based msa training commerce example v2
 
Event storming based msa training commerce example
Event storming based msa training commerce exampleEvent storming based msa training commerce example
Event storming based msa training commerce example
 
기말레포트
기말레포트기말레포트
기말레포트
 
모바일 개발 트랜드
모바일 개발 트랜드모바일 개발 트랜드
모바일 개발 트랜드
 
[DDC 2018] Metatron 오픈소스화 및 생태계 구축 (SKT 이정룡, 김지호)
[DDC 2018] Metatron 오픈소스화 및 생태계 구축 (SKT 이정룡, 김지호)[DDC 2018] Metatron 오픈소스화 및 생태계 구축 (SKT 이정룡, 김지호)
[DDC 2018] Metatron 오픈소스화 및 생태계 구축 (SKT 이정룡, 김지호)
 
Data discovery qlikview
Data discovery   qlikviewData discovery   qlikview
Data discovery qlikview
 
Event storming based msa training commerce example add_handson_v3
Event storming based msa training commerce example add_handson_v3Event storming based msa training commerce example add_handson_v3
Event storming based msa training commerce example add_handson_v3
 
엔터프라이즈 웹 동향 및 적용사례
엔터프라이즈 웹 동향 및 적용사례엔터프라이즈 웹 동향 및 적용사례
엔터프라이즈 웹 동향 및 적용사례
 
Plm analytics 2017
Plm analytics 2017Plm analytics 2017
Plm analytics 2017
 
웹표준의 이해
웹표준의 이해웹표준의 이해
웹표준의 이해
 
꿀밋업1탄_왜_마이크로서비스인가
꿀밋업1탄_왜_마이크로서비스인가꿀밋업1탄_왜_마이크로서비스인가
꿀밋업1탄_왜_마이크로서비스인가
 
제조업의 AWS 기반 주요 워크로드 및 고객 사례:: 이현석::AWS Summit Seoul 2018
제조업의 AWS 기반 주요 워크로드 및 고객 사례:: 이현석::AWS Summit Seoul 2018 제조업의 AWS 기반 주요 워크로드 및 고객 사례:: 이현석::AWS Summit Seoul 2018
제조업의 AWS 기반 주요 워크로드 및 고객 사례:: 이현석::AWS Summit Seoul 2018
 
태블로 소프트웨어(Tableau Software) 소개
태블로 소프트웨어(Tableau Software) 소개태블로 소프트웨어(Tableau Software) 소개
태블로 소프트웨어(Tableau Software) 소개
 
Case Study를 통해 본 데이터사이언스 협업 플랫폼의 필요성 (옥주영 컨설턴트, Hancom MDS) :: AWS Techforum ...
Case Study를 통해 본 데이터사이언스 협업 플랫폼의 필요성 (옥주영 컨설턴트, Hancom MDS) :: AWS Techforum ...Case Study를 통해 본 데이터사이언스 협업 플랫폼의 필요성 (옥주영 컨설턴트, Hancom MDS) :: AWS Techforum ...
Case Study를 통해 본 데이터사이언스 협업 플랫폼의 필요성 (옥주영 컨설턴트, Hancom MDS) :: AWS Techforum ...
 
All about Data Center Migration Session 1. <Case Study> 오비맥주 사례로 알아보는 DC 마이그레...
All about Data Center Migration Session 1. <Case Study> 오비맥주 사례로 알아보는 DC 마이그레...All about Data Center Migration Session 1. <Case Study> 오비맥주 사례로 알아보는 DC 마이그레...
All about Data Center Migration Session 1. <Case Study> 오비맥주 사례로 알아보는 DC 마이그레...
 
국내외 Io t 기술 표준
국내외 Io t 기술 표준국내외 Io t 기술 표준
국내외 Io t 기술 표준
 

Plus de Nts Nuli

Link branding & brand identity overview
Link branding & brand identity overviewLink branding & brand identity overview
Link branding & brand identity overviewNts Nuli
 
Link branding & brand identity overview
Link branding & brand identity overviewLink branding & brand identity overview
Link branding & brand identity overviewNts Nuli
 
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성Nts Nuli
 
[2019널리세미나] 듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
[2019널리세미나]  듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선[2019널리세미나]  듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
[2019널리세미나] 듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선Nts Nuli
 
[2019널리세미나] 접근성은 별책 부록
[2019널리세미나] 접근성은 별책 부록[2019널리세미나] 접근성은 별책 부록
[2019널리세미나] 접근성은 별책 부록Nts Nuli
 
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성Nts Nuli
 
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성Nts Nuli
 
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​Nts Nuli
 
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트Nts Nuli
 
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성Nts Nuli
 
[2018널리세미나] 4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
[2018널리세미나]  4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제[2018널리세미나]  4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
[2018널리세미나] 4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제Nts Nuli
 
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 IINts Nuli
 
[2017널리세미나] 네이버 접근성 진단솔루션
[2017널리세미나] 네이버 접근성 진단솔루션[2017널리세미나] 네이버 접근성 진단솔루션
[2017널리세미나] 네이버 접근성 진단솔루션Nts Nuli
 
[2017널리세미나] Accessibility at Microsoft
[2017널리세미나] Accessibility at Microsoft[2017널리세미나] Accessibility at Microsoft
[2017널리세미나] Accessibility at MicrosoftNts Nuli
 
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성Nts Nuli
 
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각Nts Nuli
 
[2016널리세미나] 웹 접근성 체험관을 소개합니다!
[2016널리세미나] 웹 접근성 체험관을 소개합니다![2016널리세미나] 웹 접근성 체험관을 소개합니다!
[2016널리세미나] 웹 접근성 체험관을 소개합니다!Nts Nuli
 
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자Nts Nuli
 
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405Nts Nuli
 
[2016널리세미나] 남의 문제 나의 문제 우리의 문제
[2016널리세미나] 남의 문제 나의 문제 우리의 문제[2016널리세미나] 남의 문제 나의 문제 우리의 문제
[2016널리세미나] 남의 문제 나의 문제 우리의 문제Nts Nuli
 

Plus de Nts Nuli (20)

Link branding & brand identity overview
Link branding & brand identity overviewLink branding & brand identity overview
Link branding & brand identity overview
 
Link branding & brand identity overview
Link branding & brand identity overviewLink branding & brand identity overview
Link branding & brand identity overview
 
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
[2019널리세미나] 청각장애인 택시 운전기사를 위한 접근성
 
[2019널리세미나] 듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
[2019널리세미나]  듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선[2019널리세미나]  듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
[2019널리세미나] 듣고 말하는 서비스로 발전하는 네이버 어학사전의 접근성 개선
 
[2019널리세미나] 접근성은 별책 부록
[2019널리세미나] 접근성은 별책 부록[2019널리세미나] 접근성은 별책 부록
[2019널리세미나] 접근성은 별책 부록
 
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
[2019널리세미나] 비슷하지만 다른 웹과 모바일 접근성
 
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
[2019널리세미나] 모두를 위한 제품 및 서비스 - 구글 웹 프로덕트 및 구글 플레이의 접근성
 
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
[2018널리세미나] 모바일 인앱 실무에 활용한 접근성 해결 방안​
 
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
[2018널리세미나] 지못미(지켜주지 못해 미안해) 마우스이벤트
 
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
[2018널리세미나] 모두가 쉽게 쓰는 그날까지... 함께 만드는 접근성
 
[2018널리세미나] 4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
[2018널리세미나]  4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제[2018널리세미나]  4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
[2018널리세미나] 4차 산업혁명에서 정보 접근성 교육 현황과 앞으로의 과제
 
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
[2018널리세미나] 정보 접근성 자동화 솔루션 개발 현황 및 방향 II
 
[2017널리세미나] 네이버 접근성 진단솔루션
[2017널리세미나] 네이버 접근성 진단솔루션[2017널리세미나] 네이버 접근성 진단솔루션
[2017널리세미나] 네이버 접근성 진단솔루션
 
[2017널리세미나] Accessibility at Microsoft
[2017널리세미나] Accessibility at Microsoft[2017널리세미나] Accessibility at Microsoft
[2017널리세미나] Accessibility at Microsoft
 
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
[2016널리세미나] 청각장애와 유니버셜 디자인 그리고 웹 접근성
 
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
[2016널리세미나] 사용자 경험 향상을 위한 N가지 생각
 
[2016널리세미나] 웹 접근성 체험관을 소개합니다!
[2016널리세미나] 웹 접근성 체험관을 소개합니다![2016널리세미나] 웹 접근성 체험관을 소개합니다!
[2016널리세미나] 웹 접근성 체험관을 소개합니다!
 
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
[2016널리세미나] 모바일애플리케이션접근성 이것만알아두자
 
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
[2016널리세미나] 모바일 접근성 지침 Ato z 20160405
 
[2016널리세미나] 남의 문제 나의 문제 우리의 문제
[2016널리세미나] 남의 문제 나의 문제 우리의 문제[2016널리세미나] 남의 문제 나의 문제 우리의 문제
[2016널리세미나] 남의 문제 나의 문제 우리의 문제
 

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

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