사용환경
OS : Windows XP / Vista
Browser : Internet Explorer 6, 7, 8


이 프로그램은 센스리더가 웹페이지를 어떻게 인식하는지 시각적으로 확인하기 위한 뷰어입니다.

센스리더는 시각장애인이 원활하게 홈페이지를 탐색할 수 있도록 가상커서라는 모드를 지원합니다.

이 가상커서는 웹페이지를 마치 문서편집기처럼 탐색할 수 있도록 홈페이지를 재구성합니다.

아래 두 이미지는 인터넷익스플로러와 가상커서가 인식하는 홈페이지를 나타내고 있습니다.


  인터넷익스플로러구글    인터넷뷰어구글


가상커서란...

가상커서는 웹페이지에서 하나의 객체를 한 줄에 하나씩 배치하고, 다음 객체는 다음 줄에 배치하므로서 가상커서의 한 줄에는 단 하나의 객체만 존재하도록 합니다. 가상커서에서는 위/아래 방향키로 각 개체를 찾아갈 수 있고 한 객체의 내용을 한 글자씩 확인할 때는 좌/우 방향키를 이용하게 됩니다.

이해를 돕기 위해 위 이미지에 대해 간단히 설명하겠습니다.

1. 문서시작 : 제일위의 “문서시작"은 홈페이지의 시작을 알리는 역할을 합니다. (홈페이지 끝에는 당연히 ‘문서 끝'이 있습니다.)
2. Google : 웹페이지 <head> 안의 <title>값을 나타냅니다.
3. iGoogle 링크 : ‘iGoogle’ 문자열에 ‘링크’ 속성이 주어져있기 때문에 ‘iGoogle’ + ‘링크’가 합쳐져서 “IGoogle 링크"로 음성출력이 됩니다.
4. Google 검색 편집창 : <input> 안에 <title>로 .’Google 검색’이 지정되어 있고, <input type=”text”>는 ‘편집창’으로 음성출력하기 때문에 이 2개가 합쳐져서 “Google 검색 편집창"으로 음성출력 하게 됩니다.
5. Google 검색 버튼 : <input> 안에 <value>로 ‘Google 검색’이 지정되어 있고, <input type=submit>은 ‘버튼'으로 음성출력하기 때문에 이 2개가 합쳐져서 “Google 검색 버튼”으로 음성출력 하게 됩니다.

가상커서 설명은 너무 길기 때문에 이만 접고 다시 뷰어로 돌아가겟습니다.
태그와 음성출력에 대한 보다 자세한 정보는 http://www.haeppa.kr/11 을 참고해주세요



센스리더 인터넷 뷰어란...

일단 이 뷰어는 가상커서가 인식하는 홈페이지를 텍스트만으로 표현하게 됩니다. 가상커서의 실제기능들을 담지 않고 말그대로 뷰어의 역할만 하는 포로그램입니다.

센스리더가 설치되지 않은 환경에서도 객체들에 대한 텍스트정보가 어떻게 전달되는지 확인이 가능합니다. 다만 실제 기능의 동작 여부(링크 이동이나 데이터전송 등)는 반영되지 않으며, 홈페이지 탐색 방법에 따라 음성출력 내용이 달라지는 것과도 무관하게 모든 정보를 표시 합니다.



센스리더 인터넷 뷰어 사용하기

이 뷰어는 아래와 같은 방법으로 사용하실 수 있습니다.

1. 다운받으신 xvsrd_internetviewer.rar 파일을 센스리더 폴더(C:\Program Files\XVision\Sense Reader)에 압축을 풀어주세요. (필요에 의해 임의의 폴더도 사용할 수 있습니다.)
센스리더 프로페셔널 에디션 1.2버전부터는 임의의 경로를 사용할 수 없습니다. 반드시 위 경로만 사용해주세요. 

