웹접근성캠프서울 반응형웹에서의접근성확보방법

Web accessibility for responsive web implementation

2013.11.07 Jang Sun Young | SNC Lab.

2

3

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

<2009~2013 국내 Desktop vs Mobile 사용 비율>

1.1 인터넷 사용환경의 변화 2010년 하반기부터 국내 스마트폰 사용량이 폭발적으로 증가함에 따라 웹을 이용하는 환경이 크게 변했다. 전 세계적으로 스마트폰 사용이 늘어나면서 모바일을 통한 인터넷 사용 비율이 높게 증가하고 있다.

4

출처 : http://gs.statcounter.com/#mobile_vs_desktop-KR-yearly-2009-2013

1.1 인터넷 사용 환경의 변화 전 세계적으로는 아직까지 PC를 통한 인터넷 사용 비율이 높지만, 인도나 아프리카 일부 지역과 같이 유선 인터넷 망이 발달하지 못한 일부 지역은 모바일 사용량이 PC 사용량을 앞서기도 한다. 모바일을 통한 인터넷 사용 비율은 계속 증가하고 있으며, 스마트폰의 보급에 따라 더 확대될 것으로 예상된다.

5

출처 : http://gs.statcounter.com/#mobile_vs_desktop-ww-quarterly-201302-201302-map

<주요 국가 2013년 2분기 Desktop vs Mobile 웹 사용 비율>

1.1 인터넷 사용환경의 변화 2010년 4월 아이패드의 등장과 함께 PC보다 노트북보다 작은 크기로 휴대성이 편리한 태블릿PC 역시 그 사용도가 데스크탑PC를 앞설 만큼 증가하고 있다.

6

출처 : http://www.newstomato.com/readNews.aspx?no=407734

(중략)

1.1 인터넷 사용환경의 변화

7

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

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

1.2 디바이스별 해상도

8

출처 : 제조사 사이트

제조사 기종 해상도 비율

삼성 　　

S 320x480 2:3

S2 480x800 3:5

S3 720 X 1280 (HD) 16:9

S4 1920 x 1080 (Full HD) 16:9

note1 1280 x 800 16:10

note2 720 x 1280 (HD) 16:10

note3 1920 X 1080 (Full HD) 16:9

엘지　

pro 1920 X 1080 (Full HD) 16:9

G2 1920 X 1080 (Full HD) 16:9

아이폰

4 960x640 3:2

4S 960x640 3:2

5 1136x640 16:9

5S 1136x640 16:9

제조사 기종 해상도 비율 구글 넥서스7 1920x1200 16:10

삼성 tab8.0 1280x800 16:10

tab10.1 1280 x 800 16:10

애플

mini 1024x768 4:3

ipad1 1024x768 4:3

ipad2 1024x768 4:3

ipad retina 2048x1536 4:3

<태블릿 기종별 해상도> <스마트폰 기종별 해상도>

9

1.3 반응형 웹이란?

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

를 고려하지 않을 수 없게 되었다. 데스크탑 하나만 보더라도 와이드의 고해상도 디스플레이가 확산됨에 따라 많은 사이트들이 기존의 1024*768 크기를 넘어 점차 사이즈를 키워가고 있는 추세이지만, 그렇다고 하나의 해상도에만 맞춰 사이트를 제작하기도 어

렵다. 이렇듯 N-Screen의 시대로 불리는 다양한 디바이스의 해상도에 맞춰 사이트의 레이아웃을 변환하는 이슈에 맞춰 등장한 것

이 반응형 웹(Responsive Web)이다.

다양한 웹 디바이스의 확산

1.3 반응형 웹이란?

10

출처 : http://en.wikipedia.org/wiki/Responsive_web_design

•  반응형 웹이란? 반응형 웹 디자인은 모바일 폰에서 데스크탑 컴퓨터 모니터에 이르기까지 다양한 장치에 걸쳐 최적의 사용 환경을 제공하기 위한

정교한 사이트를 목표로 한 웹 디자인 접근 방법이다. 그것은 쉽게 읽을 수 있고 탐색할 수 있으며, 최소한의 크기 조정 및 스크롤링

을 기반으로 한다.

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

