센스리더 프로페셔널 에디션이 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


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

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

    글 잘읽었습니다.
    코드는 보여주지않아서 질문드립니다.
    상단에 th 가 있고 왼쪽에도 th가 있는 다중구조라고 할수있겠는데여~
    가격, 추가메뉴 는 scope 'col' 이고,
    돈까스, 피자, 보쌈 타이틀은 scope 'row' 로 한건가요?!
    왼쪽 대각선에있는 '메뉴' 타이틀은 scope 설정안해줘도 상관없는건지요?!

    그리고 키를 꽤 많이 눌러야 하는군요..
    시각장애인이 키보드 ctrl 키와 alt 키와 방향키까지..
    동시에 세개의 키를 눌러야되는데 일반키보드로 하는건가여?! 키입력이 많아서 힘들지않나 싶습니다.
    아, 궁금한게 점점 많아지네여 -..-

    • haeppa 2009/09/22 18:41  편집/삭제  댓글 주소

      이야 정말 빠른데요~ ^^;;;
      소스를 깜빡하고 안넣었는데도 정확히 보셨네요 wow~
      "메뉴" 항목에도 th나 scope=col을 해주는게 좋죠.
      예제 같은 경우 테이블에 진입하는 처음 셀이기 때문에 th나 scope값을 뽑아 올 곳이 없어서 음성출력할 때 "메뉴"만 단순히 읽어준거구요.
      테이블 내에서 <Ctrl-Alt-방향키>로 이동해서 돈까스, 피자, 보쌈을 읽을 경우에는 "메뉴"를 함께 음성출력합니다.
      메뉴 돈까스, 메뉴 피자, 메뉴 보쌈
      이런식으로요 ㅋ


      ctrl alt 를 누르고 있는 상태에서 방향키를 누르게 되는거죠.
      단축키를 여러개 누르는 경우가 많아서 대부분은 106키로 설정해두고 좌우의 컨트롤과 알트를 모두 활용하고 있습니다.
      ctrl-alt 보다 어려운건 A-3에 있는 Ctrl-Alt-Shift-hoem/end/pgup/pgdn 이죠 ㅋㅋㅋㅋ
      항상 관심 가져주셔서 감사합니다 ^^

    • 치프 2009/09/23 10:29  편집/삭제  댓글 주소

      빠른 답변감사드려여~
      덕분에 또배웠습니다.

      동시입력키가 좀 지나치게 많은거같네요..
      간단히 이용하게끔 개선이 필요치않나 싶군요~

      아무튼 매번 좋은글로만 포스팅해주셔서 감사드립니다.

  4. OpenID Logo 봄눈 2009/09/25 08:29  편집/삭제  댓글 작성  댓글 주소

    좋은 포스팅 감사합니다.
    앞으로도 센스리더 관련된 포스팅 많이 부탁드려도 될까요^^

    • OpenID Logo haeppa 2009/09/26 14:39  편집/삭제  댓글 주소

      안녕하세요~
      허이쿠 저도 방문해주셔서 감사합니다 ^^
      부족한 글이지만 제 블로그를 통해서라도 시각장애인들이 컴퓨터 사용하는 방법이 가감없이 전달되었으면 하는 바람입니다.
      앞으로도 관심 부탁드립니다. ^^

  5. OpenID Logo miiya 2009/11/04 16:51  편집/삭제  댓글 작성  댓글 주소

    안녕하세요?
    혹시 기억하실지 모르겠는데요. 어제 잠깐 세미나에서 테이블 구조 물어 봤었는데..
    포스트 즐겨찾기만 하고 아직 시험은 안했다고 말씀 드렸었거든요. ^^ㅎㅎ

    가상커서로 이동시에는 그냥 단어로 읽어주게 되는 거죠?
    다음버젼에서는 단축키 없이 가상커서 상태(위/아래 방향키 만으로)에서
    실제 논리적 구성으로 제공 되었으면 좋겠어요.

    그래서 레이아웃용 테이블 구조를 쓸 경우 caption, th, scope를 넣지말라는 규정이 있는 거 같아요.

    JAWS에서는 caption, th, scope가 있을 경우에만 데이터 테이블 구조로 읽어주도록 프로그램 되어 있습니다.

    • OpenID Logo haeppa 2009/11/09 11:04  편집/삭제  댓글 주소

      안녕하세요~

      당연히 기억나죠~ 세미나 장에서 아리따운 미인을 만났는데 기억못할리가 있나요~ ^^ㅋ

      말씀하신대로 가상커서에서 위/아래 방향키로만 이동하면 셀안의 내용만 음성출력하게 되어있습니다.

      안그래도 내부적으로 그 부분에 대해서 고민이 많습니다.

      사용이 편리해야하니까요...

      현재의 단축키 사용이 선택된 이유는 제목셀을 자동으로 음성출력할 경우 현재 셀의 내용과 제목셀의 내용을 구분하지 못해 혼동하는 것을 방지하기 위함입니다.

      차후에 이 문제에 대해 개발팀과 논의하게 되면 다시 한번 고민해서 더 좋은 방법을 찾아보도록 하겠습니다. ^^

  6. 정서 2009/11/19 18:59  편집/삭제  댓글 작성  댓글 주소

    잘보구 갑니다. (__)

  7. 정찬명 2010/02/22 23:29  편집/삭제  댓글 작성  댓글 주소

    포스트 잘 보고 있습니다. ^^
    한 가지 궁금한게 있어서 질문을 좀 드리려구요.

    th 요소가 위 예제처럼 단순하지 않고 두 겹 이상으로 되어 있는 경우에 헤더셀을 모두 읽어 주는지 궁금합니다.

    예를 들면 하나의 내용셀을 scope 하고 있는 헤더셀이 다음과 같이
    th scope="col" 이 1행과 2행에 걸쳐 모두 존재하는 경우와
    th scope="row" 가 1열과 2열에 걸쳐 모두 존재하는 경우
    이런 경우가 있다면 내용셀을 읽을 때 관련된 4개의 헤더셀을 모두 읽어주는지의 여부가 궁금합니다.

    바쁘시겠지만 답변을 얻을 수 있을런지요.
    미리 감사드립니다.

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

      안녕하세요~

      방문해주셔서 감사해요~

      저도 좋은 글 잘 보고 있습니다^^

      말씀하신 부분을 확인해보니

      th, scope가 중복해서 2곳에 있을 때

      2개를 모두 음성출력하는 것을 확인했습니다.

      헌데 colspan, rowspan 의 경우는 모두 읽어주긴 하는데

      순서에 약간 차이가 있네요.

      오늘밤에 좀 더 정확하게 확인하려고 합니다.

      확인되는대로 조만간 정리해서 새로 포스팅 올릴게요~

      감사합니다.

  8. sweetier 2011/10/18 16:42  편집/삭제  댓글 작성  댓글 주소

    센스리더는 scope, headers 속성을 함께 사용하면 headers 속성만 적용하는것 같은데요.
    둘 중에 어느 하나만 사용하는 것이 좋은가요? 아니면 둘다 적용하는 것이 좋은가요?

    • 해빠 2011/10/19 19:55  편집/삭제  댓글 주소

      음...
      사용자 입장에서는
      headers가 더 좋습니다.
      th는 움직이는 방향에 따라 함께 읽어주는 제목셀이 달라지지만
      headers는 어느 방향에서 셀로 진입하든지 연결된 제목셀을 모두 함께 읽어주거든요

[로그인][오픈아이디란?]
: 1 : ... 88 : 89 : 90 : 91 : 92 : 93 : 94 : 95 : 96 : ... 117 :