2. 압축이 풀린 파일 중 viewer.bat 파일을 실행해서 아래와 같은 메시지가 나오는지 확인해주세요. 비스타의 경우 오른쪽 클릭을 해서 관리자 권한으로 실행해주세요..
   (경로명은 상황에 따라 달라질 수 있으며 ‘DllRegisterServer 성공’이라는 메시지만 나타나면 됩니다.)

DllRegisterServer성공

3. 만약 실패라고 나온다면 viewer.bat에 오른쪽 클릭해서 편집으로 들어갑니다.
명령줄의 경로 부분을 현재 xvvcursor.dll파일이 존재하는 경로로 바꾼 후 파일을 저장하고 viewer.bat를 다시 실행해서 위 메시지를 확인해주세요

4. 이제 InternetViewer.exe를 실행하고 익스플로러를 실행해서 확인하고 싶은 페이지로 이동한 후
Ctrl + Alt + Shift + F5를 누르면 뷰어창으로 텍스트가 출력 되는 것을 확인할 수 있습니다.
바로 그 텍스트가 센스리더가 인식하는 웹페이지입니다.
(단축키를 누를 때, 반드시 커서가 인터넷익스플로러 안에 있어야 합니다.)

참고 ) 만약 압축을 풀었던 파일의 경로를 옮기게 되면 VIEWER.BAT로 등록하는 위 과정을 다시 해야 정상적으로 사용 가능합니다. 이 툴은 단순히 텍스트만 추출해줄 뿐 링크나 기타 폼 기능 등에 대한 동작은 지원하지 않습니다.


수정 1)
센스리더 프로페셔널 에디션 v1.2 부터는 xvvcursor.dll을 임의의 경로에서 사용할 수 없습니다. 반드시 c:\program files\xvision\sense reader 에 있는 xvvcurosr.dll을 사용해주세요. - 2009/09/22


위 내용은 2009년 7월 2일 수정되었습니다.
위 내용은 2009년 9월 22일 재수정되었습니다.

2009/06/18 19:17 2009/06/18 19:17
해빠 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://www.haeppa.kr/rss/comment/17
  2. Comment ATOM : http://www.haeppa.kr/atom/comment/17
  3. themaum 2009/09/04 16:27  편집/삭제  댓글 작성  댓글 주소

    인터넷뷰어 찾다보니 이곳으로 오는군요. ^ ^
    반갑습니다. ㅎ

    • haeppa 2009/09/04 18:02  편집/삭제  댓글 주소

      어디서 많이 보던 아이디다 했는데
      여기까지 오셨네요 ㅋ
      저도 반갑습니다~ ^^

  4. 치프 2010/02/10 10:45  편집/삭제  댓글 작성  댓글 주소

    이 블로그 나름 자주 왔었는데 왜 이 글을 놓쳤을가여 ㅠ
    이게 지금나온 센스리더랑 유사한건가여?! 다시말해 음성으로만 들려주지않을 뿐 거의 비슷하게
    텍스트로 찍혀서 읽을수 있는 건가여?! 센스리더가 없기때문에 감으로만 작업했었는데 작업이 끝나고
    이걸 돌려보는게 효과가 클거같아서 질문드립니당.

    • 해빠 2010/02/10 17:30  편집/삭제  댓글 주소

      치프님 안녕하세요 ^^
      네~ 요거가 센스리더 없는 분들 사용하라고 만들어진거에요~
      센스리더 가상커서 상에 들어가는 내용들을 텍스트 형태로 뽑아주는건데요.
      옵션값에 따라서 약간 달라지는 부분들이 있고,
      숫자들 같은경우는 뒤에 음성이 추가되는 항목들도 있지만
      기본적으로 나타나는 정보들은 유사합니다.
      센스리더가 없을 때 단순 참고용으로 쓰기에는 나름 편한 프로그램입니다.
      참고로 폼 등의 컨트롤 객체가 동작을 정상적으로 하는지는 알 수 없다는 것 참고하세요 ^^

  5. HYLA 2010/02/11 11:32  편집/삭제  댓글 작성  댓글 주소

    센스리더를 실행안하고도 간단하게 확인할수있겠네요.
    좋은 정보 감사합니다 ^^

    • haeppa 2010/02/24 17:25  편집/삭제  댓글 주소

      방문해 주셔서 감사합니다.

      접근성이 좋은 멋진 홈페이지 부탁드립니다.

  6. CrossXP 2010/08/16 23:38  편집/삭제  댓글 작성  댓글 주소

    안녕하세요~
    웹 접근성 코딩을 위해서 센스리더나 드림보이스를 찾다보니 들리게 되었습니다만,
    이런 유용한 프로그램 올려놓으신거 보고 감탄하고 갑니다~

    그런데, 센스리더 인터넷뷰어는 프리웨어인가요?

