Web accessibility for responsive web implementation

2013.11.07
Jang Sun Young | SNC Lab.
2
01

반응형 웹(Responsive Web Design)이란?

3
1.1 인터넷 사용환경의 변화
2010년 하반기부터 국내 스마트폰 사용량이 폭발적으로 증가함에 따라 웹을 이용하는 환경이 크게 변했다.
전 세계적으로 스마트폰 사용이 늘어나면서 모바일을 통한 인터넷 사용 비율이 높게 증...
1.1 인터넷 사용 환경의 변화
전 세계적으로는 아직까지 PC를 통한 인터넷 사용 비율이 높지만, 인도나 아프리카 일부 지역과 같이 유선 인터넷 망이 발달하지 못한
일부 지역은 모바일 사용량이 PC 사용량을 앞서기도 한...
1.1 인터넷 사용환경의 변화
2010년 4월 아이패드의 등장과 함께 PC보다 노트북보다 작은 크기로 휴대성이 편리한 태블릿PC 역시 그 사용도가 데스크탑PC를 앞
설 만큼 증가하고 있다.

(중략)

출처 : http...
1.1 인터넷 사용환경의 변화

<2012-2014 전세계 PC, 태블릿 PC, 스마트폰 출하량(자료: 가트너)>

출처 : http://www.bloter.net/archives/167550

7
1.2 디바이스별 해상도

제조사

넥서스7

1920x1200

tab8.0

1280x800

16:10

tab10.1

1280 x 800

mini

1024x768

ipad1

1024x768

4:3

i...
1.3 반응형 웹이란?

다양한 웹 디바이스의 확산

•  반응형 웹의 등장배경
최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 PC / 스마트폰/ 태블릿 등 서로 다른 해상도를 가진 디바이스
를 고려하...
1.3 반응형 웹이란?

