PDF 파일의 경우 Adobe Reader을 실행하면 센스리더의 가상커서 기능을 이용해 문서내용을 음성출력할 수 있습니다.

하지만 이를 위해선 PDF 파일을 제작할 때 반드시 텍스트 추출이 가능하도록 작업해줘야 하는데요

대부분의 경우 이런 내용을 숙지하지 못하고 있는 것 같습니다.

그래서 스크린리더로도 PDF 파일을 읽을 수 있도록 제작하는 방법 2가지를 소개합니다.


1. Haansoft PDF 프린터 이용 (HWP 파일을 PDF로 변환)

일단 한글2007이 설치되어 있어야 한다는 조건입니다. 한글2007의 경우 설치하고 온라인 업데이트를 하면 PDF 프린터드라이버가 설치됩니다. 문서파일을 열어 Ctrl+P를 눌러 프린트를 할 때 “Haansoft PDF”를 선택한 후 인쇄를 하면 지정한 폴더에 PDF 파일이 생성됩니다. 이렇게 할 경우 별도의 설정 없이 스크린리더가 읽을 수 있는 PDF 파일로 제작됩니다.

haansoft PDF 프린터 사용



2. doPDF 6 PDF프린터 이용 (대부분의 문서형식을 PDF로 변환)

doPDF라는 외국의 무료프로그램이 있습니다. 이 프로그램도 프린터 형태로 설치가 되는데요. 대부분의 문서편집기에서 doPDF 프린터로 문서를 출력할 수 있고 그 결과물은 Adobe Reader를 통해 센스리더로 음성출력이 되는 것을 확인했습니다.

doPDF 프린터사용 



Adobe Reader에서 PDF문서 읽기

Adobe Reader로 PDF 문서를 열경우 아래와 같은 대화상자가 나타나는데요 “시작(S)” 버튼에서 엔터키를 입력하고 잠시 기다리면 가상커서 상태로 PDF 문서를 읽을 수 있습니다. 가상커서 상태일 때는 위/아래 방향키로 문서를 탐색할 수 있고 문자열검색(Ctrl+F)도 가능합니다.

 AdobeReader 태그없는문서읽기


위 내용은 아래 환경에서 테스트가 이루어졌습니다.

Windows XP SP3
Sense Reader Professional Edition v1.1.0.6 / v1.1.0.7 (비공개 테스트버전)
Adobe Reader v9.1.0
한글2007 7.5.8.527
Excel 2007

2009/06/05 11:38 2009/06/05 11:38
해빠 이 작성.

요즘 접근성 지침을 준수해야 한다는 소식이 알려지면서

성급하게 스크린리더에 대한 이해가 없이 준수(?)하는 사례가 나타나고 있습니다.

하나의 이미지로 제작된 조직도나 개념도 등에 대해 성급하게 alt를 달다가 나타난 현상으로 보이는데

여기에 대한 고민이 좀 필요할 것 같습니다..



아래 예는 현재로선 잘못된 웹접근성 준수입니다.
(area 안에 href가 없을 경우 스크린리더는 전혀 인식하지 못합니다. 당연히 alt 값도 음성출력되지 않습니다.)

<img src="imagemap.gif" alt="이미지맵예제" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="9,3,207,63" alt="네이버" />
</map>

아래와 같이 사용하는 것이 바람직합니다.

<img src="imagemap.gif" alt="이미지맵예제" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="9,3,207,63" href=”http://www.naver.com” alt="네이버" />
</map>

* Sense Reader Professional Edition v1.1.0.6


이런 것들을 접하면서 이것이 꼭 나쁘지만은 않다는 생각을 하게 됩니다.

하나의 이미지로 제작된 조직도나 개념도의 경우 대체 텍스트를 달기 위해 alt나 longdesc를 사용하게 되는데

alt의 경우 한 공간에 너무 많은 정보를 넣어서 이해하기 어려운 상황이 발생하기도하고

longdesc의 경우 별도의 페이지를 만들고 새창을 띄워야 하기 때문에 불편한 점이 있습니다.


이미지맵은 원래 하나의 이미지에 여러 링크를 걸기 위해 만들어지고 사용되고 있지만

링크를 제거하고 이미지의 영역지정만으로도 대체 텍스트를 다는 것도 위의 2가지 방법의 단점을 보완할 수 있는 하나의 대안이 될 수 있을거란 생각을 해봅니다.