[로그인][오픈아이디란?]

센스리더 가상커서의 여러 단축키 중 텍스트 부분만 이동하는 CTRL+F4 단축키가 있습니다.

이 단축키는 헤딩을 제외한 일반 텍스트 사이만을 이동합니다. (2글자 이상으로 구성된 텍스트만 해당됩니다.)

목록 태그의 경우 v1.1.0.6 에서는 dl 태그 안의 텍스트만 Ctrl+F4로 이동이 가능합니다.
(ul, ol 안의 텍스트는 인식하지 않고 없는 듯이 그냥 지나갑니다.)

현재 내부 테스트중인 v1.1.0.7에서는 ul과 ol 태그에 있는 텍스트도 인식을 해서 확인할 수 있도록 수정되었습니다.

그리고 단축키 중 목록 사이만을 이동하는 키가 있습니다.

Ctrl + I (이전목록), Ctrl+K (다음목록)

이 단축키는 목록의 구분(ul,ol,dl)을 기준으로 이동합니다.

목록 이동 후에는 아래 방향키를 눌러 해당목록을 확인할 수 있습니다.

2009/06/08 18:04 2009/06/08 18:04
해빠 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://www.haeppa.kr/rss/comment/16
  2. Comment ATOM : http://www.haeppa.kr/atom/comment/16
  3. mihee 2009/09/16 15:01  편집/삭제  댓글 작성  댓글 주소

    메뉴 등 복잡한 구조 리스트 이용에 좀 더 편해지겠네요 :)

    • haeppa 2009/09/22 15:14  편집/삭제  댓글 주소

      그럼요 필요한 항목으로 건너뛰는 기능을 잘 활용하면 시각장애인의 웹서핑에 큰 도움이 됩니다.
      다만.. 요즘은 웹페이지들에 목록태그가 무분별하게 쓰이는 것 같아서 조금 아쉽네요...

[로그인][오픈아이디란?]

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
해빠 이 작성.

당신의 의견을 작성해 주세요.

[로그인][오픈아이디란?]

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

테스트환경
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
해빠 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://www.haeppa.kr/rss/comment/11
  2. Comment ATOM : http://www.haeppa.kr/atom/comment/11
  3. 유낙동 2011/11/21 19:59  편집/삭제  댓글 작성  댓글 주소

    title과 alt가 중첩될때 title이 음성출력된다고 하신것과(alt를 우선시 읽어주네요)
    위아래 방향키 이동시 label은 읽어주고 title은 읽지 않는다는 부분은 수정해야 할 것 같습니다~
    (둘다 읽어주지 않네요)

    • 해빠 2011/11/22 00:54  편집/삭제  댓글 주소

      좋은 지적 감사합니다.

      안그래도 잘못된 부분이 있어서 수정하려고 했는데 차일 피일 미루게 되네요
      일단 이미지에서 alt값을 먼저 읽어주는 부분이 맞습니다.
      title은 별도의 단축키를 활용해서 정보를 확인할 수 있습니다.

      폼 컨트롤에 포커스가 진입하는 방식에 따라 음성출력 방식이 달라집니다.
      위/아래 방향키로 읽을 경우 폽의 이전/다음에 위치한 label 정보를 거치기 때문에 label 을 함께 음성출력하지 않습니다.
      다만 탭키나 기타 단축키로 폼에 진입하는 경우 폼의 이전/다음에 있는 label 정보를 건너뛰어서 용도를 알 수 업기 때문에 label+폼의 형태로 음성출력하게 됩니다.
      이런 동작은 폼에서의 title 정보도 동일합니다.

