반응형 웹에서 접근성 확보 방법

1. Web accessibility for responsive web implementation
2013.11.07
Jang Sun Young | SNC Lab.

2. 2

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

4. 1.1 인터넷 사용환경의 변화
2010년 하반기부터 국내 스마트폰 사용량이 폭발적으로 증가함에 따라 웹을 이용하는 환경이 크게 변했다.
전 세계적으로 스마트폰 사용이 늘어나면서 모바일을 통한 인터넷 사용 비율이 높게 증가하고 있다.
<2009~2013 국내 Desktop vs Mobile 사용 비율>
출처 : http://gs.statcounter.com/#mobile_vs_desktop-KR-yearly-2009-2013
4

5. 1.1 인터넷 사용 환경의 변화
전 세계적으로는 아직까지 PC를 통한 인터넷 사용 비율이 높지만, 인도나 아프리카 일부 지역과 같이 유선 인터넷 망
이 발달하지 못한 일부 지역은 모바일 사용량이 PC 사용량을 앞서기도 한다. 모바일을 통한 인터넷 사용 비율은 계속
증가하고 있으며, 스마트폰의 보급에 따라 더 확대될 것으로 예상된다.
<주요 국가 2013년 2분기 Desktop vs Mobile 웹 사용 비율>
출처 : http://gs.statcounter.com/#mobile_vs_desktop-ww-quarterly-201302-201302-map
5

6. 1.1 인터넷 사용환경의 변화
2010년 4월 아이패드의 등장과 함께 PC보다 노트북보다 작은 크기로 휴대성이 편리한 태블릿PC 역시 그 사용도가 데
스크탑PC를 앞설 만큼 증가하고 있다.
(중략)
출처 : http://www.newstomato.com/readNews.aspx?no=407734
6

7. 1.1 인터넷 사용환경의 변화
<2012-2014 전세계 PC, 태블릿 PC, 스마트폰 출하량(자료: 가트너)>
출처 : http://www.bloter.net/archives/167550
7

8. 1.2 디바이스별 해상도
제조사
tab8.0
1280x800
16:10
tab10.1
1280 x 800
mini
1024x768
ipad1
1024x768
ipad2
1024x768
4:3
ipad retina
2048x1536
4:3
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
960x640
3:2
4S
960x640
3:2
5
1136x640
16:9
5S
4:3
16:9
G2
4:3
1920 x 1080
(Full HD)
pro
16:10
16:9
S4
16:10
720 X 1280
(HD)
1136x640
16:9
비율
1920x1200
3:5
note3
넥서스7
480x800
note2
구글
2:3
note1
해상도
320x480
S3
기종
비율
S2
제조사
해상도
S
삼성
기종
삼성
애플
<태블릿 기종별 해상도>
엘지
아이폰
<스마트폰 기종별 해상도>
출처 : 제조사 사이트
8

9. 1.3 반응형 웹이란?
다양한 웹 디바이스의 확산
• 반응형 웹의 등장배경
최근 다양한 모바일 기기가 보급되면서 하나의 사이트를 만들더라도 PC / 스마트폰/ 태블릿 등 서로 다른 해상도를
가진 디바이스를 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산
됨에 따라 많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만, 그렇다고 하나
의 해상도에만 맞춰 사이트를 제작하기도 어렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에
맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것이 반응형 웹(Responsive Web)이다.
9

