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

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

Trackback URL : http://www.haeppa.kr/trackback/11

Trackback RSS : http://www.haeppa.kr/rss/trackback/11

Trackback ATOM : http://www.haeppa.kr/atom/trackback/11


« Prev : 1 : ... 86 : 87 : 88 : 89 : 90 : 91 : 92 : 93 : 94 : ... 98 : Next »