센스리더 프로페셔널 에디션이 v1.2로 업그레이드 되면서 테이블의 제목셀(th, scope)을 인식하도록 기능이 개선되었습니다.

웹표준이 중요시 되면서 잘 사용하지 않던 제목셀(th, scope)이 보편적으로 사용되고 있습니다. 이제 센스리더에서 이러한 제목셀 읽기 기능을 지원함으로써 시각장애인의 테이블 구조 이해에 큰 도움이 될 것 입니다.

이번 포스트에서는 이전 버전(~pro v1.1.0.6)의 센스리더에서 테이블을 탐색하는 방법에 대해서 설명하고, 새로운 버전에서 추가된 기능에 대해 예를 통해 살펴보겠습니다.

 

A. 이전 버전의 테이블 탐색 방법

예제 테이블 음성출력내용

메뉴판
메뉴 가격 추가메뉴
돈까스 5,000원 밥, 샐러드
피자 20,000원 토핑, 치즈
보쌈 15,000원 고기, 김치

<table summary="TH테스트용 메뉴판" width="300" border="1">
  <caption>메뉴판 </caption>
  <tr>
    <th>메뉴</th>
    <th>가격</th>
    <th>추가메뉴</th>
  </tr>
  <tr>
    <th>돈까스</th>
    <td align="center">5,000원</td>
    <td align="center">밥, 샐러드</td>
  </tr>
  <tr>
    <th>피자</th>
    <td align="center">20,000원</td>
    <td align="center">토핑, 치즈</td>
  </tr>
  <tr>
    <th>보쌈</th>
    <td align="center">15,000원</td>
    <td align="center">고기, 김치</td>
</table>

1. 위/아래 방향키를 이용한 테이블 탐색

테이블 탐색 방향 음성출력내용

테이블 메뉴판 A-1

테이블 시작 4행 3열 1/1
테이블 설명:TH테스트용 메뉴판
테이블 제목:메뉴판
메뉴
가격
추가메뉴
빈줄
돈까스
5,000원
밥, 샐러드
빈줄
피자
20,000원
토핑, 치즈
빈줄
보쌈
15,000원
고기, 김치
테이블 끝

가상커서에서 웹페이지를 탐색할 때 일반적으로 사용하는 위/아래 방향키만을 이용할 경우 테이블의 왼쪽에서 오른쪽으로, 위에서 아래방향으로 테이블의 내용을 읽어주기 때문에 데이터는 읽을 수 있지만 테이블의 구조를 이해하고 내용을 파악하기는 어렵습니다. (“빈줄”은 행과 행 사이 또는 비어있는 셀에서 음성출력합니다.)

2. <Ctrl-Alt-방향키>를 이용한 테이블 탐색

테이블의 구조를 이해하기 위해서는 시각적으로 표현되는 구조대로 테이블을 탐색하는 것이 크게 도움이 됩니다. <Ctrl-Alt-방향키> 조합을 이용해서 아래와 같이 테이블 내용을 탐색할 수 있습니다. 이 방법 역시 테이블 구조 이해에 도움이 되긴 하지만 현재 셀의 제목을 이해하는 것에는 부족함이 있습니다.(위에 사용된 것과 동일한 테이블에서 읽는 방법만 변경한 예입니다.)

테이블 탐색 방향 음성출력내용
th지원안될때컨트롤알트조합으로테이블읽기

테이블 시작 4행 3열 1/1
테이블 설명:TH테스트용 메뉴판
테이블 제목:메뉴판
메뉴
돈까스
5,000원
20,000원
토핑, 치즈
고기, 김치

메뉴 음성출력이 나오되면 <Ctrl-Alt-아래방향키>
돈까스 음성출력이 나오면 <Ctrl-Alt-오른쪽방향키>
5,000원 음성출력이 나오면 <Ctrl-Alt-아래방향키>
20,000원 음성출력이 나오면 <Ctrl-Alt-오른쪽방향키>
토핑, 치즈 음성출력이 나오면 <Ctrl-Alt-아래방향키>
고기, 김치 음성출력이 나오면 끝

3. 단축키를 이용한 제목셀 읽기

제목셀이 지정되지 않은 테이블에서의 데이터 이해를 돕기 위해 열과 행의 처음/끝 셀 읽기(이동) 기능이 있습니다.

현재 행의 처음/끝 셀로 이동 <Ctrl-Alt-Home/End>
현재 열의 처음/끝 셀로 이동 <Ctrl-Alt-PgUp/PgDn>
현재 행의 처음/끝 셀 읽기 <Ctrl-Alt-Shift-Home/End>
현재 열의 처음/끝 셀 읽기 <Ctrl-Alt-Shift-PgUp/PgDn>