링크가 없더라도 이미지맵 영역을 인식할 수 있도록 스크린리더가 개발된다면 조직도에 대한 상하 개념 이해가 쉬워지고 통이미지의 논리적인 구조를 이해하는 데도 도움이 될 것 같습니다.

물론 지금은 스크린리더에서 이를 지원하지 않고 있지만 향후 웹접근성이나 스크린리더 개발 과정에서 논의가 되었으면 하는 개인적인 바람입니다.

2009/05/28 15:16 2009/05/28 15:16
해빠 이 작성.



 웹 접근성을 고려한 신기술 콘텐츠 제작기법
- JavaScript, Flex, Flash를 중심으로 -


출처 : 정보통신향상 표준화 포럼 (http://www.iabf.or.kr)
참고 : 웹접근성 연구소 (http://www.wah.or.kr)

2009/05/15 09:21 2009/05/15 09:21
해빠 이 작성.


행정안전부 산하 정보격차 해소 글로벌 전문기관 한국정보문화진흥원(원장 손연기, www.kado.or.kr)은 3월 17일 ‘인터넷 웹 콘텐츠 접근성 지침 (이하 웹 접근성 국가표준)’에 대한 기술 가이드라인을 공표했다.

본 가이드라인은 웹 사이트 구축․운영시 개발자 및 운영자가 국가 표준에 따른 기술 구현방법을 쉽게 이해하고 웹 접근성을 준수하도록 돕기 위해 개발했다. 세부적으로는 이미지에 대한 대체 텍스트 제공, 동영상에 대한 자막 제공, 마우스가 아닌 키보드 이용 보장 등 꼭 지켜야 할 18개 항목으로 구성했다. 또 각 항목별로 기술 구현 방법과 더불어 올바른 준수 사례와 잘못된 사례를 제시해 준수여부를 쉽게 확인할 수 있도록 했다.

이번 가이드라인은 한국정보문화진흥원과 충북대 김석일 교수 등 웹 접근성 관련 전문가들이 개발하고 2008년 7월부터 12월까지 장애인 단체, 보조기기 업체, 포털업체, 웹 개발자, 보건복지가족부, 국가인권위원회 등 다양한 이해관계자의 의견을 수렴하여 최종 확정하였습니다.

출처 : 정보통신향상 표준화 포럼 (http://www.iabf.or.kr)
참고 : 웹접근성 연구소 (http://www.wah.or.kr)
2009/05/15 09:08 2009/05/15 09:08
해빠 이 작성.

태그 작성에 따라 스크린리더가 음성출력을 어떻게 하는지 확인해 보았습니다.

테스트환경
Windows XP SP3
Internet Explorer 8
Sense Reader Professional Edition v1.1.0.6

1. HEADING

헤딩 간 이동 단축키 <Ctrl+F6> 를 사용할 경우 아래와 같이 음성출력합니다.
<h1>이미지</h2>의 경우 별도의 항목으로 처리되어 헤딩을 사용하는 의미가 약해집니다.

예제소스 음성출력

네이버

메일 뉴스 카페

네이트

메일 뉴스 카페

싸이월드

메일 뉴스 미니홈피

<h2>네이버</h2>
메일 뉴스 카페

<h2>네이트</h2>
메일 뉴스 카페

<h2>싸이월드</h2>
메일 뉴스 미니홈피

네이버 헤딩2

네이트 헤딩2

싸이월드 헤딩2

2. TABLE

표를 읽을 때 화살표 위/아래 키로 이동할 경우 아래와 같이 음성출력합니다.
행과 행 사이는 빈줄을 넣어 구분하게 됩니다.
summary는 “테이블설명”으로, caption은 “테이블제목”으로 음성출력합니다.
th, scope 태그에 대해서 아직 별도의 처리를 하지 않고 있습니다.
<Ctrl+Alt+방향키>를 이용하면 화면상의 테이블 구조대로 이동하며 테이블을 확인할 수 있습니다.

예제소스 음성출력

<table summary="판매중인 메뉴와 가격, 옵션 메뉴“ border="1">
<caption>메뉴판</caption>
<tr>
<th>메뉴</th>
<th>가격</th>
<th>추가메뉴</th>
</tr>
<tr>
<td>돈까스</td>
<td>5500원</td>
<td>밥, 샐러드</td>
</tr>
<tr>
<td>피자</td>
<td>20000원</td>
<td>토핑, 치즈</td>
</tr>
</table>

테이블 시작 3행 3열
테이블 설명:판매중인 메뉴와 가격, 옵션 메뉴
테이블 제목:메뉴판
메뉴
가격
추가메뉴
빈줄
돈까스
5500원
밥, 샐러드
빈줄
피자
20000원
토핑, 치즈
테이블 끝

3. LIST

목록의 처음과 끝에 목록시작, 목록끝을 음성출력합니다.
가상커서 설정에서 on/off 가능합니다. (Ctrl+Shift+F9)
목록의 깊이에 따라 단계1 단계2 와 같이 음성출력합니다.
목록은 위/아래 화살표로 이동합니다.

예제소스 음성출력

<ul>
<li>가</li>
<li>나</li>
   <ul>
   <li>다</li>
   <li>라</li>
      <ul>
      <li>마</li>
      <li>바</li>
      </ul>
   </li>
   </ul>
</ul>

목록시작 개수2


목록시작 개수2 단계1


목록시작 개수2 단계2


목록끝 단계2
목록끝 단계1
목록끝


예제소스 음성출력

<ol>
<li>이나영</li>
<li>문근영</li>
<li>황보</li>
<li>화요비</li>
   <ol>
   <li>패밀리가떴다</li>
   <li>1박2일</li>
   <li>미녀들의수다</li>
   </ol>
</li>
</ol>

목록시작 개수4
1.이나영
2.문근영
3.황보
4.화요비
목록시작 개수3 단계1
1.패밀리가떴다
2.1박2일
3.미녀들의수다
목록끝 단계1
목록끝


예제소스 음성출력

<dl>
<dt>엑스비전</dt>
<dd>테크놀로지</dd>
<dt>센스리더</dt>
<dd>프로페셔널</dd>
</dl>

정의목록시작 개수2
엑스비전
테크놀로지
센스리더
프로페셔널
목록끝

4. INPUT TEXT

<Ctrl+F8>로 이동시 label이나 title 값이 있으면 음성출력합니다.
label과 title이 중첩될 경우 label을 음성출력합니다.
화살표 위/아래 이동 시 label은 음성출력되지만 title은 음성출력되지 않습니다.
로그인 / 메일작성 / 게시물작성 시 사용되는 편집창들에 label이나 title을 사용해주세요.

예제소스 음성출력
<form>
<label for="subject1">제목</label>
<input id="subject1" type="text" />
제목 편집창
<label for="subject2">제목</label>
<input id="subject2" title="적어주세요" type="text" />
제목 편집창

<input title="적어주세요" type="text" />
</form>

적어주세요 편집창

<Ctrl+F8>로 이동시 alt나 title 값이 있을 경우 음성출력합니다.
alt와 title이 중첩될 경우는 title를 음성출력합니다.
readonly의 경우 “읽기전용편집창”으로 음성출력합니다.
type=password는 alt나 title이 없어도 자체 속성값에 의해 “암호편집창”으로 음성출력합니다.

예제소스 음성출력

<input type="text" value="우편번호" title="자동입력" readonly="readonly">

자동입력 우편번호 읽기전용편집창

<input type="password" alt="비밀번호">

비밀번호 암호편집창

<input type="password" title="비밀번호입력">

비밀번호입력 암호편집창

<input type="password" title="비밀번호입력" alt="비밀번호">

비밀번호입력 암호편집창

<input type="password">

암호편집창

5. INPUT IMAGE

input image의 경우 <Ctrl+F2>로 이동시 alt나 title이 있을 경우 음성출력합니다.
alt 와 title이 중첩될 경우 title을 음성출력합니다.
이미지버튼의 경우 alt 값 사용을 권장합니다.

예제소스 음성출력

<input type="image" alt="확인" src="img/confirm.gif“>

확인 이미지버튼

<input type="image" title="확인해" src="img/confirm.gif">

확인해 이미지버튼

<input type="image" alt="확인" title="확인해" src="img/confirm.gif“>

확인해 이미지버튼

6. CHECKBOX / RADIO

<Ctrl+F2>로 이동시 label 이나 title이 있으면 음성출력합니다.
checkbox는 ‘체크상자’로, radio는 ‘라디오버튼’으로 음성출력합니다.
항목의 선택 여부에 따라 해제/선택 으로 음성출력합니다.

예제소스 음성출력
 

<input type="checkbox" id="check_test1"><label for="check_test1">옵션상품</label>

해제 옵션상품 체크상자

 

<input type="radio" id="radio_test1"><label for="radio_test1">직업선택</label>

해제 직업선택 라디오버튼

<Ctrl+F2>로 이동시 label 이나 title이 있으면 음성출력합니다.
label과 title이 중첩될 경우 label을 음성출력합니다.
화살표 위/아래 이동시 label은 음성출력되지만 title은 음성출력되지 않습니다.
선택 여부에 따라 해제/선택 으로 음성출력합니다.

예제소스 음성출력
 

<input type="checkbox" id="check_test2" title="백수인생"><label for="check_test2">직업선택</label>

해제 직업선택 체크상자

 

<input type="checkbox" id="check_test3" title="백수인생">

해제 백수인생 체크상자

7. TEXTAREA

<Ctrl+F2/F8>로 이동시 label이나 title이 있을 경우 음성출력합니다.
label과 title이 중첩될 경우 label 값을 음성출력합니다.
화살표 위/아래 이동시 label은 음성출력되지만 title은 음성출력되지 않습니다.

예제소스 음성출력

<label for="textarea_test1">이용 약관</label>
<textarea id="textarea_test1" rows="2" cols=“10">잘지키세요</textarea>

이용약관 잘지키세요 멀티라인편집창

<textarea id="textarea_test2“ rows="2" cols=“10“ title="내용">잘지키세요</textarea>

내용 잘지키세요 멀티라인편집창

<label for="textarea_test3">이용약관</label>
<textarea id="textarea_test3" rows="2" cols=“10" title="내용">잘지키세요</textarea>

이용약관 잘지키세요 멀티라인편집창

8 SELECTBOX

Ctrl+F2>로 이동할 경우 다음 표와 같이 음성출력합니다.
label이나 title이 있으면 음성출력합니다.
label과 title이 중첩될 경우 label을 음성출력합니다.
화살표 위/아래 이동시 label은 음성출력되지만 title은 음성출력되지 않습니다.
seletectbox는 콤보상자로 음성출력합니다.
selectbox는 <Ctrl+위/아래>로 항목을 선택할 수 있습니다.
<Alt+위/아래>는 항목이 선택되지 않고 읽는 기능만 합니다.

예제소스 음성출력

<select>
<option value="1">선택하세요</option>
<option value="2">네이버</option>
<option value="3">다음</option> </select>

선택하세요 콤보상자
네이버 2/3
다음 3/3

<label for="potal_test1">포탈선택</label>
<select id="potal_test1">
<option value="1">선택하세요</option>
<option value="2">네이버</option>
<option value="3">다음</option> </select>

포탈선택 선택하세요 콤보상자
네이버 2/3
다음 3/3

<select title="포탈사이트">
<option value="1">선택하세요</option>
<option value="2">네이버</option>
<option value="3">다음</option> </select>

포탈사이트 선택하세요 콤보상자
네이버 2/3
다음 3/3

<label for="potal_test2">포탈선택</label>
<select title="포탈사이트" id="potal_test2">
<option value="1">선택하세요</option>
<option value="2">네이버</option>
<option value="3">다음</option>
</select>

포탈선택 선택하세요 콤보상자
네이버 2/3
다음 3/3

9 IMG

화살표 위/아래로 이동시 이미지에 alt나 title이 있으면 음성출력합니다.
alt와 title이 중첩될 경우 title를 음성출력합니다.
alt=“”는 이미지가 없는 것처럼 그냥 지나치지만 title=""은 파일명을 출력합니다.
alt나 title이 없을 경우는 파일명을 음성출력합니다.
이미지의 경우 alt 사용을 권장합니다.

예제소스 음성출력

<img src="img/mcmong.jpg" alt="MC몽">

MC몽 이미지

<img src="img/mcmong.jpg" title=“원숭이몽">

원숭이몽 이미지

<img src="img/mcmong.jpg" title=“원숭이몽“ alt=“MC몽”>

원숭이몽 이미지

<img src="img/mcmong.jpg" alt=““>

(이미지가 없는 듯 지나감)

<img src="img/mcmong.jpg" title=“”> mcmong.jpg 이미지

<img src="img/mcmong.jpg" />

mcmong.jpg 이미지

10. A HREF / IMG

img 태그 안에 alt가 있을 경우 음성출력합니다.
img 태그 안에 alt가 없을 경우 a 태그 안의 title값을 음성출력합니다.
Img 태그의 alt와 a 태그의 title이 중첩될 경우 title를 음성출력합니다.
a 태그 안에 target="_blank"가 있을 경우 ‘새창’으로 음성출력되기 때문에 title에 별도로 새창이라고 입력할 필요는 없습니다. (상황에 따라 달라질수도 있음)
이미지의 경우 alt 사용을 권장합니다.

예제소스 음성출력

<a href="http://www.naver.com" target="_blank"><img src="img/naver.gif" alt="네이버" /></a>

네이버 새창 그래픽링크

<a href="http://www.naver.com" title="접속하기" target="_blank"><img src="img/naver.gif" /></a>

접속하기 새창 그래픽링크

<a href="http://www.naver.com" title="접속하기" target="_blank"><img src="img/naver.gif" alt="네이버" /></a>

접속하기 새창 그래픽링크


11. LONGDESC

img에 longdesc를 넣었을 경우‘설명있음’으로 음성출력하고 <Alt+Enter>를 누르면 해당내용을 확인할 수 있습니다.

예제소스 음성출력

<img src="img/mcmong.jpg" alt="MC몽" longdesc="mcmong.txt" />

MC몽 설명있음 이미지

12. IMAGEMAP

이미지맵에서 area 태그 안에 alt나 title이 있으면 shape 유형에 관계없이 음성출력합니다.
화살표 위/아래로 이동시 음성출력합니다.
이미지의 경우 alt 사용을 권장합니다.

예제소스 음성출력

<img src="img/imagemap.gif" alt="이미지맵예제" border="0" usemap="#Map" />
<map name="Map" id="Map">

<area shape="rect" coords="9,1,207,61" href="http://www.naver.com" target="_blank" alt="네이버" />

<area shape="rect" coords="13,79,153,133" href="http://www.nate.com" target="_blank" title="네이트" />

<area shape="circle" coords="195,107,39" href="http://www.nate.com" target="_blank" alt="인텔" />

<area shape="poly" coords="294,25,320,26,330,14,347,27,393,32,389,62,
336,55,318,68,298,59,238,55,239,29,249,23,264,10" href="www.egloos.com" target="_blank" alt="이글루스" />

<area shape="rect" coords="244,79,393,135" href="http://www.microsoft.com" target="_blank" alt="마이크로소프트" />
</map>

이미지맵예제 이미지

네이버 새창이미지맵링크

네이트 새창이미지맵링크

인텔 새창이미지맵링크

이글루스 새창이미지맵링크

마이크로소프트 새창이미지맵링크

13. IFRAME

iframe에 title이 있을 경우 음성출력합니다.
iframe안에 담긴 페이지의 head 안에 title이 있을 경우 음성출력합니다.

예제소스 음성출력
<iframe src="iframe_form.html" width="350" height="100" frameborder="1" title="로그인하기"></iframe> 로그인하기 프레임시작 1/1

!-- iframe_form.html
<head>
<title>iframe에 삽입할 페이지</title>
</head>


iframe에 삽입할 페이지
(iframe 내용)
프레임끝



전체적으로 종합해 보면
폼컨트롤에는 label이나 title을, 이미지에는 alt를 사용하시는 것이 좋습니다.
위 내용 중 잘못된 부분이 있으면 댓글 남겨주세요.

이 테스트는 아래의 포스팅을 참고해서 진행되었습니다.
http://html.nhndesign.com/accessibility_sensereader_review  - NURI 한혜진 님의 “센스리더 최신버전 리뷰”
http://beone.tistory.com/trackback/349 - BeOne’ World의 “시각장애인의 스크린리더 테스트”


2009/05/14 09:47 2009/05/14 09:47
해빠 이 작성.

« Prev : 1 : ... 14 : 15 : 16 : 17 : 18 : 19 : 20 : Next »