11

02 반응형 웹의 현황

2.1 해외 반응형 웹 사이트 현황

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

출처 : www.alexa.com

12

<미국 반응형 웹 사이트 통계-2013년 10월 기준>

반응형웹 47

웹 108

<월트 디즈니 회사 사이트> <마이크로소프트 사이트>

2.2 대표 해외 반응형 웹 사이트

13

2.3 국내 반응형 웹 사이트 현황

2013년 월별 오픈 된 사이트를 분석해 본 결과 1월부터 9월 제작 대비 반응형 웹의 제작 건수가 증가하는 것을 알 수 있다. 분기별 분석 결과, 반응형 웹의 증가추세를 명확하게 확인할 수 있다. 이와 같이 홈페이지 개편 시 반응형 웹을 활용하여 점차 다양해지는 디바이스 환경을 고려하여 제작하고 있다.

출처 : 오픈 / 리뉴얼 정보커뮤니티 (www.dbcut.com)

14

<2013 월별 제작대비 반응형 웹 현황>

2 3 1 5 4 2 7 10

4

30 23

38

54 47

36

12

38

38

0

10

20

30

40

50

60

1월 2월 3월 4월 5월 6월 7월 8월 9월

제작

반응형

<2013 분기별제작대비 반응형 웹 현황>

6 11 21

91

137 88

0

20

40

60

80

100

120

140

160

1분기 2분기 3분기

제작

반응형

<현대 자동차> <현대 HGV >

2.4 대표 국내 반응형 웹 사이트

15

16

03 반응형 웹의 접근성 사례

ü  전문가 평가 결과

Ø  사이트 명 : CJ PHARM

Ø  사이트 분석 :

큰 화면에서는 좌우로 펼쳐진 3단 형태의 레이아웃 형태로 제공되며 모바일 화면에서는 상하 구조의 레이아웃 형태로 제공한다.

17

ü  전문가 평가 결과 3.1 반응형 웹의 접근성 우수 사례