[로그인][오픈아이디란?]

스크린리더에 대해서 모르는 사람들이 많아 간략하게 정리해보았습니다.
아래 내용 중 사실과 다르거나 수정이 필요한 부분이 있으면 댓글 남겨주세요.


1. 스크린리더(Screen Reader)란?

스크린리더 (Screen reader)는 시각장애인이 컴퓨터를 사용할 때 화면에 나타나는 정보들을 음성으로 출력해주는 화면낭독 프로그램입니다. 운영체제와 응용프로그램 등의 메뉴를 키보드로 이동할 때 해당내용을 음성으로 출력해주거나 옵션 대화상자에서 이동하는 항목에 대한 정보를 음성으로 출력해 줌으로서 화면을 읽을 수 없는 시각장애인도 컴퓨터를 사용할 수 있도록 도움을 주는 보조기구입니다. 화면의 변화를 자동으로 낭독해주는 기능 뿐 아니라 내가 원하는 곳을 다시 읽거나 별도의 정보를 호출해 음성으로 들을 수도 있습니다.

마우스 없이 키보드의 단축키만으로 모든 기능을 제어하기 때문에 처음에 사용법을 배우는 것이 조금 어렵습니다. 하지만 사용방법을 익히고 나면 숙련도에 따라 많은 응용프로그램들을 활용할 수 있게 됩니다. 현재 국내의 스크린리더들은 키보드의 캐럿이나 포커스의 움직임을 제어할 뿐 아니라 마우스 움직임도 제어할 수 있는 기능까지 지원하고 있습니다.

인터넷이 활성화된 요즘에는 시각장에인들도 웹에 대한 욕구가 늘어나고 있습니다. 그래서 몇 년 전부터 스크린리더도 웹페이지에 대한 정보들을 음성으로 출력해주는 기능을 지원하고 있습니다. 웹접근성을 염두에 두고 제작된 웹페이지라면 숙련도에 따라 일반인과 거의 동등한 수준의 웹서핑을 즐길 수도 있습니다.


2. 국내 스크린리더의 역사

국내에 스크린리더가 나타난 것은 과거 DOS 시절부터입니다. 이때는 여러 종류의 스크린리더들이 사용됐었지만 지금 기억에 남는 것은 하나 밖에 없네요. 1990년대에 ‘가라사대’라는 ISA카드를 이용한 플랫폼이 있었는데, 이것은 하드웨어TTS와 이를 제어하는 소프트웨어가 결합된 형태의 스크린리더였습니다. 원래 이 ISA카드는 로봇의 음성출력을 위해 제작된 것이었는데, 한 시각장애인 프로그래머가 이를 도입해서 스크린리더로 개발한 것입니다. 가라사대는 DOS 부터 Windows까지 매우 광범위하게 오랜 기간(대략 2000년대 초반까지) 시각장애인들에게 널리 사용되었습니다.

Windows 95가 등장하면서 시각장애인들의 컴퓨터 사용에 일대 암흑기가 도래했었습니다. 운영체제가 달라지면서 DOS기반의 ‘가라사대’를 더 이상 사용할 수가 없게 된 것이죠. Windows 95는 사용해보지도 못하고 Windws 98이 나올 즈음까지 시각장애인들은 주로 DOS기반의 구형 컴퓨터를 사용해야 했습니다. 그 뒤 소리눈98, 소리눈2000, 아이즈2000, 드림보이스 등이 등장하면서 시각장애인들도 Windows 기반의 컴퓨터를 사용할 수 있게 되었습니다. 초기 Windows 기반의 스크린리더는 버그가 많았고 GUI에 대해 많은 부분이 지원되지 않아 정상적으로 사용하기는 힘들었습니다. 안정적으로 수월하게 Windows를 사용하기 시작한 것은 대략 2000년 경이었습니다.