<현대자동차 기업문화 홍보 사이트(http://pr.hyundai.com) >

•  반응형 웹이란?
반응형 웹 디자인은 모바일 폰에서 데스크탑 컴퓨터 모니터에 이르기까지 다양한 장치에 걸쳐 최...
02

반응형 웹의 현황

11
2.1 해외 반응형 웹 사이트 현황
트래픽 기준으로 미국 상위 155개 사이트 중 반응형 웹은 47개 사이트에 해당된다. 대표적인 사이트는 월트 디즈니(go.com), 마이크
로소프트(microsoft.com), 위키피...
2.2 대표 해외 반응형 웹 사이트

<월트 디즈니 회사 사이트>

<마이크로소프트 사이트>

13
2.3 국내 반응형 웹 사이트 현황
2013년 월별 오픈 된 사이트를 분석해 본 결과 1월부터 9월 제작 대비 반응형 웹의 제작 건수가 증가하는 것을 알 수 있다. 분기별 분
석 결과, 반응형 웹의 증가추세를 명확하게 ...
2.4 대표 국내 반응형 웹 사이트

<현대 자동차>

<현대 HGV >

15
03

반응형 웹의 접근성 사례

16
3.1 반응형 웹의 접근성 우수 사례

Ø 

사이트 명 : CJ PHARM

Ø 

ü  전문가 평가 결과

사이트 분석 :
큰 화면에서는 좌우로 펼쳐진 3단 형태의 레이아웃 형태로 제공되며 모
바일 화면에서는 ...
3.1 반응형 웹의 접근성 우수 사례

ü  전문가 평가 결과
CJ Pharm (http://www.cjp.co.kr)
웹(main1+ sub1)

모바일 웹(main1+ sub1)

1. 대체텍스트

준수

2. 자...
3.1 반응형 웹의 접근성 우수 사례

Ø 

사이트 명 : 현대증권

Ø 

ü  전문가 평가 결과

사이트 분석 :
반응형 웹 사이트 중 증권사 사이트로 어떤 디바이스에서도 동일한 정보
를 제공하고 있으며,
직...
3.1 반응형 웹의 접근성 우수 사례

ü  전문가 평가 결과
현대증권 (https://www.hdable.co.kr/go.able)
웹(main1+ sub1)

모바일 웹(main1+ sub1)

1. 대체텍스트
2...
3.2 반응형 웹의 접근성 문제 사례

Ø 

사이트명 : 한국조폐공사

Ø 

ü  전문가 평가 결과

사이트 분석 :
상단에 메뉴와 하단 콘텐츠 형태의 레이아웃으로 구성된 사이트
로 모바일로 접근할 경우, 메뉴...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과
한국조폐공사 (http://www.komsco.com/contents/main/main.do)
웹(main1+ sub1)

모바일 웹(main1+ sub1...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과

1
1

2

키보드 초점은 링크 접근 시 점선의 테두리로 나타나
시각적으로 위치를 확인할 수 있도록 제공해야 한다
. (css/js 확인 필요)

4
...
3.2 반응형 웹의 접근성 문제 사례

Ø 

사이트 명 : 한국조폐공사 영문사이트

Ø 

ü  전문가 평가 결과

사이트 분석 :
국문 사이트와 동일한 구조의 웹사이트로 이국적인 디자
인 스타일 및 텍스트 위주...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과
KOMSCO ( http://english.komsco.com/)
웹(main1+ sub1)

모바일 웹(main1+ sub1)

1. 대체텍스트

준수
...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과

1

키보드 초점은 링크 접근 시 점선의 테두리로
나타나 시각적으로 위치를 확인할 수 있도록

1

제공해야 한다. (css/js 확인 필요).

2

...
3.2 반응형 웹의 접근성 문제 사례

Ø 

사이트명 : 삼성전자 서비스

Ø 

ü  전문가 평가 결과

사이트 분석 :
삼성전자 서비스 사이트로 상·하단 구조의 레이아웃 구조를 작은
디바이스 환경에서는 아이콘...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과
삼성전자서비스 (http://www.samsungsvc.co.kr/index.do)
웹(main1+ sub1)

모바일 웹(main1+ sub1)

1. ...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과

1

1 Life companion 이미지와 동일한 alt 값을 제공한다.
alt=“갤럭시 S4 완전정복2”
↓

3

alt=“Life companio...
3.2 반응형 웹의 접근성 문제 사례

Ø 

사이트 명 : 유니온스틸 사이트

Ø 

ü  전문가 평가 결과

사이트 분석 :
비주얼 요소를 다단 구조로 제공하고 있으며, 모바일/태블릿/PC에
서 각기 다른 최적...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과
유니온 스틸 (http://www.unionsteel.co.kr/ko/main.do)
웹(main1+ sub1)

모바일 웹(main1+ sub1)

1....
3.2 반응형 웹의 접근성 문제 사례
1

ü  전문가 평가 결과

1

키보드 초점은 링크 접근 시 점선의 테두리로 나타나 시
각적으로 위치를 확인할 수 있도록 제공해야 한다. (css
/js 확인 필요)

2

현...
3.2 반응형 웹의 접근성 문제 사례

Ø 

사이트 명 : 삼성 스토어 사이트

Ø 

ü  전문가 평가 결과

사이트 분석 : 삼성전자 스토어 사이트로 블록으로 구성
된 콘텐츠 형태의 레이아웃으로
제공한
다.
...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과
삼성전자 스토어 (http://store.samsung.com/sec/)
웹(main1+ sub1)

모바일 웹(main1+ sub1)

1. 대체텍스트
...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과

1 대체텍스트는 이미지의 내용과 동일하게 제공해야 한다.
3
2
1

2 Input 요소에 1:1 대응하는 <label>요소 또는
title 속성을 제공...
3.2 반응형 웹의 접근성 문제 사례

Ø 

사이트 명 : Samsung-Engineering

Ø 

ü  전문가 평가 결과

사이트 분석 :
메뉴와 콘텐츠 영역의 다단 레이아웃의 효과적 사용으로 태블릿과 모
...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과
삼성전자 엔지니어링 (http://www.samsungengineering.com/kor/index)
웹(main1+ sub1)

모바일 웹(main1+ ...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과

1
1

대체텍스트는 이미지의 내용과 동일하게 제공해야 한
다.
그러나 의미가 없는 이미지(배경이나 아이콘 등)는 al
t속성을 제공하되 빈 값으로 제공...
3.2 반응형 웹의 접근성 문제 사례

Ø 

ü  전문가 평가 결과

사이트명 : PROGRESSIVE EXR

Ø  사이트 분석 :
- 콘텐츠와 메뉴를 좌우구조의 레이아웃으로 제공하였으며,
콘텐츠 구성의 경우 ...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과
EXR (http://www.exrkorea.com/main.asp)
웹(main1+ sub1)

모바일 웹(main1+ sub1)

1. 대체텍스트

미...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과
2

?

1

대체텍스트는 누락되거나 불충분하게 제공하지
않고, 이미지의 내용과 동일하게 제공해야 한
다.

2

현재, 반복영역 건너뛰기 링크가 없다....
3.2 반응형 웹의 접근성 문제 사례

Ø 

사이트 명 : 코카콜라

Ø 

ü  전문가 평가 결과

사이트 분석 :
위젯 스타일의 레이아웃 형태로 콘텐츠를 제공하며, 레이아웃 변화 시
다양한 효과를 통하여 재미...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과
코카콜라 코리아 (http://www.cocacola.co.kr/)
웹(main1+ sub1)

모바일 웹(main1+ sub1)

1. 대체텍스트
2. ...
3.2 반응형 웹의 접근성 문제 사례

ü  전문가 평가 결과

1
1

2

대체텍스트는 누락되거나 불충분하게 제공하지
않고, 이미지의 내용과 동일하게 제공해야 한다.

콘텐츠에 키보드 접근이 가능해야 한다.

3
...
04

반응형 웹, 시각장애인이 사용할 수 있나?
(시각장애인 반응형 웹 시연)

45
시각장애인의 사용자 평가 - 현대증권

ü  전문가 평가 결과

Ø 

사이트명 : 현대증권

PC

IOS

Android

Ø 

사용자 평가 결과 :

오류

상(上)

상(上)

- PC : 스크린 이용시 ...
시각장애인의 사용자 평가 – CJ PHARMA

Ø 

사이트명 : CJ PHARMA

Ø 

사용자 평가 결과 :

- PC : 22개 지침을 모두 준수하여 사이트 이용 가능
- Mobile : 모바일에서만 제공 ...
시각장애인의 사용자 평가 – 삼성전자 서비스

Ø 

사이트명 : 삼성전자 서비스

Ø 

사용자 평가 결과 :

- PC : 6개 지침을 준수하지 않아 사이트 이용 불가
- Mobile : 포커스 이동 시 최상위 ...
시각장애인의 사용자 평가 - 코카콜라

Ø 

사이트명 : 코카콜라

Ø 

사용자 평가 결과 :

- PC : 동영상에 대한 버튼에 포커스 이동 불가
대체텍스트 / 키보드 사용보장 등 주요지침 미준수
- Mobil...
05

반응형 웹 제작 시 유의사항

50
5.1 반응형 웹 제작 방법
반응형 웹의 경우 HTML 1개로 디바이스별 미디어 쿼리를 사용하여 해상도 별로 다른 레이아웃을 제공한다.

Tablet

JS
JS
CSS
HTML

CSS

PC

JS
Mobile

C...
5.2 제작 시 고려사항
HTML 1개로 반응형 웹을 구현하기 때문에 기본적인 항목에 대해서는 준수해야 한다.
특히 CSS와 JS의 경우 해당 지침에 대하여 주의 해야 한다.

CSS

HTML

콘텐츠 명도대비
콘텐츠...
5.3 제작시 고려사항 – 콘텐츠 명도대비

<명도대비 준수된 PC용 시스템 폰트>

<명도대비 미준수된 모바일용 시스템 폰트>

문제점
디바이스 별로 미디어쿼리를 사용하여 CSS를 분리하기 때문에 PC버전에서는 명도대...
5.3 제작시 고려사항 – 콘텐츠 선형화
PC에서 MOBILE로 넘어갈 때 제공되던 공지사항 레이어 팝업을 확인 할 수 없다.
레이아웃 변경으로 인하여 콘텐츠를 축약 혹은 숨김 처리시에는 display: none; / ...
5.3 제작시 고려사항 - 기본언어표시
PC의 스크린 리더로 사이트 접근시 영어와 한글 언어를 제대로 읽어준다.

Lang=en

55
5.3 제작시 고려사항 - 기본언어표시

Lang=en

문제점
Lang 속성이 en(영어) 이며, 콘텐츠중 한글이 있는 경우, Pc의 센스리
더에서는 영어와 한글을 읽는데 무리가 없으나 모바일(IOS)의 경우, 영
어...
5.3 제작시 고려사항 – 키보드사용보장
PC에서 MOBILE로 넘어갈 때, 메뉴바가 가려져 비장애인의 경우 사용 할 수 없다.

- Voiceover사용자는 지장 없음.

57
5.3 제작시 고려사항 – 반복영역 건너뛰기

MOBILE에서
초점이동

문제점
Pc의 스킵 네비게이션을 그대로 사용할 경우 모바일
에서는 원하는 곳으로 초점이동이 되지 않음.

보완방법
모바일의 경우 스킵 네비게이션을...
06

반응형 웹의 미래

59
6. 반응형 웹의 미래

60
웹 접근성 컨설팅 / 웹 접근성 인증마크 대행 / 웹 사이트 제작

장선영

서울 성동구 성수2가 3동 277-43 한신아크밸리 지식산업센터 805호
E-mail : cs.snclab@gmail.com

장석현

Tel...
웹접근성캠프서울 반응형웹에서의접근성확보방법
Upcoming SlideShare
Loading in …5
×

웹접근성캠프서울 반응형웹에서의접근성확보방법

1,620 views

Published on

제2회 접근성캠프서울
반응형웹에서의 접근성 확보 방법

Published in: Business
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,620
On SlideShare
0
From Embeds
0
Number of Embeds
16
Actions
Shares
0
Downloads
49
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

웹접근성캠프서울 반응형웹에서의접근성확보방법

  1. 1. Web accessibility for responsive web implementation 2013.11.07 Jang Sun Young | SNC Lab.
  2. 2. 2
  3. 3. 01 반응형 웹(Responsive Web Design)이란? 3
  4. 4. 1.1 인터넷 사용환경의 변화 2010년 하반기부터 국내 스마트폰 사용량이 폭발적으로 증가함에 따라 웹을 이용하는 환경이 크게 변했다. 전 세계적으로 스마트폰 사용이 늘어나면서 모바일을 통한 인터넷 사용 비율이 높게 증가하고 있다. <2009~2013 국내 Desktop vs Mobile 사용 비율> 출처 : http://gs.statcounter.com/#mobile_vs_desktop-KR-yearly-2009-2013 4
  5. 5. 1.1 인터넷 사용 환경의 변화 전 세계적으로는 아직까지 PC를 통한 인터넷 사용 비율이 높지만, 인도나 아프리카 일부 지역과 같이 유선 인터넷 망이 발달하지 못한 일부 지역은 모바일 사용량이 PC 사용량을 앞서기도 한다. 모바일을 통한 인터넷 사용 비율은 계속 증가하고 있으며, 스마트폰의 보급 에 따라 더 확대될 것으로 예상된다. <주요 국가 2013년 2분기 Desktop vs Mobile 웹 사용 비율> 출처 : http://gs.statcounter.com/#mobile_vs_desktop-ww-quarterly-201302-201302-map 5
  6. 6. 1.1 인터넷 사용환경의 변화 2010년 4월 아이패드의 등장과 함께 PC보다 노트북보다 작은 크기로 휴대성이 편리한 태블릿PC 역시 그 사용도가 데스크탑PC를 앞 설 만큼 증가하고 있다. (중략) 출처 : http://www.newstomato.com/readNews.aspx?no=407734 6
  7. 7. 1.1 인터넷 사용환경의 변화 <2012-2014 전세계 PC, 태블릿 PC, 스마트폰 출하량(자료: 가트너)> 출처 : http://www.bloter.net/archives/167550 7
  8. 8. 1.2 디바이스별 해상도 제조사 넥서스7 1920x1200 tab8.0 1280x800 16:10 tab10.1 1280 x 800 mini 1024x768 ipad1 1024x768 4:3 ipad2 1024x768 4:3 ipad retina 2048x1536 4:3 애플 <태블릿 기종별 해상도> S4 1920 x 1080 ( Full HD) 16:9 1280 x 800 16:10 720 x 1280 (HD) 16:10 1920 X 1080 ( Full HD) 16:9 1920 X 1080 ( Full HD) 16:9 1920 X 1080 ( Full HD) 16:9 4 4:3 16:9 G2 16:10 삼성 720 X 1280 (HD) pro 16:10 3:5 note3 구글 480x800 note2 비율 2:3 note1 해상도 320x480 S3 기종 비율 S2 제조사 해상도 S 삼성     기종 960x640 3:2 4S 960x640 3:2 5 1136x640 16:9 5S 1136x640 16:9 엘지  아이폰 <스마트폰 기종별 해상도> 출처 : 제조사 사이트 8
  9. 9. 1.3 반응형 웹이란? 다양한 웹 디바이스의 확산 •  반응형 웹의 등장배경 최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 PC / 스마트폰/ 태블릿 등 서로 다른 해상도를 가진 디바이스 를 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기 존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만, 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어 렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것 이 반응형 웹(Responsive Web)이다. 9
  10. 10. 1.3 반응형 웹이란? <현대자동차 기업문화 홍보 사이트(http://pr.hyundai.com) > •  반응형 웹이란? 반응형 웹 디자인은 모바일 폰에서 데스크탑 컴퓨터 모니터에 이르기까지 다양한 장치에 걸쳐 최적의 사용 환경을 제공하기 위한 정교한 사이트를 목표로 한 웹 디자인 접근 방법이다. 그것은 쉽게 읽을 수 있고 탐색할 수 있으며, 최소한의 크기 조정 및 스크롤링 을 기반으로 한다. 출처 : http://en.wikipedia.org/wiki/Responsive_web_design 10
  11. 11. 02 반응형 웹의 현황 11
  12. 12. 2.1 해외 반응형 웹 사이트 현황 트래픽 기준으로 미국 상위 155개 사이트 중 반응형 웹은 47개 사이트에 해당된다. 대표적인 사이트는 월트 디즈니(go.com), 마이크 로소프트(microsoft.com), 위키피디아(wikipedia.org)가 있으며, 반응형 웹으로 제공되는 사이트의 경우 특정한 분야에 치중되지 않 고, 브랜드 / SNS / 커뮤니티 등 다양한 분야에서 활용되고 있다. 반응형웹 47 웹 108 <미국 반응형 웹 사이트 통계-2013년 10월 기준> 출처 : www.alexa.com 12
  13. 13. 2.2 대표 해외 반응형 웹 사이트 <월트 디즈니 회사 사이트> <마이크로소프트 사이트> 13
  14. 14. 2.3 국내 반응형 웹 사이트 현황 2013년 월별 오픈 된 사이트를 분석해 본 결과 1월부터 9월 제작 대비 반응형 웹의 제작 건수가 증가하는 것을 알 수 있다. 분기별 분 석 결과, 반응형 웹의 증가추세를 명확하게 확인할 수 있다. 이와 같이 홈페이지 개편 시 반응형 웹을 활용하여 점차 다양해지는 디바이 스 환경을 고려하여 제작하고 있다. 60 160 140 50 120 40 100 54 30 20 30 38 38 36 23 2 3 1 1월 2월 3월 5 4월 4 5월 2 6월 7 7월 반응형 80 60 제작 137 88 반응형 91 40 12 10 0 제작 38 47 20 10 8월 4 9월 <2013 월별 제작대비 반응형 웹 현황> 0 6 11 1분기 2분기 21 3분기 <2013 분기별제작대비 반응형 웹 현황> 출처 : 오픈 / 리뉴얼 정보커뮤니티 (www.dbcut.com) 14
  15. 15. 2.4 대표 국내 반응형 웹 사이트 <현대 자동차> <현대 HGV > 15
  16. 16. 03 반응형 웹의 접근성 사례 16
  17. 17. 3.1 반응형 웹의 접근성 우수 사례 Ø  사이트 명 : CJ PHARM Ø  ü  전문가 평가 결과 사이트 분석 : 큰 화면에서는 좌우로 펼쳐진 3단 형태의 레이아웃 형태로 제공되며 모 바일 화면에서는 상하 구조의 레이아웃 형태로 제공한다. 17
  18. 18. 3.1 반응형 웹의 접근성 우수 사례 ü  전문가 평가 결과 CJ Pharm (http://www.cjp.co.kr) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 준수 2. 자막 제공 준수 3. 색에 무관한 콘텐츠 인식 준수 4. 명확한 지시사항 제공 준수 5. 텍스트 콘텐츠의 명도대비 준수 6. 배경음 사용 금지 준수 7. 키보드 사용 보장 준수 8. 초점 이동 준수 9. 응답시간 조절 준수 10. 정지 기능 제공 준수 CJ Networks 메뉴를 펼친 뒤, 초점이동이 부정 11. 깜빡임과 번쩍임 제한 준수 확함. (Mobile) 12. 반복영역 건너뛰기 준수 MOBILE 화면에서 선형화로 인한 사용성 문제가 13. 제목 제공 준수 14. 적절한 링크텍스트 준수 15. 기본언어 표시 준수 16. 사용자 요구에 따른 실행 준수 17. 콘텐츠의 선형화 준수 18. 표의 구성 준수 19. 레이블 제공 준수 20. 오류 정정 준수 21. 마크업 오류 방지 준수 22. 웹 어플리케이션 접근성 준수 Ø  문제점 1.  2.  생김 (Mobile) 3.  명도대비가 2.86:1 로 미준수 (Mobile) 1.  대체텍스트 준수 2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 미준수 5. 객체 접근성 준수 6. 누르기 동작 지원 준수 7. 운영체제 접근성 준수 8. 충분한 시간 제공 준수 9. 깜박거림의 사용 제한 준수 10. 쉬운 내비게이션 준수 11. 예측 가능성 준수 12. 문법 준수 준수 18
  19. 19. 3.1 반응형 웹의 접근성 우수 사례 Ø  사이트 명 : 현대증권 Ø  ü  전문가 평가 결과 사이트 분석 : 반응형 웹 사이트 중 증권사 사이트로 어떤 디바이스에서도 동일한 정보 를 제공하고 있으며, 직관적인 디자인으로 구성되어 있어 사용자로 하여금 사이트 이용이 보 다 수월하고 편리하다. 19
  20. 20. 3.1 반응형 웹의 접근성 우수 사례 ü  전문가 평가 결과 현대증권 (https://www.hdable.co.kr/go.able) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 2. 자막 제공 준수 3. 색에 무관한 콘텐츠 인식 준수 4. 명확한 지시사항 제공 준수 5. 텍스트 콘텐츠의 명도대비 준수 6. 배경음 사용 금지 준수 7. 키보드 사용 보장 준수 8. 초점 이동 준수 9. 응답시간 조절 준수 10. 정지 기능 제공 Ø  22개의 웹 접근성 항목 모두 준수 준수 준수 11. 깜빡임과 번쩍임 제한 준수 12. 반복영역 건너뛰기 준수 13. 제목 제공 준수 14. 적절한 링크텍스트 준수 15. 기본언어 표시 준수 16. 사용자 요구에 따른 실행 준수 17. 콘텐츠의 선형화 준수 18. 표의 구성 준수 19. 레이블 제공 준수 20. 오류 정정 준수 21. 마크업 오류 방지 준수 22. 웹 어플리케이션 접근성 준수 1.  대체텍스트 준수 2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 준수 5. 객체 접근성 준수 6. 누르기 동작 지원 준수 7. 운영체제 접근성 준수 8. 충분한 시간 제공 준수 9. 깜박거림의 사용 제한 준수 10. 쉬운 내비게이션 준수 11. 예측 가능성 준수 12. 문법 준수 준수 20
  21. 21. 3.2 반응형 웹의 접근성 문제 사례 Ø  사이트명 : 한국조폐공사 Ø  ü  전문가 평가 결과 사이트 분석 : 상단에 메뉴와 하단 콘텐츠 형태의 레이아웃으로 구성된 사이트 로 모바일로 접근할 경우, 메뉴가 퀵 메뉴 형태로 제공되며 콘텐 츠 부각이 되도록 레이아웃이 변경된다. 21
  22. 22. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 한국조폐공사 (http://www.komsco.com/contents/main/main.do) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 미준수 2. 자막 제공 준수 3. 색에 무관한 콘텐츠 인식 준수 4. 명확한 지시사항 제공 준수 5. 텍스트 콘텐츠의 명도대비 준수 6. 배경음 사용 금지 준수 7. 키보드 사용 보장 준수 8. 초점 이동 Ø  문제점 9. 응답시간 조절 10. 정지 기능 제공 1.  대체텍스트 미준수 2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 준수 5. 객체 접근성 준수 6. 누르기 동작 지원 준수 7. 운영체제 접근성 준수 8. 충분한 시간 제공 준수 9. 깜박거림의 사용 제한 준수 10. 쉬운 내비게이션 준수 11. 예측 가능성 준수 12. 문법 준수 준수 미준수 준수 미준수 1.  본문, 서브메뉴 바로 가기 미작동. 11. 깜빡임과 번쩍임 제한 2.  배너 이미지의 불충분한 대체 텍스트 제공. 12. 반복영역 건너뛰기 3.  초점 시각화 미제공. 13. 제목 제공 준수 4.  본문, 서브메뉴 바로 가기 링크 미작동. 14. 적절한 링크텍스트 준수 5.  자동 변화하는 배너의 이전, 다음, 정지 기능 미제공 15. 기본언어 표시 준수 . 16. 사용자 요구에 따른 실행 준수 미준수 미준수 17. 콘텐츠의 선형화 준수 18. 표의 구성 준수 19. 레이블 제공 준수 20. 오류 정정 준수 21. 마크업 오류 방지 준수 22. 웹 어플리케이션 접근성 준수 22
  23. 23. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 1 1 2 키보드 초점은 링크 접근 시 점선의 테두리로 나타나 시각적으로 위치를 확인할 수 있도록 제공해야 한다 . (css/js 확인 필요) 4 4 대체텍스트는 이미지의 내용과 동일하게 제공해야 한다. 3 2 본문과 서브메뉴 바로 가기 링크(<a>)에 본 문과 서브메뉴 영역의 id값을 href 속성으로 참조시킨다. 자동으로 변화하는 콘텐츠에는 이전, 다음, 정지 기 능을 제공하여 제어할 수 있도록 구현해야 한다. 5 팝업을 띄울 시에는 새 창이 아닌 별도의 팝업존을 제공하거나, 팝업 내용으로 이동할 수 있는 링크영역 을 상단에 제공할 수 있다. 3 2 3 5 23
  24. 24. 3.2 반응형 웹의 접근성 문제 사례 Ø  사이트 명 : 한국조폐공사 영문사이트 Ø  ü  전문가 평가 결과 사이트 분석 : 국문 사이트와 동일한 구조의 웹사이트로 이국적인 디자 인 스타일 및 텍스트 위주의 정보 구성을 통하여 사이트 콘텐츠 제공한다. 24
  25. 25. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 KOMSCO ( http://english.komsco.com/) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 준수 2. 자막 제공 준수 3. 색에 무관한 콘텐츠 인식 준수 4. 명확한 지시사항 제공 준수 5. 텍스트 콘텐츠의 명도대비 준수 6. 배경음 사용 금지 준수 7. 키보드 사용 보장 준수 8. 초점 이동 키보드에 의한 초점은 시각적으로 구별 할 수 없음. 2.  배치형 테이블에 th를 사용함 준수 10. 정지 기능 제공 1.  준수 2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 준수 5. 객체 접근성 준수 6. 누르기 동작 지원 준수 7. 운영체제 접근성 준수 8. 충분한 시간 제공 준수 9. 깜박거림의 사용 제한 준수 10. 쉬운 내비게이션 준수 11. 예측 가능성 준수 12. 문법 준수 준수 미준수 9. 응답시간 조절 Ø  문제점 1.  대체텍스트 준수 11. 깜빡임과 번쩍임 제한 준수 12. 반복영역 건너뛰기 준수 13. 제목 제공 준수 14. 적절한 링크텍스트 준수 15. 기본언어 표시 준수 16. 사용자 요구에 따른 실행 준수 17. 콘텐츠의 선형화 준수 18. 표의 구성 미준수 19. 레이블 제공 준수 20. 오류 정정 준수 21. 마크업 오류 방지 준수 22. 웹 어플리케이션 접근성 준수 25
  26. 26. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 1 키보드 초점은 링크 접근 시 점선의 테두리로 나타나 시각적으로 위치를 확인할 수 있도록 1 제공해야 한다. (css/js 확인 필요). 2 - 배치형 테이블은 아래처럼 변경해야 한다. <th>First issuance</th> ↓ <td>First issuance</td> - Caption과 summary는 사용하지 않는다. 2 26
  27. 27. 3.2 반응형 웹의 접근성 문제 사례 Ø  사이트명 : 삼성전자 서비스 Ø  ü  전문가 평가 결과 사이트 분석 : 삼성전자 서비스 사이트로 상·하단 구조의 레이아웃 구조를 작은 디바이스 환경에서는 아이콘 이미지를 생략하고 텍스트 메뉴를 제 공하는 형태로 레이아웃 변경된다. 27
  28. 28. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 삼성전자서비스 (http://www.samsungsvc.co.kr/index.do) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 2. 자막 제공 준수 3. 색에 무관한 콘텐츠 인식 준수 4. 명확한 지시사항 제공 준수 5. 텍스트 콘텐츠의 명도대비 준수 6. 배경음 사용 금지 준수 7. 키보드 사용 보장 준수 8. 초점 이동 준수 9. 응답시간 조절 Ø  문제점 미준수 준수 10. 정지 기능 제공 준수 11. 깜빡임과 번쩍임 제한 준수 12. 반복영역 건너뛰기 준수 13. 제목 제공 준수 1.  이미지와 무관한 대체 텍스트 제공 2.  링크 텍스트 제공하지 않음 14. 적절한 링크텍스트 3.  메인 메뉴와 하위 메뉴를 중첩하지 않음 15. 기본언어 표시 ID 중복사용 16. 사용자 요구에 따른 실행 준수 5.  움직이는 배너 정지제공X (Mobile) 17. 콘텐츠의 선형화 초점 상단 튐 (Mobile) 18. 표의 구성 미준수 2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 준수 5. 객체 접근성 미준수 6. 누르기 동작 지원 준수 7. 운영체제 접근성 준수 8. 충분한 시간 제공 미준수 미준수 6.  미준수 준수 4.  1.  대체텍스트 미준수 19. 레이블 제공 준수 준수 10. 쉬운 내비게이션 준수 11. 예측 가능성 준수 12. 문법 준수 준수 준수 20. 오류 정정 9. 깜박거림의 사용 제한 21. 마크업 오류 방지 22. 웹 어플리케이션 접근성 미준수 준수 28
  29. 29. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 1 1 Life companion 이미지와 동일한 alt 값을 제공한다. alt=“갤럭시 S4 완전정복2” ↓ 3 alt=“Life companion” 4 2 링크 텍스트를 제공해야 한다. (의미 없는 이미지라도 링크가 있으면 대체 텍스트를 제공) 2 3 키보드 포커스는 빠른 해결 다음 빠른 해결 하위 메뉴 순서로 진행 되어야 한다. (상위메뉴 리스트 안에 하위 메뉴가 중첩으로 되어 있어야 함.) 4 id="lst_problem“ 중복 사용할 수 없다. 29
  30. 30. 3.2 반응형 웹의 접근성 문제 사례 Ø  사이트 명 : 유니온스틸 사이트 Ø  ü  전문가 평가 결과 사이트 분석 : 비주얼 요소를 다단 구조로 제공하고 있으며, 모바일/태블릿/PC에 서 각기 다른 최적화된 레이아웃의 사이트를 제공하고 있다. 또한 이미지가 아닌 시스템 폰트를 사용하여 디바이스별 호환성을 고려 하였다. 30
  31. 31. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 유니온 스틸 (http://www.unionsteel.co.kr/ko/main.do) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 2. 자막 제공 본문 바로가기 링크 클릭 시 본문이 아닌 다른 위 치로 이동. 3.  준수 6. 배경음 사용 금지 2.  준수 5. 텍스트 콘텐츠의 명도대비 이미지 링크에 초점 시각화 미제공. 준수 4. 명확한 지시사항 제공 1.  준수 3. 색에 무관한 콘텐츠 인식 Ø  문제점 준수 준수 7. 키보드 사용 보장 준수 8. 초점 이동 1.  대체텍스트 준수 2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 준수 미준수 9. 응답시간 조절 준수 10. 정지 기능 제공 준수 미준수 준수 11. 깜빡임과 번쩍임 제한 5. 객체 접근성 12. 반복영역 건너뛰기 미준수 전체메뉴 펼치기를 누를 경우 펼쳐졌다가 다시 자 13. 제목 제공 14. 적절한 링크텍스트 준수 15. 기본언어 표시 준수 17. 콘텐츠의 선형화 준수 19. 레이블 제공 준수 21. 마크업 오류 방지 준수 22. 웹 어플리케이션 접근성 준수 8. 충분한 시간 제공 준수 9. 깜박거림의 사용 제한 준수 10. 쉬운 내비게이션 준수 11. 예측 가능성 준수 12. 문법 준수 준수 준수 20. 오류 정정 미준수 준수 18. 표의 구성 7. 운영체제 접근성 준수 16. 사용자 요구에 따른 실행 준수 준수 동으로 닫힘 (Mobile) 6. 누르기 동작 지원 31
  32. 32. 3.2 반응형 웹의 접근성 문제 사례 1 ü  전문가 평가 결과 1 키보드 초점은 링크 접근 시 점선의 테두리로 나타나 시 각적으로 위치를 확인할 수 있도록 제공해야 한다. (css /js 확인 필요) 2 현재 서브페이지의 본문 바로가기 링크가 현재 본문이 아 닌 반복되는 콘텐츠 영역으로 이동되고 있다. 본문 바로가기 링크는 반복되는 모든 영역을 건너뛰어, 실제 본문영역 <div>의 id값을 href속성에 참조시켜야 한다. 여기서는 <div class="content">에 id속성을 추가하여 해당 id를 본문 바로가기 링크와 연결시킨다. 2 32
  33. 33. 3.2 반응형 웹의 접근성 문제 사례 Ø  사이트 명 : 삼성 스토어 사이트 Ø  ü  전문가 평가 결과 사이트 분석 : 삼성전자 스토어 사이트로 블록으로 구성 된 콘텐츠 형태의 레이아웃으로 제공한 다. 33
  34. 34. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 삼성전자 스토어 (http://store.samsung.com/sec/) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 2. 자막 제공 준수 9. 응답시간 조절 준수 10. 정지 기능 제공 4.  준수 8. 초점 이동 3.  준수 7. 키보드 사용 보장 레이블 제공 준수 6. 배경음 사용 금지 2.  준수 5. 텍스트 콘텐츠의 명도대비 이미지와 무관한 대체 텍스트 제공 준수 4. 명확한 지시사항 제공 1.  준수 3. 색에 무관한 콘텐츠 인식 Ø  문제점 미준수 준수 11. 깜빡임과 번쩍임 제한 준수 12. 반복영역 건너뛰기 준수 13. 제목 제공 1.  대체텍스트 미준수 2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 준수 5. 객체 접근성 미준수 6. 누르기 동작 지원 준수 7. 운영체제 접근성 준수 8. 충분한 시간 제공 준수 9. 깜박거림의 사용 제한 준수 미준수 14. 적절한 링크텍스트 준수 15. 기본언어 표시 준수 ID 중복사용 16. 사용자 요구에 따른 실행 준수 초점이 최상단으로 튕김 (Mobile) 17. 콘텐츠의 선형화 준수 18. 표의 구성 준수 19. 레이블 제공 20. 오류 정정 21. 마크업 오류 방지 22. 웹 어플리케이션 접근성 10. 쉬운 내비게이션 미준수 미준수 준수 미준수 준수 11. 예측 가능성 12. 문법 준수 준수 미준수 34
  35. 35. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 1 대체텍스트는 이미지의 내용과 동일하게 제공해야 한다. 3 2 1 2 Input 요소에 1:1 대응하는 <label>요소 또는 title 속성을 제공한다. 3 id는 중복 사용할 수 없다. (id = “guestEmail” id는 한 페이지에 중복 사용 불가능) 35
  36. 36. 3.2 반응형 웹의 접근성 문제 사례 Ø  사이트 명 : Samsung-Engineering Ø  ü  전문가 평가 결과 사이트 분석 : 메뉴와 콘텐츠 영역의 다단 레이아웃의 효과적 사용으로 태블릿과 모 바일에서 메뉴를 열고 닫는 기능을 수행할 수 있어 디바이스 별로 효과 적인 레이아웃을 구현하고 있다. 또한 내용의 대부분이 시스템 폰트를 사용한 점은 기기에 따른 유동적 배치를 효율적으로 구현하였다. 36
  37. 37. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 삼성전자 엔지니어링 (http://www.samsungengineering.com/kor/index) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 미준수 2. 자막 제공 준수 3. 색에 무관한 콘텐츠 인식 준수 4. 명확한 지시사항 제공 준수 5. 텍스트 콘텐츠의 명도대비 준수 6. 배경음 사용 금지 준수 7. 키보드 사용 보장 준수 8. 초점 이동 준수 10. 정지 기능 제공 11. 깜빡임과 번쩍임 제한 준수 12. 반복영역 건너뛰기 준수 13. 제목 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 준수 14. 적절한 링크텍스트 준수 자동으로 변화하는 배너의 콘트롤러 작동 시 15. 기본언어 표시 16. 사용자 요구에 따른 실행 (의도하지 않은 초점 변화이므로 검사항목 16. 17. 콘텐츠의 선형화 준수 18. 표의 구성 준수 19. 레이블 제공 준수 20. 오류 정정 준수 21. 마크업 오류 방지 준수 22. 웹 어플리케이션 접근성 준수 미준수 준수 초점이 상단으로 빠짐. 5. 객체 접근성 준수 미지에 대체텍스트를 제공함. 대체텍스트가 잘못 제공되거나, 의미 없는 이 에서 동시 감점.) 3.  2. 자막·수화의 멀티미디어 제공 준수 Ø  문제점 2.  미준수 미준수 9. 응답시간 조절 1.  1.  대체텍스트 레이어팝업에서의 비논리적 초점 이동. 미준수 6. 누르기 동작 지원 준수 7. 운영체제 접근성 준수 8. 충분한 시간 제공 준수 9. 깜박거림의 사용 제한 준수 10. 쉬운 내비게이션 준수 11. 예측 가능성 준수 12. 문법 준수 준수 37
  38. 38. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 1 1 대체텍스트는 이미지의 내용과 동일하게 제공해야 한 다. 그러나 의미가 없는 이미지(배경이나 아이콘 등)는 al t속성을 제공하되 빈 값으로 제공한다. (alt=“”) 2 현재, 배너 이미지의 링크 목록의 마우스 클릭 이벤트 는 제대로 작동하나, 키보드 엔터 시 초점이 상단으로 빠지는 문제 발생. 초점은 그대로 머물러 있고 해당 배너 이미지로 바뀌는 기능만 실행되어야 한다. 3 레이어 팝업은 해당 링크 클릭 시 초점이 레이어 팝업 영역으로 이동하여 레이어 팝업 내의 모든 링크를 키보 드 Tab키로 거칠 수 있어야 하며, 닫기를 누르면 원래 있던 위치로 돌아갈 수 있어야 한다. 2 1 1 3 38
  39. 39. 3.2 반응형 웹의 접근성 문제 사례 Ø  ü  전문가 평가 결과 사이트명 : PROGRESSIVE EXR Ø  사이트 분석 : - 콘텐츠와 메뉴를 좌우구조의 레이아웃으로 제공하였으며, 콘텐츠 구성의 경우 블록형태로 제공. - 큰 화면에서는 메뉴와 콘텐츠가 좌우 형태로 제공 되며, 모바일에서는 메뉴와 콘텐츠와의 구성이 상하 구조로 제공. 39
  40. 40. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 EXR (http://www.exrkorea.com/main.asp) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 미준수 2. 자막 제공 준수 3. 색에 무관한 콘텐츠 인식 준수 4. 명확한 지시사항 제공 준수 5. 텍스트 콘텐츠의 명도대비 준수 6. 배경음 사용 금지 준수 7. 키보드 사용 보장 준수 8. 초점 이동 미준수 2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 준수 미준수 9. 응답시간 조절 준수 10. 정지 기능 제공 준수 5. 객체 접근성 미준수 준수 11. 깜빡임과 번쩍임 제한 Ø  문제점 1.  대체텍스트 1.  불충분한 대체텍스트 제공. 12. 반복영역 건너뛰기 준수 2.  반복영역 건너뛰기 링크 없음. 13. 제목 제공 패밀리/글로벌 사이트의 키보드 접근 불가. 14. 적절한 링크텍스트 준수 4.  레이어 팝업의 비논리적 초점 이동. 15. 기본언어 표시 준수 7. 운영체제 접근성 준수 8. 충분한 시간 제공 준수 9. 깜박거림의 사용 제한 준수 10. 쉬운 내비게이션 준수 11. 예측 가능성 준수 12. 문법 준수 준수 준수 3.  6. 누르기 동작 지원 준수 16. 사용자 요구에 따른 실행 미준수 17. 콘텐츠의 선형화 준수 18. 표의 구성 준수 19. 레이블 제공 준수 20. 오류 정정 준수 21. 마크업 오류 방지 준수 22. 웹 어플리케이션 접근성 준수 40
  41. 41. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 2 ? 1 대체텍스트는 누락되거나 불충분하게 제공하지 않고, 이미지의 내용과 동일하게 제공해야 한 다. 2 현재, 반복영역 건너뛰기 링크가 없다. 반복되는 메뉴 영역을 건너뛰어 본문으로 바로 갈 수 있는 바로가기 링크를 제공해야 한다. 3 1 패밀리사이트와 글로벌사이트가 헤딩 태그의 o nclick이벤트 핸들러가 적용되어 있어, 마우스 클릭만 가능하도록 구현되어 있다. 키보드 접근이 가능하도록 키보드 이벤트 핸들 러를 함께 제공하거나, <a href=“#”>태그로 마 크업하여 키보드의 접근이 가능하도록 수정해야 한다. 4 레이어 팝업은 해당 링크 클릭 시 초점이 레이어 팝업 영역으로 이동하여 레이어 팝업 내의 모든 링크를 키보드 Tab키로 거칠 수 있어야 하며, 닫기를 누르면 원래 있던 위치로 돌아갈 수 있어 야 한다. 4 1 3 <div class="family_site"> <h2 onclick="family_site()">FAMILY SITE</h2> <ul> <li> <a target="_blank" href="http://www.castelbajackorea. com">CASTELBAJACKOREA</a> </li> (중략) </ul> </div> 41
  42. 42. 3.2 반응형 웹의 접근성 문제 사례 Ø  사이트 명 : 코카콜라 Ø  ü  전문가 평가 결과 사이트 분석 : 위젯 스타일의 레이아웃 형태로 콘텐츠를 제공하며, 레이아웃 변화 시 다양한 효과를 통하여 재미요소를 전달한다. 42
  43. 43. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 코카콜라 코리아 (http://www.cocacola.co.kr/) 웹(main1+ sub1) 모바일 웹(main1+ sub1) 1. 대체텍스트 2. 자막 제공 준수 3. 색에 무관한 콘텐츠 인식 준수 4. 명확한 지시사항 제공 준수 5. 텍스트 콘텐츠의 명도대비 준수 6. 배경음 사용 금지 Ø  문제점 미준수 준수 7. 키보드 사용 보장 미준수 8. 초점 이동 미준수 9. 응답시간 조절 준수 1.  대체 텍스트를 제공하지 않음 10. 정지 기능 제공 키보드 접근 불가능 11. 깜빡임과 번쩍임 제한 준수 3.  키보드 초점을 시각적으로 확인 불가능 12. 반복영역 건너뛰기 미준수 4.  반복영역 건너뛰기 기능 제공하지 않음 13. 제목 제공 페이지 제목 제공하지 않음 6.  Id 중복 사용 2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 인식 준수 4. 명도대비 준수 5. 객체 접근성 미준수 미준수 5.  미준수 준수 2.  1.  대체텍스트 14. 적절한 링크텍스트 준수 15. 기본언어 표시 준수 17. 콘텐츠의 선형화 준수 19. 레이블 제공 준수 준수 8. 충분한 시간 제공 준수 9. 깜박거림의 사용 제한 준수 준수 20. 오류 정정 7. 운영체제 접근성 준수 18. 표의 구성 준수 준수 16. 사용자 요구에 따른 실행 6. 누르기 동작 지원 21. 마크업 오류 방지 22. 웹 어플리케이션 접근성 미준수 준수 10. 쉬운 내비게이션 미준수 11. 예측 가능성 준수 12. 문법 준수 준수 43
  44. 44. 3.2 반응형 웹의 접근성 문제 사례 ü  전문가 평가 결과 1 1 2 대체텍스트는 누락되거나 불충분하게 제공하지 않고, 이미지의 내용과 동일하게 제공해야 한다. 콘텐츠에 키보드 접근이 가능해야 한다. 3 2 5 4 6 키보드 초점은 링크 접근 시 점선의 테두리로 나 타나 시각적으로 위치를 확인할 수 있도록 제공 해야 한다. (css/js 확인 필요) 4 본문 바로 가기를 제공해야 한다. 3 (본문 바로 가기를 제공하며 본문 콘텐츠 영역으로 빠르게 이동 할 수 있어야 함) 5 페이지 적절한 제목을 제공해야 한다. ( 페이지 마다 동일한 제목이 아닌 페이지 에 대한 상세한 제목을 제공해야 함. ) 6 id는 중복 사용할 수 없다. (id는 한 페이지에 중복 사용 불가능 id="blog_wrap") 44
  45. 45. 04 반응형 웹, 시각장애인이 사용할 수 있나? (시각장애인 반응형 웹 시연) 45
  46. 46. 시각장애인의 사용자 평가 - 현대증권 ü  전문가 평가 결과 Ø  사이트명 : 현대증권 PC IOS Android Ø  사용자 평가 결과 : 오류 상(上) 상(上) - PC : 스크린 이용시 속도 이슈로 제대로 된 평가 불가 - Mobile : 정상적으로 사이트 이용 가능 Ie8 Sense Reade r 아이폰4 IOS 6.1.3 갤럭시3 젤리빈 4.1.2 46
  47. 47. 시각장애인의 사용자 평가 – CJ PHARMA Ø  사이트명 : CJ PHARMA Ø  사용자 평가 결과 : - PC : 22개 지침을 모두 준수하여 사이트 이용 가능 - Mobile : 모바일에서만 제공 되는 버튼에 대한 alt값 누락 Top버튼 클릭시 콘텐츠 누락 현상 발생 디자인을 위한 문단구분으로 여러 번의 제스처 사용 ü  전문가 평가 결과 PC IOS Android 상(上) 중(中) 중(中) Ie8 Sense Reade r 아이폰4 IOS 6.1.3 갤럭시3 젤리빈 4.1.2 47
  48. 48. 시각장애인의 사용자 평가 – 삼성전자 서비스 Ø  사이트명 : 삼성전자 서비스 Ø  사용자 평가 결과 : - PC : 6개 지침을 준수하지 않아 사이트 이용 불가 - Mobile : 포커스 이동 시 최상위 튕김 발생 롤링 배너에 대한 정지기능 미제공 ü  전문가 평가 결과 PC IOS Android 하(下) 하(下) 하(下) Ie8 Sense Reade r 아이폰4 IOS 6.1.3 갤럭시3 젤리빈 4.1.2 48
  49. 49. 시각장애인의 사용자 평가 - 코카콜라 Ø  사이트명 : 코카콜라 Ø  사용자 평가 결과 : - PC : 동영상에 대한 버튼에 포커스 이동 불가 대체텍스트 / 키보드 사용보장 등 주요지침 미준수 - Mobile : 특정 메뉴에 대한 콘텐츠 누락 발생 로고 클릭시 링크 오류로 이동 불가 ü  전문가 평가 결과 PC IOS Android 하(下) 하(下) 하(下) Ie8 Sense Reade r 아이폰4 IOS 6.1.3 갤럭시3 젤리빈 4.1.2 49
  50. 50. 05 반응형 웹 제작 시 유의사항 50
  51. 51. 5.1 반응형 웹 제작 방법 반응형 웹의 경우 HTML 1개로 디바이스별 미디어 쿼리를 사용하여 해상도 별로 다른 레이아웃을 제공한다. Tablet JS JS CSS HTML CSS PC JS Mobile CSS 51
  52. 52. 5.2 제작 시 고려사항 HTML 1개로 반응형 웹을 구현하기 때문에 기본적인 항목에 대해서는 준수해야 한다. 특히 CSS와 JS의 경우 해당 지침에 대하여 주의 해야 한다. CSS HTML 콘텐츠 명도대비 콘텐츠의 선형화 대체텍스트 자막제공 JS 키보드사용보장 초점이동 색에 무관한 콘텐츠 인식 명확한 지시사항 제공 배경음 사용금지 키보드사용보장 초점이동 깜빡임/번쩍임 제한 반복영역건너뛰기 제목제공 적절한 링크텍스트 기본언어 표시 콘텐츠의 선형화 표의 구성 레이블 제공 마크업 오류 방지 52
  53. 53. 5.3 제작시 고려사항 – 콘텐츠 명도대비 <명도대비 준수된 PC용 시스템 폰트> <명도대비 미준수된 모바일용 시스템 폰트> 문제점 디바이스 별로 미디어쿼리를 사용하여 CSS를 분리하기 때문에 PC버전에서는 명도대비값이 준수하더라도 디자인 등 여러 환경에 따라 CSS가 다르게 적용 될 수도 있다. 보완방법 PC버전 명도 대비값을 항상 준수하고, 시스템 폰트를 사용하는 부분의 경우 다른 디바이스들과 PC의 CSS를 동일하게 가져 가는 것이 좋을 것으로 판단된다. 53
  54. 54. 5.3 제작시 고려사항 – 콘텐츠 선형화 PC에서 MOBILE로 넘어갈 때 제공되던 공지사항 레이어 팝업을 확인 할 수 없다. 레이아웃 변경으로 인하여 콘텐츠를 축약 혹은 숨김 처리시에는 display: none; / visibility: hidden; 사용 금지 54
  55. 55. 5.3 제작시 고려사항 - 기본언어표시 PC의 스크린 리더로 사이트 접근시 영어와 한글 언어를 제대로 읽어준다. Lang=en 55
  56. 56. 5.3 제작시 고려사항 - 기본언어표시 Lang=en 문제점 Lang 속성이 en(영어) 이며, 콘텐츠중 한글이 있는 경우, Pc의 센스리 더에서는 영어와 한글을 읽는데 무리가 없으나 모바일(IOS)의 경우, 영 어와 숫자만 읽고, 한글은 읽지 않는다. 보완방법 <p lang=“ko”></p> 속성을 사용하여 한글인 부분에 해당 속성을 제공 하게 되면, 한글을 인지 하여 읽어주게 됨. - 참고사항 : Andorid 젤리빈(4.2.2)의 경우, pc와 같이 문제없음 56
  57. 57. 5.3 제작시 고려사항 – 키보드사용보장 PC에서 MOBILE로 넘어갈 때, 메뉴바가 가려져 비장애인의 경우 사용 할 수 없다. - Voiceover사용자는 지장 없음. 57
  58. 58. 5.3 제작시 고려사항 – 반복영역 건너뛰기 MOBILE에서 초점이동 문제점 Pc의 스킵 네비게이션을 그대로 사용할 경우 모바일 에서는 원하는 곳으로 초점이동이 되지 않음. 보완방법 모바일의 경우 스킵 네비게이션을 제공하지 않아도, 사용자가 손가락으로 중간부터 터치하는 식으로 페이 지를 임의로 건너뛸 수 있기 때문에 굳이 스킵 네비게 이션을 따로 제공해줄 필요는 없음. 58
  59. 59. 06 반응형 웹의 미래 59
  60. 60. 6. 반응형 웹의 미래 60
  61. 61. 웹 접근성 컨설팅 / 웹 접근성 인증마크 대행 / 웹 사이트 제작 장선영 서울 성동구 성수2가 3동 277-43 한신아크밸리 지식산업센터 805호 E-mail : cs.snclab@gmail.com 장석현 Tel : 02-2201-9928 이제승 박가현 권오택 김다형

×