10. 1.3 반응형 웹이란?
<현대자동차 기업문화 홍보 사이트(http://pr.hyundai.com) >
• 반응형 웹이란?
반응형 웹 디자인은 모바일 폰에서 데스크탑 컴퓨터 모니터에 이르기까지 다양한 장치에 걸쳐 최적의 사용 환경을
제공하기 위한 정교한 사이트를 목표로 한 웹 디자인 접근 방법이다. 그것은 쉽게 읽을 수 있고 탐색할 수 있으며,
최소한의 크기 조정 및 스크롤링을 기반으로 한다.
출처 : http://en.wikipedia.org/wiki/Responsive_web_design
10

11. 02
반응형 웹의 현황
11

12. 2.1 해외 반응형 웹 사이트 현황
트래픽 기준으로 미국 상위 155개 사이트 중 반응형 웹은 47개 사이트에 해당된다. 대표적인 사이트는 월트 디즈니
(go.com), 마이크로소프트(microsoft.com), 위키피디아(wikipedia.org)가 있으며, 반응형 웹으로 제공되는 사이트의 경
우 특정한 분야에 치중되지 않고, 브랜드 / SNS / 커뮤니티 등 다양한 분야에서 활용되고 있다.
반응형웹
47
웹
108
<미국 반응형 웹 사이트 통계-2013년 10월 기준>
출처 : www.alexa.com
12

13. 2.2 대표 해외 반응형 웹 사이트
<월트 디즈니 회사 사이트>
<마이크로소프트 사이트>
13

14. 2.3 국내 반응형 웹 사이트 현황
2013년 월별 오픈 된 사이트를 분석해 본 결과 1월부터 9월 제작 대비 반응형 웹의 제작 건수가 증가하는 것을 알 수 있
다. 분기별 분석 결과, 반응형 웹의 증가추세를 명확하게 확인할 수 있다. 이와 같이 홈페이지 개편 시 반응형 웹을 활용
하여 점차 다양해지는 디바이스 환경을 고려하여 제작하고 있다.
60
160
140
50
120
40
100
54
30
20
30
38
23
0
3
38
36
1
5
4
2
7
80
반응형
60
137
88
91
제작
반응형
40
12
10
2
제작
38
47
10
20
4
1월 2월 3월 4월 5월 6월 7월 8월 9월
<2013 월별 제작대비 반응형 웹 현황>
0
6
11
1분기
2분기
21
3분기
<2013 분기별제작대비 반응형 웹 현황>
출처 : 오픈 / 리뉴얼 정보커뮤니티 (www.dbcut.com)
14

15. 2.4 대표 국내 반응형 웹 사이트
<현대 자동차>
<현대 HGV >
15

16. 03
반응형 웹의 접근성 사례
16

17. 3.1 반응형 웹의 접근성 우수 사례

사이트 명 : CJ PHARM

 전문가 평가 결과
사이트 분석 :
큰 화면에서는 좌우로 펼쳐진 3단 형태의 레이아웃 형태로 제
공되며 모바일 화면에서는 상하 구조의 레이아웃 형태로 제공
한다.
17

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. 3.1 반응형 웹의 접근성 우수 사례

사이트 명 : 현대증권

 전문가 평가 결과
사이트 분석 :
반응형 웹 사이트 중 증권사 사이트로 어떤 디바이스에서도 동
일한 정보를 제공하고 있으며,
직관적인 디자인으로 구성되어 있어 사용자로 하여금 사이트
이용이 보다 수월하고 편리하다.
19

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. 3.2 반응형 웹의 접근성 문제 사례

사이트명 : 한국조폐공사

 전문가 평가 결과
사이트 분석 :
상단에 메뉴와 하단 콘텐츠 형태의 레이아웃으로 구성된
사이트로 모바일로 접근할 경우, 메뉴가 퀵 메뉴 형태로
제공되며 콘텐츠 부각이 되도록 레이아웃이 변경된다.
21

22. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
한국조폐공사 (http://www.komsco.com/contents/main/main.do)
웹(main1+ sub1)
1. 대체텍스트
모바일 웹(main1+ sub1)
미준수
2. 자막 제공
3. 색에 무관한 콘텐츠 인식
준수
4. 명확한 지시사항 제공
준수
6. 배경음 사용 금지
준수
8. 초점 이동
 문제점
미준수
준수
7. 키보드 사용 보장
대체텍스트
준수
5. 텍스트 콘텐츠의 명도대비
1.
준수
9. 응답시간 조절
10. 정지 기능 제공
2. 자막·수화의 멀티미디어
제공
준수
3. 색에 무관한 인식
준수
4. 명도대비
준수
5. 객체 접근성
준수
6. 누르기 동작 지원
준수
7. 운영체제 접근성
준수
8. 충분한 시간 제공
준수
9. 깜박거림의 사용 제한
준수
10. 쉬운 내비게이션
준수
11. 예측 가능성
준수
12. 문법 준수
준수
미준수
준수
미준수
1.
본문, 서브메뉴 바로 가기 미작동.
11. 깜빡임과 번쩍임 제한
2.
배너 이미지의 불충분한 대체 텍스트 제공.
12. 반복영역 건너뛰기
3.
초점 시각화 미제공.
13. 제목 제공
준수
4.
본문, 서브메뉴 바로 가기 링크 미작동.
14. 적절한 링크텍스트
준수
자동 변화하는 배너의 이전, 다음, 정지 기능
15. 기본언어 표시
준수
5.
미제공.
16. 사용자 요구에 따른 실행
준수
미준수
미준수
17. 콘텐츠의 선형화
준수
18. 표의 구성
준수
19. 레이블 제공
준수
20. 오류 정정
준수
21. 마크업 오류 방지
준수
22. 웹 어플리케이션 접근성
준수
22

23. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
1
1
2
키보드 초점은 링크 접근 시 점선의 테두리로
나타나 시각적으로 위치를 확인할 수 있도록
제공해야 한다. (css/js 확인 필요)
4
4
대체텍스트는 이미지의 내용과 동일하게 제공
해야 한다.
3
2
본문과 서브메뉴 바로 가기 링크(<a>)에 본
문과 서브메뉴 영역의 id값을 href 속성으로
참조시킨다.
자동으로 변화하는 콘텐츠에는 이전, 다음, 정
지 기능을 제공하여 제어할 수 있도록 구현해
야 한다.
5
팝업을 띄울 시에는 새 창이 아닌 별도의 팝업
존을 제공하거나, 팝업 내용으로 이동할 수 있
는 링크영역을 상단에 제공할 수 있다.
3
2 3
5
23

24. 3.2 반응형 웹의 접근성 문제 사례

사이트 명 : 한국조폐공사 영문사이트

 전문가 평가 결과
사이트 분석 :
국문 사이트와 동일한 구조의 웹사이트로 이국적
인 디자인 스타일 및 텍스트 위주의 정보 구성을
통하여 사이트 콘텐츠 제공한다.
24

25. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
KOMSCO ( http://english.komsco.com/)
웹(main1+ sub1)
모바일 웹(main1+ sub1)
1. 대체텍스트
준수
2. 자막 제공
준수
3. 색에 무관한 콘텐츠 인식
준수
4. 명확한 지시사항 제공
준수
5. 텍스트 콘텐츠의 명도대비
준수
6. 배경음 사용 금지
준수
7. 키보드 사용 보장
준수
8. 초점 이동
1.
키보드에 의한 초점은 시각적으로 구별 할 수
없음.
2.
배치형 테이블에 th를 사용함
대체텍스트
준수
2. 자막·수화의 멀티미디어
제공
준수
3. 색에 무관한 인식
준수
4. 명도대비
준수
5. 객체 접근성
준수
6. 누르기 동작 지원
준수
7. 운영체제 접근성
준수
8. 충분한 시간 제공
준수
9. 깜박거림의 사용 제한
준수
10. 쉬운 내비게이션
준수
11. 예측 가능성
준수
12. 문법 준수
준수
미준수
9. 응답시간 조절
 문제점
1.
준수
10. 정지 기능 제공
준수
11. 깜빡임과 번쩍임 제한
준수
12. 반복영역 건너뛰기
준수
13. 제목 제공
준수
14. 적절한 링크텍스트
준수
15. 기본언어 표시
준수
16. 사용자 요구에 따른 실행
준수
17. 콘텐츠의 선형화
준수
18. 표의 구성
미준수
19. 레이블 제공
준수
20. 오류 정정
준수
21. 마크업 오류 방지
준수
22. 웹 어플리케이션 접근성
준수
25

26. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
1
키보드 초점은 링크 접근 시 점선의 테두리로
나타나 시각적으로 위치를 확인할 수 있도록
제공해야 한다. (css/js 확인 필요).
1
2
- 배치형 테이블은 아래처럼 변경해야 한다.
<th>First issuance</th>
↓
<td>First issuance</td>
- Caption과 summary는 사용하지 않는다.
2
26

27. 3.2 반응형 웹의 접근성 문제 사례

사이트명 : 삼성전자 서비스

 전문가 평가 결과
사이트 분석 :
삼성전자 서비스 사이트로 상∙하단 구조의 레이아웃 구조
를 작은 디바이스 환경에서는 아이콘 이미지를 생략하고
텍스트 메뉴를 제공하는 형태로 레이아웃 변경된다.
27

28. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
삼성전자서비스 (http://www.samsungsvc.co.kr/index.do)
웹(main1+ sub1)
1. 대체텍스트
모바일 웹(main1+ sub1)
미준수
2. 자막 제공
3. 색에 무관한 콘텐츠 인식
4. 명확한 지시사항 제공
준수
6. 배경음 사용 금지
준수
8. 초점 이동
준수
9. 응답시간 조절
준수
10. 정지 기능 제공
준수
11. 깜빡임과 번쩍임 제한
준수
12. 반복영역 건너뛰기
준수
13. 제목 제공
미준수
준수
7. 키보드 사용 보장
대체텍스트
준수
5. 텍스트 콘텐츠의 명도대비
 문제점
준수
1.
준수
준수
1.
이미지와 무관한 대체 텍스트 제공
2.
링크 텍스트 제공하지 않음
14. 적절한 링크텍스트
3.
메인 메뉴와 하위 메뉴를 중첩하지 않음
15. 기본언어 표시
ID 중복사용
16. 사용자 요구에 따른 실행
준수
5.
움직이는 배너 정지제공X (Mobile)
17. 콘텐츠의 선형화
초점 상단 튐 (Mobile)
18. 표의 구성
미준수
3. 색에 무관한 인식
준수
4. 명도대비
준수
5. 객체 접근성
미준수
6. 누르기 동작 지원
준수
7. 운영체제 접근성
준수
8. 충분한 시간 제공
미준수
미준수
6.
준수
준수
4.
2. 자막·수화의 멀티미디어
제공
미준수
19. 레이블 제공
준수
준수
10. 쉬운 내비게이션
준수
11. 예측 가능성
준수
12. 문법 준수
준수
준수
20. 오류 정정
9. 깜박거림의 사용 제한
21. 마크업 오류 방지
22. 웹 어플리케이션 접근성
미준수
준수
28

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. 3.2 반응형 웹의 접근성 문제 사례

사이트 명 : 유니온스틸 사이트

 전문가 평가 결과
사이트 분석 :
비주얼 요소를 다단 구조로 제공하고 있으며, 모바일/태블
릿/PC에서 각기 다른 최적화된 레이아웃의 사이트를 제공
하고 있다. 또한 이미지가 아닌 시스템 폰트를 사용하여 디
바이스별 호환성을 고려하였다.
30

31. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
유니온 스틸 (http://www.unionsteel.co.kr/ko/main.do)
웹(main1+ sub1)
모바일 웹(main1+ sub1)
1. 대체텍스트
2. 자막 제공
본문 바로가기 링크 클릭 시 본문이 아닌 다
른 위치로 이동.
3.
전체메뉴 펼치기를 누를 경우 펼쳐졌다가
다시 자동으로 닫힘 (Mobile)
준수
6. 배경음 사용 금지
2.
준수
5. 텍스트 콘텐츠의 명도대비
이미지 링크에 초점 시각화 미제공.
준수
4. 명확한 지시사항 제공
1.
준수
3. 색에 무관한 콘텐츠 인식
 문제점
준수
준수
7. 키보드 사용 보장
준수
8. 초점 이동
1.
대체텍스트
준수
2. 자막·수화의 멀티미디어
제공
준수
3. 색에 무관한 인식
준수
4. 명도대비
준수
미준수
9. 응답시간 조절
준수
10. 정지 기능 제공
준수
미준수
준수
11. 깜빡임과 번쩍임 제한
5. 객체 접근성
12. 반복영역 건너뛰기
미준수
13. 제목 제공
준수
15. 기본언어 표시
준수
17. 콘텐츠의 선형화
준수
19. 레이블 제공
준수
21. 마크업 오류 방지
준수
22. 웹 어플리케이션 접근성
준수
8. 충분한 시간 제공
준수
9. 깜박거림의 사용 제한
준수
10. 쉬운 내비게이션
준수
11. 예측 가능성
준수
12. 문법 준수
준수
준수
20. 오류 정정
미준수
준수
18. 표의 구성
7. 운영체제 접근성
준수
16. 사용자 요구에 따른 실행
준수
준수
14. 적절한 링크텍스트
6. 누르기 동작 지원
31

32. 3.2 반응형 웹의 접근성 문제 사례
1
 전문가 평가 결과
1
키보드 초점은 링크 접근 시 점선의 테두리로 나
타나 시각적으로 위치를 확인할 수 있도록 제공
해야 한다. (css/js 확인 필요)
2
현재 서브페이지의 본문 바로가기 링크가 현재 본
문이 아닌 반복되는 콘텐츠 영역으로 이동되고 있
다.
본문 바로가기 링크는 반복되는 모든 영역을 건너
뛰어, 실제 본문영역 <div>의 id값을 href속성에
참조시켜야 한다.
여기서는 <div class="content">에 id속성을 추가
하여 해당 id를 본문 바로가기 링크와 연결시킨다.
2
32

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

34. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
삼성전자 스토어 (http://store.samsung.com/sec/)
웹(main1+ sub1)
1. 대체텍스트
모바일 웹(main1+ sub1)
미준수
2. 자막 제공
3. 색에 무관한 콘텐츠 인식
4. 명확한 지시사항 제공
6. 배경음 사용 금지
8. 초점 이동
레이블 제공
3.
ID 중복사용
4.
초점이 최상단으로 튕김 (Mobile)
준수
10. 정지 기능 제공
2.
준수
9. 응답시간 조절
이미지와 무관한 대체 텍스트 제공
준수
준수
11. 깜빡임과 번쩍임 제한
준수
12. 반복영역 건너뛰기
준수
미준수
준수
7. 키보드 사용 보장
1.
준수
대체텍스트
준수
5. 텍스트 콘텐츠의 명도대비
 문제점
준수
1.
준수
13. 제목 제공
2. 자막·수화의 멀티미디어
제공
준수
3. 색에 무관한 인식
준수
4. 명도대비
준수
5. 객체 접근성
미준수
6. 누르기 동작 지원
준수
7. 운영체제 접근성
준수
8. 충분한 시간 제공
준수
9. 깜박거림의 사용 제한
준수
미준수
14. 적절한 링크텍스트
준수
15. 기본언어 표시
준수
16. 사용자 요구에 따른 실행
준수
17. 콘텐츠의 선형화
준수
18. 표의 구성
준수
19. 레이블 제공
20. 오류 정정
21. 마크업 오류 방지
22. 웹 어플리케이션 접근성
10. 쉬운 내비게이션
미준수
미준수
준수
미준수
준수
11. 예측 가능성
12. 문법 준수
준수
미준수
34

35. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
1
대체텍스트는 이미지의 내용과 동일하게 제공해야
한다.
2
Input 요소에 1:1 대응하는 <label>요소 또는
3
2
1
title 속성을 제공한다.
3
id는 중복 사용할 수 없다.
(id = “guestEmail”
id는 한 페이지에 중복 사용 불가능)
35

36. 3.2 반응형 웹의 접근성 문제 사례

사이트 명 : Samsung-Engineering

 전문가 평가 결과
사이트 분석 :
메뉴와 콘텐츠 영역의 다단 레이아웃의 효과적 사용으로 태블
릿과 모바일에서 메뉴를 열고 닫는 기능을 수행할 수 있어 디
바이스 별로 효과적인 레이아웃을 구현하고 있다. 또한 내용
의 대부분이 시스템 폰트를 사용한 점은 기기에 따른 유동적
배치를 효율적으로 구현하였다.
36

37. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
삼성전자 엔지니어링 (http://www.samsungengineering.com/kor/index)
웹(main1+ sub1)
1. 대체텍스트
모바일 웹(main1+ sub1)
미준수
2. 자막 제공
3. 색에 무관한 콘텐츠 인식
준수
4. 명확한 지시사항 제공
준수
6. 배경음 사용 금지
준수
8. 초점 이동
준수
10. 정지 기능 제공
11. 깜빡임과 번쩍임 제한
준수
12. 반복영역 건너뛰기
준수
13. 제목 제공
3. 색에 무관한 인식
준수
4. 명도대비
준수
14. 적절한 링크텍스트
준수
자동으로 변화하는 배너의 콘트롤러 작
15. 기본언어 표시
16. 사용자 요구에 따른 실행
(의도하지 않은 초점 변화이므로 검사항
17. 콘텐츠의 선형화
준수
18. 표의 구성
준수
19. 레이블 제공
준수
20. 오류 정정
준수
21. 마크업 오류 방지
준수
22. 웹 어플리케이션 접근성
준수
미준수
준수
동 시 초점이 상단으로 빠짐.
5. 객체 접근성
준수
대체텍스트가 잘못 제공되거나, 의미 없
는 이미지에 대체텍스트를 제공함.
목 16.에서 동시 감점.)
3.
준수
준수
 문제점
2.
2. 자막·수화의 멀티미디어
제공
미준수
9. 응답시간 조절
1.
미준수
준수
7. 키보드 사용 보장
대체텍스트
준수
5. 텍스트 콘텐츠의 명도대비
1.
준수
레이어팝업에서의 비논리적 초점 이동.
미준수
6. 누르기 동작 지원
준수
7. 운영체제 접근성
준수
8. 충분한 시간 제공
준수
9. 깜박거림의 사용 제한
준수
10. 쉬운 내비게이션
준수
11. 예측 가능성
준수
12. 문법 준수
준수
37

38. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
1
1
대체텍스트는 이미지의 내용과 동일하게 제공
해야 한다.
그러나 의미가 없는 이미지(배경이나 아이콘
등)는 alt속성을 제공하되 빈 값으로 제공한다.
(alt=“”)
2
현재, 배너 이미지의 링크 목록의 마우스 클릭
이벤트는 제대로 작동하나, 키보드 엔터 시 초
점이 상단으로 빠지는 문제 발생.
초점은 그대로 머물러 있고 해당 배너 이미지로
바뀌는 기능만 실행되어야 한다.
3
레이어 팝업은 해당 링크 클릭 시 초점이 레이
어 팝업 영역으로 이동하여 레이어 팝업 내의
모든 링크를 키보드 Tab키로 거칠 수 있어야 하
며, 닫기를 누르면 원래 있던 위치로 돌아갈 수
있어야 한다.
2
1
1
3
38

39. 3.2 반응형 웹의 접근성 문제 사례


 전문가 평가 결과
사이트명 : PROGRESSIVE EXR
사이트 분석 :
- 콘텐츠와 메뉴를 좌우구조의 레이아웃으로 제공하였으며,
콘텐츠 구성의 경우 블록형태로 제공.
- 큰 화면에서는 메뉴와 콘텐츠가 좌우 형태로 제공 되며,
모바일에서는 메뉴와 콘텐츠와의 구성이 상하 구조로 제공.
39

40. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
EXR (http://www.exrkorea.com/main.asp)
웹(main1+ sub1)
1. 대체텍스트
모바일 웹(main1+ sub1)
미준수
2. 자막 제공
3. 색에 무관한 콘텐츠 인식
준수
4. 명확한 지시사항 제공
준수
6. 배경음 사용 금지
준수
8. 초점 이동
2. 자막·수화의 멀티미디어
제공
준수
3. 색에 무관한 인식
준수
4. 명도대비
준수
미준수
9. 응답시간 조절
 문제점
미준수
준수
7. 키보드 사용 보장
대체텍스트
준수
5. 텍스트 콘텐츠의 명도대비
1.
준수
준수
10. 정지 기능 제공
준수
12. 반복영역 건너뛰기
준수
미준수
준수
11. 깜빡임과 번쩍임 제한
5. 객체 접근성
1.
불충분한 대체텍스트 제공.
2.
반복영역 건너뛰기 링크 없음.
13. 제목 제공
패밀리/글로벌 사이트의 키보드 접근 불가.
14. 적절한 링크텍스트
준수
4.
레이어 팝업의 비논리적 초점 이동.
15. 기본언어 표시
준수
7. 운영체제 접근성
준수
8. 충분한 시간 제공
준수
9. 깜박거림의 사용 제한
준수
10. 쉬운 내비게이션
준수
11. 예측 가능성
준수
12. 문법 준수
준수
준수
3.
6. 누르기 동작 지원
준수
16. 사용자 요구에 따른 실행
미준수
17. 콘텐츠의 선형화
준수
18. 표의 구성
준수
19. 레이블 제공
준수
20. 오류 정정
준수
21. 마크업 오류 방지
준수
22. 웹 어플리케이션 접근성
준수
40

41. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
2
?
1
대체텍스트는 누락되거나 불충분하게 제
공하지 않고, 이미지의 내용과 동일하게
제공해야 한다.
2
현재, 반복영역 건너뛰기 링크가 없다.
반복되는 메뉴 영역을 건너뛰어 본문으로
바로갈 수 있는 바로가기 링크를 제공해야
한다.
3
1
패밀리사이트와 글로벌사이트가 헤딩 태
그의 onclick이벤트 핸들러가 적용되어 있
어, 마우스 클릭만 가능하도록 구현되어
있다.
키보드 접근이 가능하도록 키보드 이벤트
핸들러를 함께 제공하거나, <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. 3.2 반응형 웹의 접근성 문제 사례

사이트 명 : 코카콜라

 전문가 평가 결과
사이트 분석 :
위젯 스타일의 레이아웃 형태로 콘텐츠를 제공하며, 레이아웃
변화 시 다양한 효과를 통하여 재미요소를 전달한다.
42

43. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
코카콜라 코리아 (http://www.cocacola.co.kr/)
웹(main1+ sub1)
1. 대체텍스트
모바일 웹(main1+ sub1)
미준수
2. 자막 제공
3. 색에 무관한 콘텐츠 인식
4. 명확한 지시사항 제공
준수
6. 배경음 사용 금지
미준수
8. 초점 이동
미준수
준수
7. 키보드 사용 보장
대체텍스트
준수
5. 텍스트 콘텐츠의 명도대비
 문제점
준수
1.
준수
미준수
9. 응답시간 조절
준수
10. 정지 기능 제공
준수
3. 색에 무관한 인식
준수
4. 명도대비
준수
5. 객체 접근성
미준수
준수
준수
2. 자막·수화의 멀티미디어
제공
1.
대체 텍스트를 제공하지 않음
2.
키보드 접근 불가능
11. 깜빡임과 번쩍임 제한
3.
키보드 초점을 시각적으로 확인 불가능
12. 반복영역 건너뛰기
미준수
4.
반복영역 건너뛰기 기능 제공하지 않음
13. 제목 제공
미준수
5.
페이지 제목 제공하지 않음
14. 적절한 링크텍스트
준수
6.
Id 중복 사용
15. 기본언어 표시
준수
16. 사용자 요구에 따른 실행
준수
17. 콘텐츠의 선형화
준수
18. 표의 구성
준수
19. 레이블 제공
준수
20. 오류 정정
준수
21. 마크업 오류 방지
22. 웹 어플리케이션 접근성
미준수
준수
6. 누르기 동작 지원
준수
7. 운영체제 접근성
준수
8. 충분한 시간 제공
준수
9. 깜박거림의 사용 제한
준수
10. 쉬운 내비게이션
미준수
11. 예측 가능성
준수
12. 문법 준수
준수
43

44. 3.2 반응형 웹의 접근성 문제 사례
 전문가 평가 결과
1
1
대체텍스트는 누락되거나 불충분하게 제공
하지 않고, 이미지의 내용과 동일하게 제공
해야 한다.
2
콘텐츠에 키보드 접근이 가능해야 한다.
3
2
5
4
6
3
4
키보드 초점은 링크 접근 시 점선의 테두리
로 나타나 시각적으로 위치를 확인할 수 있
도록 제공해야 한다. (css/js 확인 필요)
본문 바로 가기를 제공해야 한다.
(본문 바로 가기를 제공하며 본문 콘텐츠
영역으로 빠르게 이동 할 수 있어야 함)
5
페이지 적절한 제목을 제공해야 한다.
( 페이지 마다 동일한 제목이 아닌 페이지
에 대한 상세한 제목을 제공해야 함. )
6
id는 중복 사용할 수 없다.
(id는 한 페이지에 중복 사용 불가능
id="blog_wrap")
44

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

46. 시각장애인의 사용자 평가 - 현대증권

사이트명 : 현대증권

사용자 평가 결과 :
- PC : 스크린 이용시 속도 이슈로 제대로 된 평가 불가
- Mobile : 정상적으로 사이트 이용 가능
 전문가 평가 결과
PC
IOS
Android
오류
상(上)
상(上)
Ie8
아이폰4
갤럭시3
Sense
Reader
IOS 6.1.3
젤리빈 4.1.2
46

47. 시각장애인의 사용자 평가 – CJ PHARMA

사이트명 : CJ PHARMA

사용자 평가 결과 :
- PC : 22개 지침을 모두 준수하여 사이트 이용 가능
- Mobile : 모바일에서만 제공 되는 버튼에 대한 alt값 누락
Top버튼 클릭시 콘텐츠 누락 현상 발생
디자인을 위한 문단구분으로 여러 번의 제스처 사용
 전문가 평가 결과
PC
IOS
Android
상(上)
중(中)
중(中)
Ie8
아이폰4
갤럭시3
Sense
Reader
IOS 6.1.3
젤리빈 4.1.2
47

48. 시각장애인의 사용자 평가 – 삼성전자 서비스

사이트명 : 삼성전자 서비스

사용자 평가 결과 :
- PC : 6개 지침을 준수하지 않아 사이트 이용 불가
- Mobile : 포커스 이동 시 최상위 튕김 발생
롤링 배너에 대한 정지기능 미제공
 전문가 평가 결과
PC
IOS
Android
하(下)
하(下)
하(下)
Ie8
아이폰4
갤럭시3
Sense
Reader
IOS 6.1.3
젤리빈 4.1.2
48

49. 시각장애인의 사용자 평가 - 코카콜라

사이트명 : 코카콜라

사용자 평가 결과 :
- PC : 동영상에 대한 버튼에 포커스 이동 불가
대체텍스트 / 키보드 사용보장 등 주요지침 미준수
- Mobile : 특정 메뉴에 대한 콘텐츠 누락 발생
로고 클릭시 링크 오류로 이동 불가
 전문가 평가 결과
PC
IOS
Android
하(下)
하(下)
하(下)
Ie8
아이폰4
갤럭시3
Sense
Reader
IOS 6.1.3
젤리빈 4.1.2
49

50. 05
반응형 웹 제작 시 유의사항
50

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

52. 5.2 제작 시 고려사항
HTML 1개로 반응형 웹을 구현하기 때문에 기본적인 항목에 대해서는 준수해야 한다.
특히 CSS와 JS의 경우 해당 지침에 대하여 주의 해야 한다.
CSS
HTML
콘텐츠 명도대비
콘텐츠의 선형화
대체텍스트
자막제공
JS
키보드사용보장
초점이동
색에 무관한 콘텐츠 인식
명확한 지시사항 제공
배경음 사용금지
키보드사용보장
초점이동
깜빡임/번쩍임 제한
반복영역건너뛰기
제목제공
적절한 링크텍스트
기본언어 표시
콘텐츠의 선형화
표의 구성
레이블 제공
마크업 오류 방지
52

53. 5.3 제작시 고려사항 – 콘텐츠 명도대비
<명도대비 준수된 PC용 시스템 폰트>
<명도대비 미준수된 모바일용 시스템 폰트>
문제점
디바이스 별로 미디어쿼리를 사용하여 CSS를 분리하기 때문에 PC버전에서는 명도대비값이 준수하더라도 디자인
등 여러 환경에 따라 CSS가 다르게 적용 될 수도 있다.
보완방법
PC버전 명도 대비값을 항상 준수하고, 시스템 폰트를 사용하는 부분의 경우 다른 디바이스들과 PC의 CSS를 동일
하게 가져 가는 것이 좋을 것으로 판단된다.
53

54. 5.3 제작시 고려사항 – 콘텐츠 선형화
PC에서 MOBILE로 넘어갈 때 제공되던 공지사항 레이어 팝업을 확인 할 수 없다.
레이아웃 변경으로 인하여 콘텐츠를 축약 혹은 숨김 처리시에는 display: none; / visibility: hidden; 사용 금지
54

55. 5.3 제작시 고려사항 - 기본언어표시
PC의 스크린 리더로 사이트 접근시 영어와 한글 언어를 제대로 읽어준다.
Lang=en
55

56. 5.3 제작시 고려사항 - 기본언어표시
Lang=en
문제점
Lang 속성이 en(영어) 이며, 콘텐츠중 한글이 있는 경우, Pc의
센스리더에서는 영어와 한글을 읽는데 무리가 없으나 모바일
(IOS)의 경우, 영어와 숫자만 읽고, 한글은 읽지 않는다.
보완방법
<p lang=“ko”></p> 속성을 사용하여 한글인 부분에 해당 속성을
제공하게 되면, 한글을 인지 하여 읽어주게 됨.
- 참고사항 : Andorid 젤리빈(4.2.2)의 경우, pc와 같이 문제없음
56

57. 5.3 제작시 고려사항 – 키보드사용보장
PC에서 MOBILE로 넘어갈 때, 메뉴바가 가려져 비장애인의 경우 사용 할 수 없다.
- Voiceover사용자는 지장 없음.
57

58. 5.3 제작시 고려사항 – 반복영역 건너뛰기
MOBILE에서
초점이동
문제점
Pc의 스킵 네비게이션을 그대로 사용할 경우
모바일에서는 원하는 곳으로 초점이동이 되지
않음.
보완방법
모바일의 경우 스킵 네비게이션을 제공하지 않
아도, 사용자가 손가락으로 중간부터 터치하는
식으로 페이지를 임의로 건너뛸 수 있기 때문에
굳이 스킵 네비게이션을 따로 제공해줄 필요는
없음.
58

59. 06
반응형 웹의 미래
59

60. 6. 반응형 웹의 미래
60

61. 웹 접근성 컨설팅 / 웹 접근성 인증마크 대행 / 웹 사이트 제작
장선영
서울 성동구 성수2가 3동 277-43 한신아크밸리 지식산업센터 805호
E-mail : cs.snclab@gmail.com
장석현
Tel : 02-2201-9928
이제승
박가현
권오택
김다형