2001년 Windows XP의 등장으로 스크린리더도 다시 한 단계 업그레이드 되었습니다. 기존 스크린리더들이 Windows XP를 지원하기는 했지만 겨우 사용할 수 있는 수준이었습니다. 그로 인해 새로운 스크린리더가 개발되기까지 상당기간 Windows 98을 사용했습니다.  2003년경 이브포윈도우즈, 센스리더, 드림보이스가 새롭게 개발되면서 시각장애인들도 Windows XP를 원활하게 사용하기 시작했습니다.

2007년 Windows Vista가 등장했던 당시에도 이를 지원하는 스크린리더는 존재하지 않았습니다. 국내에서는 최초로 2008년에 ‘센스리더 프로페셔널 에디션’이 출시되면서 시각장애인도 Windows Vista를 사용할 수 있게 되었습니다.


3. 스크린리더와 TTS

스크린리더가 Windows 기반으로 넘어오면서 많은 점이 바뀌었는데요. 그 중 가장 크게 눈에 띄는 것은 하드웨어방식의 TTS대신 소프트웨어 방식의 TTS를 사용하기 시작한 점에 있습니다. (TTS란 Text To Speech의 약자로 문자를 음성으로 변환해주는 솔루션을 말합니다.) Windows 98까지만 해도 윈도우즈 기반의 스크린리더에 소프트웨어 방식의 TTS와 하드웨어방식의 ‘가라사대’가 함께 이용되기도 됐지만 Windows XP로 넘어오면서 모든 스크린리더에서 소프트웨어 방식의 TTS만을 사용하고 있습니다.

TTS에도 2가지 방식이 있습니다. 일반 애플리케이션 형태의 음성합성 엔진과, MS Windows의 SAPI(Speech Application Programming Interface) 기반 TTS엔진이 있습니다. 현재 국내에 출시된 스크린리더는 일반 애플리케이션 형태의 VoiceText 엔진을 사용하고 있습니다. 외국에서는 SAPI 기반의 다양한 음성 합성엔진들이 개발되어 다양한 스크린리더에 사용되고 있습니다. 영어의 경우 사람이 말하는 것과 유사한 형태까지 기술발전이 이루어졌지만, 국내에서는 아직 여기에까지는 미치지 못하고 있습니다.


4. 현재 사용 가능한 스크린리더의 종류

1) 국내
예전에 많은 스크린리더가 있었는데 현재는 아래 2가지 버전만 릴리즈 되고 있습니다.
아래의 2가지 스크린리더 모두 시각장애인에 의해서 개발되고 있습니다. 
▷ 센스리더 프로페셔널 에디션 (Sense Reader Professional Edition) – v1.1.0.6
 
: (주)엑스비전테크놀로지(www.xvtech.com)에서 개발해서 판매하는 스크린리더, 버전에 따라 30~60만원 대에 판매되고 있습니다. 강력한 기능으로 가장 널리 사용되고 있는 스크린리더이며 현재까지도 기능개선이 진행되고 있습니다.
▷ 드림보이스 (Dream Voice) – v6.21
 
: 실로암시각장애인복지관(www.silwel.or.kr)에서 개발해서 보급하는 스크린리더, 국비지원으로 시각장애인의 신청을 받아 무료로 보급하고 있습니다.

2) 국외
Jaws for Windows : www.freedomscientific.com, 895~1,095 USD
Window-Eyes : www.gwmicro.com/Window-Eyes, 299~895 USD
Thunder
: www.screenreader.net, FREE for indivisual
Orca : http://live.gnome.org/Orca/AccessibleApps, OpenSolaris/Fedora/Ubuntu 지원(내장)