셀 이동과 셀 읽기 기능의 차이는 포커스가 이동하느냐 이동하지 않느냐의 차이입니다. 셀 이동 기능은 셀 내용을 읽으면서 포커스가 해당위치로 이동하고, 셀 읽기 기능은 셀 내용만 읽어주고 포커스는 현재 위치를 유지합니다.
(현재 1.2.0.1 버전 버그로 읽기 기능과 이동 기능이 동일하게 이동으로 동작합니다 - 추후 수정 예정)

이 행과 열의 처음/끝 셀 읽기 기능을 이용하면 아래와 같이 음성출력합니다.

테이블 탐색 방향 음성출력내용
테이블 메뉴판 A-3

20,000원
피자
토핑, 치즈
가격
15,000원

Ⓕ 현재 포커스된 지점으로 읽기 기능을 이용할 경우 포커스는 항상 이곳에 위치합니다.
① <Ctrl-Alt-Shift-Home> 을 눌렀을 때 음성출력 하는 부분입니다.
② <Ctrl-Alt-Shift-End> 을 눌렀을 때 음성출력 하는 부분입니다.
③ <Ctrl-Alt-Shift-PgUp> 을 눌렀을 때 음성출력 하는 부분입니다.
④ <Ctrl-Alt-Shift-PgDn> 을 눌렀을 때 음성출력 하는 부분입니다.

<Ctrl-Alt-Shift>조합으로 테이블을 읽을 경우 가상커서의 포커스는 Ⓕ인 20,000원 셀에 고정이 되고 위와 같이 음성출력합니다. 하지만 <Ctrl-Alt>조합으로 테이블을 읽을 경우는 해당 부분으로 직접 포커스가 이동하게 되므로 위와 같이 음성출력되지는 않습니다.

 

B. 최신 버전(pro v1.2.0.1)의 테이블 탐색 방법

최근 발표한 센스리더 프로페셔널 v1.2.0.1에서는 TH, SCOPE 태그가 사용된 테이블에 대한 음성처리를 추가함으로써 테이블 탐색과 데이터 이해가 훨씬 용이해졌습니다.

위/아래 방향키로 테이블을 탐색할 때는 이전과 달라진 점이 없지만 <Ctrl-Alt-방향키>로 테이블을 탐색하는 경우 제목셀을 자동으로 음성출력하도록 변경되었습니다.

제목셀이 지정된 테이블의 경우 행과 열의 제목을 읽기 위해 <Ctrl-Alt-Shift-Home/End/PgUp/PgDn> 단축키를 사용하지 않아도 됩니다.

테이블 탐색 방법에 사용될 소스는 다음과 같습니다.

B-1. 제목셀을 th로 사용한 경우

B-2. 제목셀을 scope로 사용한 경우

<table summary="TH테스트용 메뉴판" width="300" border="1">
  <caption>
    메뉴판
  </caption>
  <tr>
    <th>메뉴</th>
    <th>가격</th>
    <th>추가메뉴</th>
  </tr>
  <tr>
    <th>돈까스</th>
    <td align="center">5,000원</td>
    <td align="center">밥, 샐러드</td>
  </tr>
  <tr>
    <th>피자</th>
    <td align="center">20,000원</td>
    <td align="center">토핑, 치즈</td>
  </tr>
  <tr>
    <th>보쌈</th>
    <td align="center">15,000원</td>
    <td align="center">고기, 김치</td>
</table>

<table summary="scope 테스트용 메뉴판" width="300" border="1">
  <caption>
    메뉴판
  </caption>
  <tr>
    <th scope="col">메뉴</th>
    <th scope="col">가격</th>
    <th scope="col">추가메뉴</th>
  </tr>
  <tr>
    <td scope="row" align=”center”><strong>돈까스</strong></td>
    <td align="center">5,000원</td>
    <td align="center">밥, 샐러드</td>
  </tr>
  <tr>
    <td scope="row" align=”center”><strong>피자</strong></td>
    <td align="center">16,000원</td>
    <td align="center">토핑, 치즈</td>
  </tr>
  <tr>
    <td scope="row" align=”center”><strong>보쌈</strong></td>
    <td align="center">15,000원</td>
    <td align="center">고기, 김치</td>
</table>

 

1. th 태그 사용시 음성출력

테이블 탐색 방향 음성출력내용
th지원될때컨트롤알트조합으로테이블읽기

