1. (스크린리더 및 키보드 사용자를 위한)(스크린리더 및 키보드 사용자를 위한)(스크린리더 및 키보드 사용자를 위한)
유용한 퍼블리싱 기법 3가지유용한 퍼블리싱 기법 3가지유용한 퍼블리싱 기법 3가지
인증진단팀 오정훈 팀장인증진단팀 오정훈 팀장인증진단팀 오정훈 팀장
2. 순 서순 서순 서
0. 웹 표준을 위한 Sense Reader 설정0. 웹 표준을 위한 Sense Reader 설정0. 웹 표준을 위한 Sense Reader 설정
1. 효율적인 레이블 제공 방법1. 효율적인 레이블 제공 방법1. 효율적인 레이블 제공 방법
2. tabindex의 비밀2. tabindex의 비밀2. tabindex의 비밀
3. Flash 대체콘텐츠 제공3. Flash 대체콘텐츠 제공3. Flash 대체콘텐츠 제공
3. 0. 웹 표준을 위한 Sense Reader 설정0. 웹 표준을 위한 Sense Reader 설정0. 웹 표준을 위한 Sense Reader 설정
4. 국내 1위 스크린리더 = Sense Reader!국내 1위 스크린리더 = Sense Reader!국내 1위 스크린리더 = Sense Reader!
••• 시각장애인 개발자들이 직접 개발한시각장애인 개발자들이 직접 개발한시각장애인 개발자들이 직접 개발한
토종 스크린리더토종 스크린리더토종 스크린리더
••• 국내 시각장애인은 대부분 사용국내 시각장애인은 대부분 사용국내 시각장애인은 대부분 사용
(JAWS, 실로암보이스 점유율 매우 낮음)(JAWS, 실로암보이스 점유율 매우 낮음)(JAWS, 실로암보이스 점유율 매우 낮음)
••• 국내 웹 환경 특성으로 인해국내 웹 환경 특성으로 인해국내 웹 환경 특성으로 인해
웹 표준 지원이 미흡웹 표준 지원이 미흡웹 표준 지원이 미흡
••• 퍼블리셔들의 걱정과 고민의 주 대상퍼블리셔들의 걱정과 고민의 주 대상퍼블리셔들의 걱정과 고민의 주 대상
센스리더 의존적이면 안 되나 고려는 해야 함센스리더 의존적이면 안 되나 고려는 해야 함센스리더 의존적이면 안 되나 고려는 해야 함
5. 웹 표준을 위한 Sense Reader 설정 방법웹 표준을 위한 Sense Reader 설정 방법웹 표준을 위한 Sense Reader 설정 방법
1. [가상커서 설정] 센스리더 실행 > IE 실행 > Ctrl+Shift+F91. [가상커서 설정] 센스리더 실행 > IE 실행 > Ctrl+Shift+F91. [가상커서 설정] 센스리더 실행 > IE 실행 > Ctrl+Shift+F9
2. 다음 4가지 항목 설정 필요2. 다음 4가지 항목 설정 필요2. 다음 4가지 항목 설정 필요
••• 자동포커스 = 선택자동포커스 = 선택자동포커스 = 선택
••• 툴팁읽기 = 선택툴팁읽기 = 선택툴팁읽기 = 선택
••• 숨김내용읽기 = 해제숨김내용읽기 = 해제숨김내용읽기 = 해제
••• 변경내용자동구성 = 선택변경내용자동구성 = 선택변경내용자동구성 = 선택
: 초점을 확인 시키고, onfocus 이벤트가 작동 됨: 초점을 확인 시키고, onfocus 이벤트가 작동 됨: 초점을 확인 시키고, onfocus 이벤트가 작동 됨
: title 속성을 이용한 부가 설명을 읽을 수 있음: title 속성을 이용한 부가 설명을 읽을 수 있음: title 속성을 이용한 부가 설명을 읽을 수 있음
: 화면에 없는 display:none;를 읽지 않음: 화면에 없는 display:none;를 읽지 않음: 화면에 없는 display:none;를 읽지 않음
: AJAX 등 페이지 갱신 없이 콘텐츠 변화 인식: AJAX 등 페이지 갱신 없이 콘텐츠 변화 인식: AJAX 등 페이지 갱신 없이 콘텐츠 변화 인식
6. 1. 효과적인 레이블 제공 방법1. 효과적인 레이블 제공 방법1. 효과적인 레이블 제공 방법
7. 레이블을 제공 방법 및 스크린리더 지원레이블을 제공 방법 및 스크린리더 지원레이블을 제공 방법 및 스크린리더 지원
<label> 활용 방법<label> 활용 방법<label> 활용 방법 title 활용 방법title 활용 방법title 활용 방법
암묵적 label암묵적 label암묵적 label 명시적 label명시적 label명시적 label title 속성title 속성title 속성
<label><label><label>
<input type="checkbox">짜장<input type="checkbox">짜장<input type="checkbox">짜장
</label></label></label>
<label for="jjam"><label for="jjam"><label for="jjam">
<input type="radio" id="jjam"><input type="radio" id="jjam"><input type="radio" id="jjam">
짬뽕</label>짬뽕</label>짬뽕</label>
ororor
<input type="radio" id="jjam"><input type="radio" id="jjam"><input type="radio" id="jjam">
<label for="jjam">짬뽕</label><label for="jjam">짬뽕</label><label for="jjam">짬뽕</label>
<select title="메뉴 선택“><select title="메뉴 선택“><select title="메뉴 선택“>
<option>짜장</option><option>짜장</option><option>짜장</option>
<option>짬봉</option><option>짬봉</option><option>짬봉</option>
</select></select></select>
••• Sense Reader : 미지원Sense Reader : 미지원Sense Reader : 미지원
••• JAWS : 지원JAWS : 지원JAWS : 지원
••• Sense Reader : 제한적 지원Sense Reader : 제한적 지원Sense Reader : 제한적 지원
••• JAWS : 지원JAWS : 지원JAWS : 지원
••• Sense Reader,Sense Reader,Sense Reader,
JAWS 모두 지원JAWS 모두 지원JAWS 모두 지원
스크린리더 인식 우선순위는 <label> > title스크린리더 인식 우선순위는 <label> > title스크린리더 인식 우선순위는 <label> > title
(동시에 제공할 경우 tab 이동 시 <label>만 읽혀 사용성 떨어짐)(동시에 제공할 경우 tab 이동 시 <label>만 읽혀 사용성 떨어짐)(동시에 제공할 경우 tab 이동 시 <label>만 읽혀 사용성 떨어짐)
8. ••• <label>이 연결된 서식에 고유한 id가 지정되어야 함<label>이 연결된 서식에 고유한 id가 지정되어야 함<label>이 연결된 서식에 고유한 id가 지정되어야 함
••• <label>의 for와 <input>의 id는 1:1로 매칭 필요<label>의 for와 <input>의 id는 1:1로 매칭 필요<label>의 for와 <input>의 id는 1:1로 매칭 필요
••• id, for 연결 시 실수 빈번히 발생id, for 연결 시 실수 빈번히 발생id, for 연결 시 실수 빈번히 발생
••• 열심히 만들었는데 개발에서 깨지는 경우 빈번열심히 만들었는데 개발에서 깨지는 경우 빈번열심히 만들었는데 개발에서 깨지는 경우 빈번
••• 서식 수정, 추가 시 신경 쓸 것이 많음서식 수정, 추가 시 신경 쓸 것이 많음서식 수정, 추가 시 신경 쓸 것이 많음
••• <label>은 보이는 텍스트라 충분한 설명에 제한적<label>은 보이는 텍스트라 충분한 설명에 제한적<label>은 보이는 텍스트라 충분한 설명에 제한적
••• <form>이 없으면 Sense Reader 미 지원<form>이 없으면 Sense Reader 미 지원<form>이 없으면 Sense Reader 미 지원
공수도 많고 리스크도 많은 명시적 레이블공수도 많고 리스크도 많은 명시적 레이블공수도 많고 리스크도 많은 명시적 레이블
9. 효율적인 레이블 제공 방법효율적인 레이블 제공 방법효율적인 레이블 제공 방법
충분한 설명을 담은 title 속성을 사용하자충분한 설명을 담은 title 속성을 사용하자충분한 설명을 담은 title 속성을 사용하자
••• 모든 스크린리더 지원모든 스크린리더 지원모든 스크린리더 지원
••• <form> 여부와 관계없음<form> 여부와 관계없음<form> 여부와 관계없음
••• 상세 설명이 가능하여상세 설명이 가능하여상세 설명이 가능하여
사용성을 높일 수 있음사용성을 높일 수 있음사용성을 높일 수 있음
••• 심사, 평가에서도 감점 아님심사, 평가에서도 감점 아님심사, 평가에서도 감점 아님
checkbox, radio 는 암묵적 <label> 추가!checkbox, radio 는 암묵적 <label> 추가!checkbox, radio 는 암묵적 <label> 추가!
<label><input type="checkbox"<label><input type="checkbox"<label><input type="checkbox"
title="짜장“>짜장</label>title="짜장“>짜장</label>title="짜장“>짜장</label>
••• id, for를 연결하지 않아도id, for를 연결하지 않아도id, for를 연결하지 않아도
텍스트 클릭 효과 발생텍스트 클릭 효과 발생텍스트 클릭 효과 발생
11. tabindex?tabindex?tabindex?
키보드(tabping) 접근 여부 및 순서를 관여하는 속성키보드(tabping) 접근 여부 및 순서를 관여하는 속성키보드(tabping) 접근 여부 및 순서를 관여하는 속성
••• 웹에서 키보드로 접근 가능한 개체는웹에서 키보드로 접근 가능한 개체는웹에서 키보드로 접근 가능한 개체는
링크 요소, 서식 요소 뿐!링크 요소, 서식 요소 뿐!링크 요소, 서식 요소 뿐!
(a, area, input, button, select, textarea)(a, area, input, button, select, textarea)(a, area, input, button, select, textarea)
••• 키보드 이동은 마크업 순서를 따르게키보드 이동은 마크업 순서를 따르게키보드 이동은 마크업 순서를 따르게
되어 있으나 tabindex를 적용하면되어 있으나 tabindex를 적용하면되어 있으나 tabindex를 적용하면
접근 여부 및 순서 조정 가능접근 여부 및 순서 조정 가능접근 여부 및 순서 조정 가능
••• -1~32767 의 값을 사용할 수 있음-1~32767 의 값을 사용할 수 있음-1~32767 의 값을 사용할 수 있음
(-1은 비표준이나 대부분 브라우저 지원)(-1은 비표준이나 대부분 브라우저 지원)(-1은 비표준이나 대부분 브라우저 지원)
잘 알고 활용하면 키보드 사용자의잘 알고 활용하면 키보드 사용자의잘 알고 활용하면 키보드 사용자의
접근성과 사용성을 높일 수 있음접근성과 사용성을 높일 수 있음접근성과 사용성을 높일 수 있음
12. tabindex의 접근 순서와 숫자의 의미tabindex의 접근 순서와 숫자의 의미tabindex의 접근 순서와 숫자의 의미
마크업 순서마크업 순서마크업 순서 tabping 순서tabping 순서tabping 순서 설명설명설명
그냥링크1그냥링크1그냥링크1
그냥링크2그냥링크2그냥링크2
tabindex2
tabindex-1
tabindex=1tabindex=1tabindex=1
tabindex=2tabindex=2tabindex=2
tabindex=0tabindex=0tabindex=0
그냥텍스트그냥텍스트그냥텍스트
그냥링크3그냥링크3그냥링크3
tabindex=1tabindex=1tabindex=1
tabindex2
tabindex=2tabindex=2tabindex=2
그냥링크1그냥링크1그냥링크1
그냥링크2그냥링크2그냥링크2
tabindex=0tabindex=0tabindex=0
그냥링크3그냥링크3그냥링크3
••• 브라우저는 페이지가 로딩 되면 tab 목록을 만든다.브라우저는 페이지가 로딩 되면 tab 목록을 만든다.브라우저는 페이지가 로딩 되면 tab 목록을 만든다.
- tab 목록 만들 시 taindex 양수가 있는 것들은- tab 목록 만들 시 taindex 양수가 있는 것들은- tab 목록 만들 시 taindex 양수가 있는 것들은
다음 우선순위를 적용한다.다음 우선순위를 적용한다.다음 우선순위를 적용한다.
1) 가장 작은 양수를 최상위로 올린다.1) 가장 작은 양수를 최상위로 올린다.1) 가장 작은 양수를 최상위로 올린다.
2) 동수가 있으면 마크업 순서대로 정렬한다.2) 동수가 있으면 마크업 순서대로 정렬한다.2) 동수가 있으면 마크업 순서대로 정렬한다.
3) 그 다음 큰 수로 넘어간다.3) 그 다음 큰 수로 넘어간다.3) 그 다음 큰 수로 넘어간다.
- 나머지는 마크업 순서를 따른다.- 나머지는 마크업 순서를 따른다.- 나머지는 마크업 순서를 따른다.
••• tabindex="0" 은 <div>, <span> 등 키보드 접근tabindex="0" 은 <div>, <span> 등 키보드 접근tabindex="0" 은 <div>, <span> 등 키보드 접근
불가 개체를 키보드 접근 가능토록 만듬(순서 없음)불가 개체를 키보드 접근 가능토록 만듬(순서 없음)불가 개체를 키보드 접근 가능토록 만듬(순서 없음)
••• tabindex="-1"은 키보드 접근을 막음tabindex="-1"은 키보드 접근을 막음tabindex="-1"은 키보드 접근을 막음
tabindex-1 , ’그냥텍스트’ 는 tab 접근 안 됨, ’그냥텍스트’ 는 tab 접근 안 됨, ’그냥텍스트’ 는 tab 접근 안 됨
13. tabindex 유용(필요)한 활용tabindex 유용(필요)한 활용tabindex 유용(필요)한 활용
tabindex=“양수”tabindex=“양수”tabindex=“양수” tabindex=“0”tabindex=“0”tabindex=“0” tabindex=“-1”tabindex=“-1”tabindex=“-1”
복잡하고 콘텐츠가 많은복잡하고 콘텐츠가 많은복잡하고 콘텐츠가 많은
사이트에서 중요한 콘텐츠를사이트에서 중요한 콘텐츠를사이트에서 중요한 콘텐츠를
먼저 접근되도록 할 때먼저 접근되도록 할 때먼저 접근되도록 할 때
자막, 약관 등 overflow::자막, 약관 등 overflow::자막, 약관 등 overflow::
scroll; 박스를 만들 때scroll; 박스를 만들 때scroll; 박스를 만들 때
접근성 없는 Flash 및접근성 없는 Flash 및접근성 없는 Flash 및
키보드 함정에 빠지는키보드 함정에 빠지는키보드 함정에 빠지는
외부 API, 프레임 적용 시외부 API, 프레임 적용 시외부 API, 프레임 적용 시
네이버, 다음 등네이버, 다음 등네이버, 다음 등
양대 포털 적용 됨양대 포털 적용 됨양대 포털 적용 됨
‘검색 부분 > 로그인 부분‘검색 부분 > 로그인 부분‘검색 부분 > 로그인 부분
> 최상단’순서로 이동> 최상단’순서로 이동> 최상단’순서로 이동
<div tabindex="0"...><div tabindex="0"...><div tabindex="0"...>
약관 or 자막약관 or 자막약관 or 자막
</div></div></div>
<object tabindex="-1"...><object tabindex="-1"...><object tabindex="-1"...>
접근성 없는 flash접근성 없는 flash접근성 없는 flash
</object></object></object>
<iframe tabindex="-1"...<iframe tabindex="-1"...<iframe tabindex="-1"...
src=“키보드가 함정에src=“키보드가 함정에src=“키보드가 함정에
빠지는 외부 페이지”>빠지는 외부 페이지”>빠지는 외부 페이지”>
15. 접근성 없는 Flash 반드시 걷어내야 하나?접근성 없는 Flash 반드시 걷어내야 하나?접근성 없는 Flash 반드시 걷어내야 하나?
16. 접근성도 높이고 비주얼도 살리는 일석이조 대체콘텐츠접근성도 높이고 비주얼도 살리는 일석이조 대체콘텐츠접근성도 높이고 비주얼도 살리는 일석이조 대체콘텐츠
Flash 대체콘텐츠 제공이 효과적인 경우Flash 대체콘텐츠 제공이 효과적인 경우Flash 대체콘텐츠 제공이 효과적인 경우
••• Flash 유지하고 싶지만 수정하거나 재개발하기 어려운 경우Flash 유지하고 싶지만 수정하거나 재개발하기 어려운 경우Flash 유지하고 싶지만 수정하거나 재개발하기 어려운 경우
••• 단순 정보, 링크 제공을 목적으로 하는 Flash단순 정보, 링크 제공을 목적으로 하는 Flash단순 정보, 링크 제공을 목적으로 하는 Flash
••• 유사한 효과를 위해 jQuery 등 스크립트를 많이 사용해야 하는 경우유사한 효과를 위해 jQuery 등 스크립트를 많이 사용해야 하는 경우유사한 효과를 위해 jQuery 등 스크립트를 많이 사용해야 하는 경우
(오히려 접근성 확보가 어렵고 사용성이 떨어질 수 있음)(오히려 접근성 확보가 어렵고 사용성이 떨어질 수 있음)(오히려 접근성 확보가 어렵고 사용성이 떨어질 수 있음)
간단한 IR기법과 스크립트로 대체콘텐츠 제공 가능간단한 IR기법과 스크립트로 대체콘텐츠 제공 가능간단한 IR기법과 스크립트로 대체콘텐츠 제공 가능
••• 단순 링크만 있는 경우단순 링크만 있는 경우단순 링크만 있는 경우
- focus 수도 클래스를 활용한 키보드 접근 링크 제공 (CSS)- focus 수도 클래스를 활용한 키보드 접근 링크 제공 (CSS)- focus 수도 클래스를 활용한 키보드 접근 링크 제공 (CSS)
••• 정보 및 링크가 동시에 있는 경우정보 및 링크가 동시에 있는 경우정보 및 링크가 동시에 있는 경우
- 대체콘텐츠 마크업 후 레이어 팝업 형태로 제공 (CSS + 스크립트)- 대체콘텐츠 마크업 후 레이어 팝업 형태로 제공 (CSS + 스크립트)- 대체콘텐츠 마크업 후 레이어 팝업 형태로 제공 (CSS + 스크립트)
17. Flash GNB 대체콘텐츠Flash GNB 대체콘텐츠Flash GNB 대체콘텐츠
••• 키보드 및 스크린리더 사용자는 tab 이동 시 flash 위로키보드 및 스크린리더 사용자는 tab 이동 시 flash 위로키보드 및 스크린리더 사용자는 tab 이동 시 flash 위로
나타나는 대체 링크를 통해 접근나타나는 대체 링크를 통해 접근나타나는 대체 링크를 통해 접근
••• Flash에 키보드 진입을 막기 위해Flash에 키보드 진입을 막기 위해Flash에 키보드 진입을 막기 위해
<object>에 tabindex="-1" 적용<object>에 tabindex="-1" 적용<object>에 tabindex="-1" 적용
••• 스크린리더 인식을 막고 대체 링크를 Flash 위에 띄우기스크린리더 인식을 막고 대체 링크를 Flash 위에 띄우기스크린리더 인식을 막고 대체 링크를 Flash 위에 띄우기
위해 wmode는 transparent 적용위해 wmode는 transparent 적용위해 wmode는 transparent 적용
* 참고 : 한국폴리텍대학(* 참고 : 한국폴리텍대학(* 참고 : 한국폴리텍대학(www.kopo.ac.kwww.kopo.ac.kwww.kopo.ac.kr)r)r)
18. 레이어 팝업을 이용한 대체콘텐츠레이어 팝업을 이용한 대체콘텐츠레이어 팝업을 이용한 대체콘텐츠
<script type="text/javascript"><script type="text/javascript"><script type="text/javascript">
function altc_mfg_of() { altc_mfc.style.display = "block"; }function altc_mfg_of() { altc_mfc.style.display = "block"; }function altc_mfg_of() { altc_mfc.style.display = "block"; }
.........
<a href="javascript:altc_mfg_of();" id="altc_mfc_btn">메인플래시 대체콘텐츠 보기</a><a href="javascript:altc_mfg_of();" id="altc_mfc_btn">메인플래시 대체콘텐츠 보기</a><a href="javascript:altc_mfg_of();" id="altc_mfc_btn">메인플래시 대체콘텐츠 보기</a>
<div id="altc_mfc"> ....<div id="altc_mfc"> ....<div id="altc_mfc"> ....
* 참고 : 한화S&C(* 참고 : 한화S&C(* 참고 : 한화S&C(www.hsnc.co.krwww.hsnc.co.krwww.hsnc.co.kr)))
* 참고 : KDB자산운용(www.kdbasset.co.kr)* 참고 : KDB자산운용(www.kdbasset.co.kr)* 참고 : KDB자산운용(www.kdbasset.co.kr)
19. 감사합니다.감사합니다.감사합니다.
연락처 : 02-2678-0078(대표)연락처 : 02-2678-0078(대표)연락처 : 02-2678-0078(대표)
이메일 :이메일 :이메일 : webwatch@hanmail.netwebwatch@hanmail.netwebwatch@hanmail.net
주 소 : 서울시 영등포구 신길3동 355-294 신일빌딩 4층주 소 : 서울시 영등포구 신길3동 355-294 신일빌딩 4층주 소 : 서울시 영등포구 신길3동 355-294 신일빌딩 4층
(사)한국장애인인권포럼 산하 웹와치(주)(사)한국장애인인권포럼 산하 웹와치(주)(사)한국장애인인권포럼 산하 웹와치(주)
사이트 :사이트 :사이트 : www.webwatch.or.krwww.webwatch.or.krwww.webwatch.or.kr
