SlideShare une entreprise Scribd logo
1  sur  33
웹접근성 가이드라인의
사각지대를 말하다
김혜일
.co.kr
한국형 웹콘텐츠 접근성 지침 2.0
.co.kr
접근성 지침은
최소한의 가이드라인입니다.
.co.kr
얍!
최후의 필살기!
품질마크를 받아랏!!!
.co.kr
웹 접근성 품질마크 역시
최소한의 가이드라인입니다.
웹 접근성 품질마크가 높은 접근성을 보장하는 것은 아닙니다.
.co.kr
1.3.3 텍스트 콘텐츠와 배경 간의 명도 대비는 4.5대 1 이상…
…… 다만, 본문 콘텐츠에 단순히 장식 목적으로만 사용한 글자,
마우스나 키보드를 활용하여 초점(Focus)을 받았을 때 명도 대비가 커지는
콘텐츠는 예외로 한다(지침 2.1.2 참조).
기본
마우스오버
.co.kr
선택되지 않아 비활성화 상태인 항목의 명도대비는 예외…
1.3.3 명도대비 지침 외
사례 A
사례 B
.co.kr
사례 C 사례 D
.co.kr
중요 항목에 별도의 색상을 지정하여 사용자의 시선을 유도할 수 있습니다
확인, 약관동의, 다음단계 등의 필수 항목
1.3.3 명도대비 지침 외
사례 A 사례 B
.co.kr
사례 C
.co.kr
사례 A 사례 B
1.3.3 명도대비 지침 외
페이지의 레이아웃을 구분을 명확히 하는 것이 사용성을 높이는데 큰 도움
이 됩니다.
명확한 레이아웃 구분이 없으면 저시력 사용자가 콘텐츠를 인지하는데 어
려움을 겪게 됩니다.
.co.kr
1.3.3 명도대비 지침 외
텍스트를 입력하는 편집창의 테두리에서도 명도대비는 보장되어야 합니다.
.co.kr
.co.kr
onmouseover에 의한 스타일 변화 필요. (현재 적용되어있음)
.co.kr
1.2.1 멀티미디어 콘텐츠에는 자막, 원고 또는 수화를 제공
동영상의 자막을 제공하고 있으나 그 사용성에 있어서는 명시하지 않고 있
어 자막/원고/수화를 제공하더라도 사용자의 정보 접근에 문제를 야기하는
경우가 발생할 수 있다.
.co.kr
키보드사용자와 화면낭독기 사용자는 동일한가?
키보드 초점 이동이 가능하더라도 화면낭독기 사용자는 접근이 불가능할
수 있습니다. 화면낭독기 사용자는 키보드사용자(상지)와 분명히 다릅니다.
2.1.1 모든 기능은 키보드만으로도 사용할 수 있어야…
.co.kr
일반적으로 저시력 사용자는
시야 넓이가 매우 좁다
.co.kr
.co.kr
거리와 시야넓이
저시력 사람
보통 사람
.co.kr
확대 기능사용과 시야 넓이
1x
100 %
2x
25 %
3x
11.1 %
4x
6.2 %
.co.kr
동영상
Magnify.table.mp4
.co.kr
프로그램 시간
행사소개 (박태준) 12:30~13:00
네이버 웹 접근성 가이드라인 2.0 프리뷰 (조진주) 13:20~13:50
웹접근성 가이드라인의 사각 지대를 말하다 (김혜일/헤더스) 13:50~14:20
장차법의 해석을 통한 기업의 방향성 수립 요령 (류영일/헤더스,
이모션)
14:20~14:50
Break Time 14:50~15:10
테이블의 라인과 배경색
테이블의 선 스타일이 명확하지 않은 경우 셀 데이터의 상관관계를 이해하
기 어려울 수 있다.
테이블의 라인을 명확하게 하거나 셀배경색을 활용해서 이를 보완할 수 있
다.
.co.kr
…… 사용자가 마우스로 클릭하거나 키보드를 이용하여 입력한 후 기능이 실
행되어야 하며, 사용자가 예측할 수 없는 상황에서 정보를 제공하지 않아야
한다. 특히 사용자가 인지하지 못한 상황에서 새 창, 팝업 창 등을 제공하지
않아야 한다.
3.2.1 사용자가 의도하지 않은 기능은 실행되지 않아야…
Mouse over Mouse out
.co.kr
동영상
Layer.mouseover.mp4
.co.kr
소메뉴, 페이지탭제목, 현재위치표시 등을 모두 링크로 제공하면서 링크목
록 상호간에 구분이나 구별자를 전혀 제공하지 않아 콘텐츠의 구성을 이해
하는데 문제가 발생할 소지가 높다.
2.4.2 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공
2.4.3 링크 텍스트는 용도나 목적을 이해할 수 있도록 제공
.co.kr
.co.kr
.co.kr
암호입력, 이체금액, 입금계좌번호 등을 입력하는 편집창에서 화면낭독기의
음성출력이 정상적으로 동작하지 않아 웹을 이용하는데 문제가 발생한다.
4.2.1 콘텐츠에 포함된 웹 애플리케이션은 접근성이 있어야…
………………………………
.co.kr
일 일 일 일 일 일 일
일 일 일 일 일 일 일 일 일 일 일 일 일 일
.co.kr
지침을 아무런 의식없이 적용한다면…
.co.kr
지침을 바탕으로
사용자를 생각한다면…
[7/27 접근성세미나] 웹 접근성 가이드라인의 사각 지대를 말하다