테이블 시작 4행 3열 1/1
테이블 설명:TH테스트용 메뉴판
테이블 제목:메뉴판
메뉴
- ①
돈까스 - ②
가격 5,000원 - ③
피자 20,000원 - ④
추가메뉴 토핑, 치즈 - ⑤
보쌈 고기, 김치 - ⑥

메뉴 음성출력이 나오되면 <Ctrl-Alt-아래방향키>
돈까스 음성출력이 나오면 <Ctrl-Alt-오른쪽방향키>
가격 5,000원 음성출력이 나오면 <Ctrl-Alt-아래방향키>
가격 20,000원 음성출력이 나오면 <Ctrl-Alt-오른쪽방향키>
추가메뉴 토핑, 치즈 음성출력이 나오면 <Ctrl-Alt-아래방향키>
보쌈 고기, 김치 음성출력이 나오면 끝

<Ctrl-Alt-방향키> 조합으로 테이블을 읽을 때 A-2의 예와는 달리, 현재 셀의 내용과 해당 셀의 제목셀(th)을 함께 음성출력함으로써 데이터 테이블을 이해하는데 큰 도움이 됩니다.

좌/우 방향으로 셀 이동할 경우 상단의 제목셀(th,scope)을 자동으로 음성출력 하고, 위/아래 방향으로 셀 이동할 경우 좌측이나 우측의 제목셀(th, scope)을 자동으로 음성출력하게 됩니다.

2. scope 태그 사용시 음성출력

테이블 탐색 방향 음성출력내용
scope지원될때컨트롤알트조합으로테이블읽기

테이블 시작 4행 3열 1/1
테이블 설명:TH테스트용 메뉴판
테이블 제목:메뉴판
메뉴
돈까스
- ①
가격 5,000원 - ②
추가메뉴 밥, 샐러드 - ③
피자 토핑, 치즈 - ④
보쌈 고기, 김치 - ⑤
가격 15,000원 - ⑥
메뉴 보쌈 - ⑦

아래 방향키를 눌러 메뉴 셀까지 이동한 후 <Ctrl-Alt-아래방향키>

① 돈까스 음성출력이 나오면 <Ctrl-Alt-오른쪽방향키>
가격 5,000원 음성출력이 나오면 <Ctrl-Alt-오른쪽방향키>
추가메뉴 밥, 샐러드 음성출력이 나오면 <Ctrl-Alt-아래방향키>
피자 토핑, 치즈 음성출력이 나오면 <Ctrl-Alt-아래방향키>
보쌈 고기, 김치  음성출력이 나오면 <Ctrl-Alt-왼쪽방향키>
가격 15,000원 음성출력이 나오면 <Ctrl-Alt-왼쪽방향키>
메뉴 보쌈 음성출력이 나오면 긑

<Ctrl-Alt-방향키> 조합으로 테이블을 읽을 때 A-2의 예와는 달리, 현재 셀의 내용과 해당 셀의 제목셀(scope)을 함께 음성출력함으로써 데이터 테이블을 이해하는데 큰 도움이 됩니다.

좌/우 방향으로 셀 이동할 경우 상단의 제목셀(th,scope)을 자동으로 음성출력 하고, 위/아래 방향으로 셀 이동할 경우 좌측이나 우측의 제목셀(th, scope)을 자동으로 음성출력하게 됩니다.

 

수정1) B-1, B-2 에 대한 테이블 소스 추가, 제목셀 음성출력 기준 추가

-------------------------------------------------------------------------------------------------------------------------
위 내용은 센스리더 프로페셔널 에디션 v1.2.0.1을 기준으로 Internet Explorer 8에서 확인된 내용입니다.
위 내용은 2009년 9월 22일 기준으로 작성되었습니다.
위 내용은 2009년 9월 22일 수정되었습니다.

------------------------------------------------------------------------------------------------------------------------

2009/09/22 18:42 2009/09/22 18:42
해빠 이 작성.

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

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

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

  1. 정찬명의 생각

    Tracked from naradesign's me2DAY 2009/09/24 15:25 Löschung

    화면낭독기가 표를 어떻게 읽는지 진지하게 궁금하신 분들께 유익한 포스팅!

  2. 센스리더 테이블 읽기 방법 (th, scope 지원)

    Tracked from WEB STANDARDS 2010/01/18 14:38 Löschung


« Prev : 1 : ... 69 : 70 : 71 : 72 : 73 : 74 : 75 : 76 : 77 : ... 98 : Next »