위 내용은 2009년 5월 5일 기준으로 작성되었습니다.

2009/05/09 23:06 2009/05/09 23:06
해빠 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://www.haeppa.kr/rss/comment/4
  2. Comment ATOM : http://www.haeppa.kr/atom/comment/4
  3. joogunking 2011/07/06 22:15  편집/삭제  댓글 작성  댓글 주소

    좋은 글 감사합니다. 스크린 리더는 웹서비스하는 곳에서 무료로 지원했으면 좋을 것 같습니다.
    현재 국방일보 http://kookbang.dema.mil.kr/ 에서 적용중인 Voicemon DS가 좋은 솔루션같더군요.
    http://www.voicemon.com/main.odc

    • 해빠 2011/07/11 23:18  편집/삭제  댓글 주소

      반갑습니다.
      얼핏 보면 웹기반 TTS 서비스가 좋아보일 수 있지만...
      시각장애인을 기준으로 봤을 때 서버기반 TTS는 오히려 불편합니다.
      어차피 시각장애인은 데스크탑에서 사용하는 스크린리더가 있으니
      웹에서 서비스하는 TTS음성이 나오게되면 중복으로 음성이 출력되서 매우 불편합니다.
      또한 웹기반 TTS는 기존 스크린리더와 사용방식이 다르기 때문에 사용법을 새로 배워야하는 문제점도 있구요.
      시각장애인을 기준으로 봤을 때는 웹상에서 굳이 다른 TTS 서비스가 필요하지 않죠.
      사용자 입장에서 한번만 더 생각해보시면 어떤 방법이 좋은지 금방 이해하실 수 있을 것 같습니다.
      감사합니다.

[로그인][오픈아이디란?]

센스리더 프로페셔널 에디션 버그 리포트 – 인터넷 익스플로러 8

테스트 환경
Windows XP SP3
Internet Explorer 8
Sense Reader Professional Edition v1.1.0.6 & v1.1.0.7(비공개테스트버전)


1. 인터넷 옵션을 열었을 때 센스리더의 포커스가 바로 이동하지 않는다.

주로 고사양의 컴퓨터에서 IE7과 IE8을 사용할 경우 이런 현상이 발생합니다. ‘Smartscreen’ 대화상자나 ‘다른이름으로 대상저장’ 대화상자에서도 같은 현상이 발생합니다.

v1.1.0.7 이후 문제 해결


2. 가상커서의 문자열 찾기 기능<Ctrl+F>을 사용했을 때 찾아진 위치를 바로 읽어주지 않는다.

v1.1.0.7 이후 문제 해결


3. 탭 브라우징 관련 단축키가 전혀 작동하지 않는다. <Ctrl+TAB / T / W / Q / 1~9>

센스리더로 탭 브라우징을 사용함에 있어 기존 기능키와의 중복 문제가 발생하고 있습니다. <Ctrl+N>을 눌러 한번씩 센스리더의 단축키를 skip할 수는 있지만 매우 불편합니다. 인터넷 익스플로러의 탭 브라우징을 사용하기 위해 기능키 환경에 대한 새로운 논의가 필요해 보입니다.


4. 탭 전환시에 탭의 제목을 읽어주지 않는다.

<Ctrl+N>을 눌러 센스리더 기능키를 skip한 후 <Ctrl+TAB>으로 탭을 전환할 때 탭의 제목을 읽어주지 못하는 현상이 있습니다. 그래서 대안으로 빠른탭 <Ctrl+Q> 기능을 이용하면 탭의 제목을 확인할 수 있습니다. 앞으로 수정되어야 하는 내용입니다.


5. 익스플로러 8의 시스템 메뉴를 읽어주지 않는다.

<Alt+Spacebar>로 인터넷 익스플로러의 시스템 트레이 메뉴를 호출해서 창의 크기를 최소화/최대화로 변경할 수 있는데 현재 이 부분에서 음성지원이 전혀 이루어지지 않고 있습니다. 이부분 역시 앞으로 수정되어야 하는 내용입니다.