Contenu connexe

Plus de 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
 
[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까Nts Nuli
 
[2012널리세미나] 모바일 크로스 브라우징, 그 끝은 어디인가?
[2012널리세미나] 모바일 크로스 브라우징, 그 끝은 어디인가?[2012널리세미나] 모바일 크로스 브라우징, 그 끝은 어디인가?
[2012널리세미나] 모바일 크로스 브라우징, 그 끝은 어디인가?Nts Nuli
 
[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기
[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기
[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기Nts Nuli
 
[2012널리세미나] 태블릿PC를 위한 마크업
[2012널리세미나] 태블릿PC를 위한 마크업[2012널리세미나] 태블릿PC를 위한 마크업
[2012널리세미나] 태블릿PC를 위한 마크업Nts Nuli
 

Plus de Nts Nuli (20)

[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널리세미나] 남의 문제 나의 문제 우리의 문제
 
[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
[2016널리세미나] 스크립트를 통한 접근성은 어떻게 지켜야 할까
 
[2012널리세미나] 모바일 크로스 브라우징, 그 끝은 어디인가?
[2012널리세미나] 모바일 크로스 브라우징, 그 끝은 어디인가?[2012널리세미나] 모바일 크로스 브라우징, 그 끝은 어디인가?
[2012널리세미나] 모바일 크로스 브라우징, 그 끝은 어디인가?
 
[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기
[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기
[2012널리세미나] 네이버 모바일의 숨겨진 코드 읽기
 
[2012널리세미나] 태블릿PC를 위한 마크업
[2012널리세미나] 태블릿PC를 위한 마크업[2012널리세미나] 태블릿PC를 위한 마크업
[2012널리세미나] 태블릿PC를 위한 마크업
 

Dernier

Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...Kim Daeun
 
A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)Tae Young Lee
 
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Wonjun Hwang
 
MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution DetectionMOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution DetectionKim Daeun
 
캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차캐드앤그래픽스
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Wonjun Hwang
 

Dernier (6)

Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
Continual Active Learning for Efficient Adaptation of Machine LearningModels ...
 
A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)A future that integrates LLMs and LAMs (Symposium)
A future that integrates LLMs and LAMs (Symposium)
 
Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)Console API (Kitworks Team Study 백혜인 발표자료)
Console API (Kitworks Team Study 백혜인 발표자료)
 
MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution DetectionMOODv2 : Masked Image Modeling for Out-of-Distribution Detection
MOODv2 : Masked Image Modeling for Out-of-Distribution Detection
 
캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차캐드앤그래픽스 2024년 5월호 목차
캐드앤그래픽스 2024년 5월호 목차
 
Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)Merge (Kitworks Team Study 이성수 발표자료 240426)
Merge (Kitworks Team Study 이성수 발표자료 240426)
 

[7/27 접근성세미나] 웹 접근성 가이드라인의 사각 지대를 말하다