CJ Pharm (http://www.cjp.co.kr)

웹(main1+ sub1) 모바일 웹(main1+ sub1)

1. 대체텍스트 준수 1.  대체텍스트 준수 2. 자막 제공 준수

2. 자막·수화의 멀티미디어 제공 준수 3. 색에 무관한 콘텐츠 인식 준수

4. 명확한 지시사항 제공 준수

3. 색에 무관한 인식 준수 5. 텍스트 콘텐츠의 명도대비 준수

6. 배경음 사용 금지 준수

4. 명도대비 미준수 7. 키보드 사용 보장 준수

8. 초점 이동 준수 5. 객체 접근성 준수 9. 응답시간 조절 준수

10. 정지 기능 제공 준수 6. 누르기 동작 지원 준수

11. 깜빡임과 번쩍임 제한 준수

12. 반복영역 건너뛰기 준수 7. 운영체제 접근성 준수 13. 제목 제공 준수

8. 충분한 시간 제공 준수 14. 적절한 링크텍스트 준수

15. 기본언어 표시 준수 9. 깜박거림의 사용 제한 준수 16. 사용자 요구에 따른 실행 준수

17. 콘텐츠의 선형화 준수 10. 쉬운 내비게이션 준수 18. 표의 구성 준수

19. 레이블 제공 준수 11. 예측 가능성 준수

20. 오류 정정 준수

21. 마크업 오류 방지 준수 12. 문법 준수 준수

22. 웹 어플리케이션 접근성 준수

Ø  문제점

1.  CJ Networks 메뉴를 펼친 뒤, 초점이동이 부정

확함. (Mobile)

2.  MOBILE 화면에서 선형화로 인한 사용성 문제가

생김 (Mobile)

3.  명도대비가 2.86:1 로 미준수 (Mobile)

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

18


Ø  사이트 명 : 현대증권


반응형 웹 사이트 중 증권사 사이트로 어떤 디바이스에서도 동일한 정보

를 제공하고 있으며,

직관적인 디자인으로 구성되어 있어 사용자로 하여금 사이트 이용이 보

다 수월하고 편리하다.


19


Ø  22개의 웹 접근성 항목 모두 준수

20

현대증권 (https://www.hdable.co.kr/go.able)







4. 명도대비 준수 7. 키보드 사용 보장 준수

8. 초점 이동 준수 5. 객체 접근성 준수 9. 응답시간 조절 준수













Ø  사이트명 : 한국조폐공사


상단에 메뉴와 하단 콘텐츠 형태의 레이아웃으로 구성된 사이트로 모바일로 접근할 경우, 메뉴가 퀵 메뉴 형태로 제공되며 콘텐

츠 부각이 되도록 레이아웃이 변경된다.

21

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


Ø  문제점

1.  본문, 서브메뉴 바로 가기 미작동.

2.  배너 이미지의 불충분한 대체 텍스트 제공.

3.  초점 시각화 미제공.

4.  본문, 서브메뉴 바로 가기 링크 미작동.

5.  자동 변화하는 배너의 이전, 다음, 정지 기능 미제공.

22

한국조폐공사 (http://www.komsco.com/contents/main/main.do)


1. 대체텍스트 미준수 1.  대체텍스트 미준수 2. 자막 제공 준수






8. 초점 이동 미준수 5. 객체 접근성 준수 9. 응답시간 조절 준수

10. 정지 기능 제공 미준수 6. 누르기 동작 지원 준수


12. 반복영역 건너뛰기 미준수 7. 운영체제 접근성 준수 13. 제목 제공 준수


15. 기본언어 표시 준수 9. 깜박거림의 사용 제한 준수 16. 사용자 요구에 따른 실행 미준수








3

2

5

2

1

4

1 본문과 서브메뉴 바로 가기 링크(<a>)에 본 문과 서브메뉴 영역의 id값을 href 속성으로 참조시킨다.

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

3

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

4 자동으로 변화하는 콘텐츠에는 이전, 다음, 정지 기능을 제공하여 제어할 수 있도록 구현해야 한다.

5 팝업을 띄울 시에는 새 창이 아닌 별도의 팝업존을 제공하거나, 팝업 내용으로 이동할 수 있는 링크영역을 상단에 제공할 수 있다.


23


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


국문 사이트와 동일한 구조의 웹사이트로 이국적인 디자인 스타일 및 텍스트 위주의 정보 구성을 통하여 사이트

콘텐츠 제공한다.

24



Ø  문제점

1.  키보드에 의한 초점은 시각적으로 구별 할 수 없음.

2.  배치형 테이블에 th를 사용함

25

KOMSCO ( http://english.komsco.com/)








8. 초점 이동 미준수 5. 객체 접근성 준수 9. 응답시간 조절 준수






17. 콘텐츠의 선형화 준수 10. 쉬운 내비게이션 준수 18. 표의 구성 미준수







1

키보드 초점은 링크 접근 시 점선의 테두리로

나타나 시각적으로 위치를 확인할 수 있도록

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

1

2

2 - 배치형 테이블은 아래처럼 변경해야 한다.

<th>First issuance</th>

↓

<td>First issuance</td>

- Caption과 summary는 사용하지 않는다.


26


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


삼성전자 서비스 사이트로 상·하단 구조의 레이아웃 구조를 작은

디바이스 환경에서는 아이콘 이미지를 생략하고 텍스트 메뉴를 제

공하는 형태로 레이아웃 변경된다.


27


Ø  문제점

1.  이미지와 무관한 대체 텍스트 제공

2.  링크 텍스트 제공하지 않음

3.  메인 메뉴와 하위 메뉴를 중첩하지 않음

4.  ID 중복사용

5.  움직이는 배너 정지제공X (Mobile)

6.  초점 상단 튐 (Mobile)

28

삼성전자서비스 (http://www.samsungsvc.co.kr/index.do)








8. 초점 이동 준수 5. 객체 접근성 미준수 9. 응답시간 조절 준수




8. 충분한 시간 제공 미준수 14. 적절한 링크텍스트 미준수


17. 콘텐츠의 선형화 미준수 10. 쉬운 내비게이션 준수 18. 표의 구성 미준수



21. 마크업 오류 방지 미준수 12. 문법 준수 준수




1Life companion 이미지와 동일한 alt 값을 제공한다.

alt=“갤럭시 S4 완전정복2”

↓

alt=“Life companion”

1

2

2 링크 텍스트를 제공해야 한다.

(의미 없는 이미지라도 링크가 있으면 대체 텍스트를

제공)

3

3 키보드 포커스는 빠른 해결 다음 빠른 해결 하위

메뉴 순서로 진행 되어야 한다.

(상위메뉴 리스트 안에 하위 메뉴가 중첩으로 되어

있어야 함.)

4 id="lst_problem“ 중복 사용할 수 없다.

4


29


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


비주얼 요소를 다단 구조로 제공하고 있으며, 모바일/태블릿/PC에서 각기 다른 최적화된 레이아웃의 사이트를 제공하고 있다. 또한

이미지가 아닌 시스템 폰트를 사용하여 디바이스별 호환성을 고려

하였다.

30



Ø  문제점

1.  이미지 링크에 초점 시각화 미제공.

2.  본문 바로가기 링크 클릭 시 본문이 아닌 다른 위

치로 이동.

3.  전체메뉴 펼치기를 누를 경우 펼쳐졌다가 다시 자

동으로 닫힘 (Mobile)

31


유니온 스틸 (http://www.unionsteel.co.kr/ko/main.do)








8. 초점 이동 미준수 5. 객체 접근성 미준수 9. 응답시간 조절 준수



12. 반복영역 건너뛰기 미준수 7. 운영체제 접근성 미준수 13. 제목 제공 준수









11 키보드 초점은 링크 접근 시 점선의 테두리로 나타나 시

각적으로 위치를 확인할 수 있도록 제공해야 한다. (css/js 확인 필요)

2 현재 서브페이지의 본문 바로가기 링크가 현재 본문이 아닌 반복되는 콘텐츠 영역으로 이동되고 있다. 본문 바로가기 링크는 반복되는 모든 영역을 건너뛰어, 실제 본문영역 <div>의 id값을 href속성에 참조시켜야 한다. 여기서는 <div class="content">에 id속성을 추가하여 해당 id를 본문 바로가기 링크와 연결시킨다.

2


32


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

Ø  사이트 분석 : 삼성전자 스토어 사이트로 블록으로 구성된 콘텐츠 형태의 레이아웃으로 제공한다.

33



Ø  문제점 1.  이미지와 무관한 대체 텍스트 제공

2.  레이블 제공

3.  ID 중복사용

4.  초점이 최상단으로 튕김 (Mobile)

34

삼성전자 스토어 (http://store.samsung.com/sec/)








8. 초점 이동 준수 5. 객체 접근성 미준수 9. 응답시간 조절 준수



12. 반복영역 건너뛰기 준수 7. 운영체제 접근성 준수 13. 제목 제공 미준수



17. 콘텐츠의 선형화 준수 10. 쉬운 내비게이션 미준수 18. 표의 구성 준수

19. 레이블 제공 미준수 11. 예측 가능성 준수


21. 마크업 오류 방지 미준수 12. 문법 준수 미준수




1

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

2Input 요소에 1:1 대응하는 <label>요소 또는

title 속성을 제공한다.

2

3

id는 중복 사용할 수 없다.

(id = “guestEmail”

id는 한 페이지에 중복 사용 불가능)

3


35


Ø  사이트 명 : Samsung-Engineering


메뉴와 콘텐츠 영역의 다단 레이아웃의 효과적 사용으로 태블릿과 모바일에서 메뉴를 열고 닫는 기능을 수행할 수 있어 디바이스 별로 효과

적인 레이아웃을 구현하고 있다. 또한 내용의 대부분이 시스템 폰트를

사용한 점은 기기에 따른 유동적 배치를 효율적으로 구현하였다.


36


Ø  문제점

1.  대체텍스트가 잘못 제공되거나, 의미 없는 이미지에 대체텍스트를 제공함.

2.  자동으로 변화하는 배너의 콘트롤러 작동 시

초점이 상단으로 빠짐.

(의도하지 않은 초점 변화이므로 검사항목 16.

에서 동시 감점.)

3.  레이어팝업에서의 비논리적 초점 이동.

37


삼성전자 엔지니어링 (http://www.samsungengineering.com/kor/index)




















1 대체텍스트는 이미지의 내용과 동일하게 제공해야 한다. 그러나 의미가 없는 이미지(배경이나 아이콘 등)는 alt속성을 제공하되 빈 값으로 제공한다. (alt=“”)

2 현재, 배너 이미지의 링크 목록의 마우스 클릭 이벤트는 제대로 작동하나, 키보드 엔터 시 초점이 상단으로 빠지는 문제 발생. 초점은 그대로 머물러 있고 해당 배너 이미지로 바뀌는 기능만 실행되어야 한다.

1

21 1

3 3 레이어 팝업은 해당 링크 클릭 시 초점이 레이어 팝업 영역으로 이동하여 레이어 팝업 내의 모든 링크를 키보드 Tab키로 거칠 수 있어야 하며, 닫기를 누르면 원래 있던 위치로 돌아갈 수 있어야 한다.


38


Ø  사이트명 : PROGRESSIVE EXR

Ø  사이트 분석 : - 콘텐츠와 메뉴를 좌우구조의 레이아웃으로 제공하였으며,

콘텐츠 구성의 경우 블록형태로 제공. - 큰 화면에서는 메뉴와 콘텐츠가 좌우 형태로 제공 되며,

모바일에서는 메뉴와 콘텐츠와의 구성이 상하 구조로 제공.


39


Ø  문제점

1.  불충분한 대체텍스트 제공.

2.  반복영역 건너뛰기 링크 없음.

3.  패밀리/글로벌 사이트의 키보드 접근 불가.

4.  레이어 팝업의 비논리적 초점 이동.

40

EXR (http://www.exrkorea.com/main.asp)





















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

2 현재, 반복영역 건너뛰기 링크가 없다. 반복되는 메뉴 영역을 건너뛰어 본문으로 바로갈 수 있는 바로가기 링크를 제공해야 한다.

? 2

3 패밀리사이트와 글로벌사이트가 헤딩 태그의 onclick이벤트 핸들러가 적용되어 있어, 마우스 클릭만 가능하도록 구현되어 있다. 키보드 접근이 가능하도록 키보드 이벤트 핸들러를 함께 제공하거나, <a href=“#”>태그로 마크업하여 키보드의 접근이 가능하도록 수정해야 한다.

1

3

1

4

<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>

4 레이어 팝업은 해당 링크 클릭 시 초점이 레이어 팝업 영역으로 이동하여 레이어 팝업 내의 모든 링크를 키보드 Tab키로 거칠 수 있어야 하며, 닫기를 누르면 원래 있던 위치로 돌아갈 수 있어야 한다.


41


Ø  사이트 명 : 코카콜라


위젯 스타일의 레이아웃 형태로 콘텐츠를 제공하며, 레이아웃 변화 시

다양한 효과를 통하여 재미요소를 전달한다.


42


43


코카콜라 코리아 (http://www.cocacola.co.kr/)







4. 명도대비 준수 7. 키보드 사용 보장 미준수




12. 반복영역 건너뛰기 미준수 7. 운영체제 접근성 준수 13. 제목 제공 미준수



17. 콘텐츠의 선형화 준수 10. 쉬운 내비게이션 미준수 18. 표의 구성 준수



21. 마크업 오류 방지 미준수 12. 문법 준수 준수


Ø  문제점

1.  대체 텍스트를 제공하지 않음

2.  키보드 접근 불가능

3.  키보드 초점을 시각적으로 확인 불가능

4.  반복영역 건너뛰기 기능 제공하지 않음

5.  페이지 제목 제공하지 않음

6.  Id 중복 사용


11 대체텍스트는 누락되거나 불충분하게 제공하지

않고, 이미지의 내용과 동일하게 제공해야 한다.

2

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

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

4

3

4 본문 바로 가기를 제공해야 한다.

(본문 바로 가기를 제공하며 본문 콘텐츠

영역으로 빠르게 이동 할 수 있어야 함)

5 페이지 적절한 제목을 제공해야 한다.

( 페이지 마다 동일한 제목이 아닌 페이지

에 대한 상세한 제목을 제공해야 함. )

5 6

6 id는 중복 사용할 수 없다.

(id는 한 페이지에 중복 사용 불가능

id="blog_wrap")


44

45

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

(시각장애인 반응형 웹 시연)

ü  전문가 평가 결과 시각장애인의 사용자 평가 - 현대증권

PC IOS Android

오류 상(上) 상(上)

Ie8 Sense Reade

r

아이폰4 IOS 6.1.3

갤럭시3 젤리빈 4.1.2

Ø  사이트명 : 현대증권

Ø  사용자 평가 결과 :

- PC : 스크린 이용시 속도 이슈로 제대로 된 평가 불가 - Mobile : 정상적으로 사이트 이용 가능

46

ü  전문가 평가 결과 시각장애인의 사용자 평가 – CJ PHARMA

Ø  사이트명 : CJ PHARMA


- PC : 22개 지침을 모두 준수하여 사이트 이용 가능 - Mobile : 모바일에서만 제공 되는 버튼에 대한 alt값 누락 Top버튼 클릭시 콘텐츠 누락 현상 발생 디자인을 위한 문단구분으로 여러 번의 제스처 사용

PC IOS Android

상(上) 중(中) 중(中)

Ie8 Sense Reade

r



47

ü  전문가 평가 결과 시각장애인의 사용자 평가 – 삼성전자 서비스

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


- PC : 6개 지침을 준수하지 않아 사이트 이용 불가 - Mobile : 포커스 이동 시 최상위 튕김 발생 롤링 배너에 대한 정지기능 미제공

PC IOS Android

하(下) 하(下) 하(下)

Ie8 Sense Reade

r



48

ü  전문가 평가 결과 시각장애인의 사용자 평가 - 코카콜라

Ø  사이트명 : 코카콜라


- PC : 동영상에 대한 버튼에 포커스 이동 불가 대체텍스트 / 키보드 사용보장 등 주요지침 미준수 - Mobile : 특정 메뉴에 대한 콘텐츠 누락 발생 로고 클릭시 링크 오류로 이동 불가

PC IOS Android

하(下) 하(下) 하(下)

Ie8 Sense Reade

r



49

50

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

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

51

HTML

CSS

JS

CSS

JS

CSS

JS

PC

Mobile

Tablet

대체텍스트 자막제공

색에 무관한 콘텐츠 인식 명확한 지시사항 제공 배경음 사용금지 키보드사용보장 초점이동

깜빡임/번쩍임 제한 반복영역건너뛰기 제목제공

적절한 링크텍스트 기본언어 표시 콘텐츠의 선형화 표의 구성 레이블 제공

마크업 오류 방지

콘텐츠 명도대비 콘텐츠의 선형화

키보드사용보장 초점이동

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

52

HTML CSS JS

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

53

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

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

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

54

Lang=en

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

55

보완방법 <p lang=“ko”></p> 속성을 사용하여 한글인 부분에 해당 속성을 제공하게 되면, 한글을 인지 하여 읽어주게 됨.

문제점 Lang 속성이 en(영어) 이며, 콘텐츠중 한글이 있는 경우, Pc의 센스리더에서는 영어와 한글을 읽는데 무리가 없으나 모바일(IOS)의 경우, 영어와 숫자만 읽고, 한글은 읽지 않는다.

Lang=en

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

56

- 참고사항 : Andorid 젤리빈(4.2.2)의 경우, pc와 같이 문제없음

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

57

- Voiceover사용자는 지장 없음.

보완방법 모바일의 경우 스킵 네비게이션을 제공하지 않아도, 사용자가 손가락으로 중간부터 터치하는 식으로 페이지를 임의로 건너뛸 수 있기 때문에 굳이 스킵 네비게이션을 따로 제공해줄 필요는 없음.

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

MOBILE에서 초점이동

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

58

59

06 반응형 웹의 미래

6. 반응형 웹의 미래

60

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

서울 성동구 성수2가 3동 277-43 한신아크밸리 지식산업센터 805호

E-mail : [email protected]

Tel : 02-2201-9928 장석현 이제승

박가현 권오택 김다형

장선영

Business

웹접근성캠프서울 반응형웹에서의접근성확보방법