2009/05/06 23:26 2009/05/06 23:26
해빠 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://www.haeppa.kr/rss/comment/10
  2. Comment ATOM : http://www.haeppa.kr/atom/comment/10
  3. 비밀방문자 2009/05/07 09:55  편집/삭제  댓글 작성  댓글 주소

    관리자만 볼 수 있는 댓글입니다.

[로그인][오픈아이디란?]

Internet Explorer 8에 새롭게 추가된 기능 테스트

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


1. 커서 브라우징 (Caret Browsing) <F7>

키보드를 이용해 웹페이지를 마치 편집모드인 것처럼 이동하며 읽을 수 있는 기능. 가상커서 모드를 중지해야 사용 가능함. 웹페이지 구조가 복잡하고 이미지가 많은 곳에서는 효용성이 낮고 뉴스나 블로그 등의 텍스트 위주로 구성된 게시글을 읽을 때 유용할 것으로 보임.

기본값 설정 방법 : 인터넷 옵션 > 고급 > 내게 필요한 옵션 > "새창과 탭에서 커서브라우징 사용"에 체크

** "바로 연결" 기능과 연계해서 사용하면 유용할 듯함


2. 호환성 모드

IE8에서 정상적으로 표현하지 못하는 사이트를 IE7에서 사용하는 것처럼 표현하는 모드를 말함. 버튼목록 기능으로 호환성모드 사용이 가능하지만 현재 호환성모드인지 아닌지 구별할 방법이 없음.

  



3. 웹조각 (WebSlices)

3-1 웹조각 추가하기

3-1-A. 즐겨찾기 모음의 <다른 추가기능 가져오기>를 이용해 추가기능 갤러리 사이트(http://www.ieaddons.com/kr)로 이동한 후 <Internet Explorer에 추가> 버튼을 이용해 웹조각을 즐겨찾기 모음에 추가할 수 있음

3-1-B. 웹조각이 지원되는 웹페이지의 특정 범위 안에 마우스 커서를 올리면 좌상단에 웹조각을 추가할 수 있는 아이콘이 나타남. 해당 아이콘을 클릭해야 즐겨찾기 모음에 추가할 수 있음, 스크린리더로는 이 방법을 사용할 수 없음.

 

3-1-C. 웹조각이 있는 페이지에서 <Alt+J>를 누르면 현재 페이지에서 사용가능한 웹조각 목록을 확인할 수 있음. 가장 추천하는 방법.


3-2 웹조각 사용하기
<Alt++>로 버튼 목록을 불러내서 끝에서 위로 이동해서 원하는 웹조각에서 엔터키를 입력하고 뷰커서로 읽을 수 있음.

  


4. 바로 연결 (Accelerator)

마우스로 텍스트 영역을 블록 지정했을 경우 아이콘이 나타나며 아이콘을 클릭해 하위메뉴들 중 원하는 곳에서 바로 검색/블로깅 등을 가능하게 해줌. 네이버의 경우 <블로그에 담기> 기능, 구글의 경우는 <구글 맵에서 검색> 기능까지 제공하고 있음.

스크린 리더로 사용하기
1) <Ctrl+Shift+F12>로 가성커서 해제 -> 2) <F7>로 커서 브라우징 모드 사용 -> 3) 원하는 문장이나 단어를 찾아 텍스트에 블록 지정 -> 4) 팝업메뉴 호출 -> 5) 바로연결 메뉴 중 원하는 기능 선택

** 현재로서는 사용 과정이 복잡해서 바로 연결 기능을 사용하는 것에 대한 이득이 전혀 없음. 가상커서의 블록설정과 실제 익스플로러의 블록 지정이 함께 이루어지는 호환모드의 필요성이 느껴짐.


5. 검색어 자동완성 (즐겨찾기/방문기록/검색엔진제공)

1) 주소표시줄에 주소를 입력할 경우 검색포털사이트처럼 주소를 자동으로 완성해주는 기능을 제공. 주소 입력 도중 화살표 아래로 내려서 확인이 가능. 자동완성 순서는 방문한 기록-검색엔진 순으로 나타남.

** 아래방향키를 이용해 아래로 내려가면서 확인하는 경우에는 자동완성 결과에 대한 종류 구분(즐겨찾기/방문기록/검색결과)이 전혀 안됨. 목록을 읽을 때 페이지 타이틀(빨간표시)은 읽지 못하고 웹페이지 주소만 읽어주는 현상이 발생함. 뷰커서로 읽을 경우에만 페이지 타이틀과 주소를 모두 읽어줌.

2) 익스플로러 우상단의 검색창에 검색어를 입력할 경우 해당 검색엔진에서 제공하는 자동완성 기능을 바로 사용할 수 있음. 화살표를 아래로 내려서 완성된 목록을 확인할 수 있음. 하지만 네이버의 경우는 완성된 검색에의 첫 글자만 읽어주는 문제가 있음.



6. InPrivate 브라우징 <Ctrl+Shift+P>

쿠키, 임시파일 검색 기록 등을 창닫음과 동시에 삭제되는 보안모드를 말함.

단축키<Ctrl+Shift+P>를 사용해 InPrivate모드로 이동할 수 있지만 센스리더는 <Ctrl+N>을 눌러 단축키를 skip하도록 한 후 사용해야 함.


InPrivate 모드가 사용중일 때는 타이틀바 제일 뒤에 InPrivate가 표시되므로 <Ctrl+Shift+T>를 눌러서 사용여부를 확인할 수 있다. 또한 주소표시줄 앞에 InPrivate가 표시되므로 <Alt++>로 버튼목록을 불러와서 확인할 수 있다. (뷰커서로 주쇼표시줄 부분을 읽어도 확인가능)


 

** MS에 기능제안 : InPrivate 모드 사용시 타이블바 제일 뒤에 표시가 되는데 센스리더로 타이틀 바를 읽어보면 [페이지타이틀]+[Windows Internet Explorer]+[InPrivate]로 읽어준다. 네이버를 예로 들면 [네이버 세상의 모든 지식 네이버 윈도우즈 인터넷 익스플로러 인프리베이트]로 출력돼서 앞의 내용을 다 들어야 모드 사용여부를 확인할 수 있습니다. 위의 이미지에서 좌측은 일반 익스플로러 우측은 InPrivate 모드 사용중인데 작업표시줄에서는 확인할 수 있는 방법이 전혀 없습니다.  InPrivate표시를 제일 앞쪽으로 옮겨주면 센스리더도 좋고 일반 사용자들에게도 훨씬 편리할 것 같습니다.


7. InPrivate 필터링 <Ctrl+Shift+F>

이전 버전에 있던 피싱필터 기능에 방문한 웹사이트가 다른 웹사이트와의 정보 교류를 제한할 수 있는 기능을 추가해서 만들어진 보안기능. <Ctrl+N>으로 센스리더 기능키를 skip한 후 사용할 수 있음. 사용여부는 도구메뉴(Alt+T)나 안전(Alt+S)메뉴 내의 'InPrivate 필터링' 항목의 선택 여부로 확인할 수 있음.


위 내용은 2009년 4월 10일부터 19일간 테스트한 내용이며 2009년 5월 5일 기준으로 작성되었습니다.

2009/05/05 13:06 2009/05/05 13:06
해빠 이 작성.

당신의 의견을 작성해 주세요.

  1. Comment RSS : http://www.haeppa.kr/rss/comment/3
  2. Comment ATOM : http://www.haeppa.kr/atom/comment/3
  3. montreal florist 2010/12/27 07:49  편집/삭제  댓글 작성  댓글 주소

    새로운 좋은 기능들이 추가됬군여

[로그인][오픈아이디란?]
: 1 : 2 : 3 : 4 : Next »