« Prev : 1 : 2 : 3 : 4 :
  • 음성출력뷰어 활성화
  • 음성출력뷰어 항상 열리게
website : www.nvaccess.org
2019/12/22 17:08 2019/12/22 17:08
해빠 이 작성.

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

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

  • 보이스오버 자막패널 설정
  • 마지막 음성출력내용 복사
2019/11/10 17:09 2019/11/10 17:09
해빠 이 작성.

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

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

Windows PC에서 사용하는 센스리더의 소리를 시각화하는 방법입니다.

  • 출력내용보기 설정
  • 또 다른 방법! 출력내용(F12)
  • 음성출력텍스트가 표시되지 않을 때
2019/10/09 17:10 2019/10/09 17:10
해빠 이 작성.

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

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

  • 톡백 설치
  • 톡백 버전
  • 톡백 빠르게 실행하기
2019/09/11 17:11 2019/09/11 17:11
해빠 이 작성.

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

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

2019/08/06 17:12 2019/08/06 17:12
해빠 이 작성.

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

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

안드로이드에서 기본으로 제공하는 스크린리더 Talkback (톡백) 기본 사용방법입니다.

  • 실행하기
  • 볼륨키단축키
  • 기본 탐색방법
  • 앱 목록 접근하기
  • 앱 전환기 사용하기
  • 알림영역 접근하기
  • 음성출력 표시설정
2019/07/04 17:13 2019/07/04 17:13
해빠 이 작성.

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

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

iOS에서 기본으로 제공하는 Voiceover (보이스오버)의 기본 사용방법에 대한 영상입니다.

2019/04/01 17:15 2019/04/01 17:15
해빠 이 작성.

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

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

화면낭독기와 링크의 title 속성값

기존에는 센스리더를 포함한 PC 화면낭독기 대부분이 title 정보를 음성출력할 수 없는 상태에 있었습니다.
링크의 title 정보를 읽기 위해서는 (title 정보가 있는지 없는지 모른채) 기능키를 누르거나 설정을 바꿔서 링크텍스트와 title 중 하나를 선택해서 들어야 했습니다.
이런 이유로 대부분의 화면낭독기 사용자가 title 정보를 활용하지 않는 실정이었습니다.
덕분에 title 속성에 잘못된 정보, 중복된 정보들이 부적절하게 들어가 있더라도 사용자들에게 특별히 문제가 되지 않았습니다.

 

센스리더의 업데이트 4.0.0.0

최근(2014.07.07) 센스리더가 4.0.0.0으로 업데이트 되면서 링크의 title 속성값을 링크텍스트와 함께 음성출력하도록 기능이 변경되었습니다.

링크텍스트의 title 음성출력 형태

[링크텍스트] + [TITLE] + 링크
   ex) <a href="daum.net" title="애국가">mp3구매</a>
       : mp3구매 앵콜요청금지 링크

이제 센스리더가 title정보를 링크텍스트와 함께 조합해서 음성출력하기 때문에 사용자는 원하든 원치 않든 링크텍스트와 title 정보를 함께 들어야만 합니다.
예전에 title 정보가 어떤 형태로 제공되든 사용자에게 긍정적 혹은 부정적인 어떤 효과를 미치지 않았다고 한다면, 이제 앞으로는 제공된 title 정보가 사용자에게 그대로 전달되기 때문에 각별히 신경써서 제공해야 합니다.

iOS의 보이스오버는 이미 title 정보를 음성출력하고 있었고, 이제 PC의 센스리더가 지원을 시작하게 되어 title 정보의 중요성이 더 높아졌다고할 수 있습니다.

title 단독으로서의 의미도 중요하지만 앞으로는 링크텍스트와의 조화까지도 신경쓰면 더 높은 사용성을 기대할 수도 있게 되었습니다.

 

"보다 나은 도구를 선택한 사용자에게 보다 나은 사용자 경험을~"

 

titie 음성출력 테스트

# sample

<a href="0" title="집으로"></a>
<a href="1" title="mp3구매">mp3구매</a>
<a href="2" title="앵콜요청금지">뮤직비디오</a>
<a href="3" title="새창열기" target="_blank">네이버로</a>
<a href="4" target="_blank" >네이트로</a>

 

PC 테스트 결과

  Internet Explorer 8 비고
센스리더 4.0.0.0

집으로 링크
mp3구매 링크
뮤직비디오 앵콜요청금지 링크
네이버로 새창열기 새창 링크
네이트로 새창 링크

  • 집으로 : 링크텍스트가 없더라도 화면낭독기는 링크 요소를 인식하고 음성출력함
  • mp3구매 : 링크텍스트와 title 값이 동일한 경우 생략
  • 뮤직비디오 : 링크텍스트 뒤에 title값을 이어서 음성출력
  • 네이버로 : target 정보와 title 값을 모두 음성출력
  • 네이트로 : target를 이용한 새창알림
NVDA master-10205

집으로 링크
mp3구매 링크
뮤직비디오 링크
네이버로 링크
네이트로 링크

  • title 정보를 음성출력하지 않음
  • target 정보를 음성출력하지 않음

 

Mobile 테스트 결과

  Stock Browser 비고
iOS 7.1.2

집으로 링크
mp3구매 mp3구매 링크 ... mp3구매
뮤직비디오 앵콜요청금지 링크 ... 앵콜요청금지
네이버로 새창열기 링크 ... 새창열기
네이트로 링크

  • 링크텍스트가 없어도 링크를 인식하고 음성출력
  • title 정보가 링크텍스트와 동일해도 생략되지 않음
  • title 정보를 링크텍스트 뒤에 이어서 음성출력
    • "힌트말하기"가 켜져 있는 경우 예와 같이 title을 한 번 더 음성출력
  • target 정보는 음성출력하지 않음
Android 4.4.2

집으로
mp3구매
뮤직비디오
네이버로
네이트로

  • 요소 및 title 정보 등을 제외하고 단순히 링크텍스트만 음성출력

 

정리해보면…

중복된 title은 부가정보로

단순히 title 속성값을 그대로 음성출력하는 것이 아니라 링크텍스트와 title 속성값이 완전히 동일한 경우 아래 "mp3구매 링크"의 사례와 같이 title 정보를 음성출력하지 않습니다.

화면낭독기에서 중복정보를 생략하고 있지만 링크텍스트와 동일한 title은 중복정보제공으로 사용자에게 또 다른 불편을 줄 수 있습니다.

iOS의 보이스오버는 링크텍스트와 title 정보가 동일하더라도 생략하지 않습니다.
PC와 Mobile 모두를 고려해도 title 속성값은 링크텍스트와 동일하지 않게 부가정보 형태로 제공하는 것이 바람직합니다.

 

새창알림과 title

PC에서는 아래 "네이버로 링크", "네이트로 링크"와 같이 target="_blank"로 새창을 알리는 경우, 추가로 title로 새창 정보를 제공하게 되면 사용자는 중복으로 2개의 정보를 듣게 되므로, 앞으로는 target 속성을 사용한 경우 새창 정보를 title로 제공하지 않는 것이 바람직합니다.

Mobile에서는 아래 사례에서 보듯이 target에 대한 음성출력을 지원하지 않으므로 새창을 비롯한 부가정보를 전달해야할 경우 title을 속성을 사용해야 합니다.

 

공백링크의 정리필요

간혹 링크텍스트가 없는 공백링크가 페이지 일부영역에 남아있는 경우가 있는데, 이 링크가 화면에 표시되지 않더라도 아래 "집으로 링크"의 사례와 같이 PC/Mobile 화면낭독기 모두 링크요소를 인지하고 title 정보를 음성출력하고 있으므로 가능하다면 공백링크는 삭제하는 것이 바람직합니다. (title이 없는 경우 "링크"로 음성출력함)

추가) 지금까지 테스트해본 JAWS, NVDA, Voiceover, Talkback, 센스리더 모두 공백링크를 어떤 형태로든 음성출력하고 있습니다.

 

모바일에서 title

모바일에서 독특한 점은 iOS의 보이스오버는 title 정보를 적절히 활용하는 것으로 보이나 중복정보의 생략기능은 아직 구현하지 않은 것으로 보입니다.

의아하게도 Android 톡백이 title 정보는 물론 링크 요소라는 것조차 음성출력하지 않고 있어 웹페이지 지원이 매우 미미한 것으로 생각됩니다.

 

 

테스트 환경

PC
Windows 7 x86, Internet Explorer 8
센스리더 4.0.0.0
NVDA master-10205

Mobile
갤럭시노트3, 4.4.2, 스톡
아이폰5, 7.1.2, Safari

 

2014/07/15 00:12 2014/07/15 00:12
해빠 이 작성.

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

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

최근 센스리더 4.0 beta 를 삭제하고 4.0.0.0 정식 버전을 설치할 때 아래와 같은 화면이 나오면서 설치가 잘 되지 않는 현상이 있었다요.

센스리더 설치 프로그램을 실행했을 때 수정, 복구, 제거 라디오버튼 중 선택하는 설치화면이 등장한다.

이 문제는 인스톨쉴드 설치 관련 파일이 제대로 삭제되지 않아 나타나는 현상으로 4.0 beta 버전 뿐 아니라 다른 버전에서도 발생할 수 있는 현상이라고 하네요

해결하는 방법은 제대로 삭제되지 않은 인스톨쉴드 설치 파일을 수동으로 제거하는 것입니다요.

C:\Program Files\InstallShield Installation Information 폴더로 이동한 후
{39C1A4E6-7DBA-11D7-A0F7-C85A90162188} 폴더를 삭제하고 다시 설치하면 됩니다요.

참고로, 이 폴더는 숨김 속성이라 그냥 보이지는 않아요.
“제어판>폴더옵션”으로 진입하고 “보기”탭에서 “숨김 파일 및 폴더”의 설정 상태를 아래와 같이 변경해야 폴더 목록에 잘 보입니다요.

숨김 파일 및 폴더 항목의 라디오버튼을 “숨김 파파일, 폴더 및 드라이브 표시-ON”으로 선택함

-끝-

2014/07/09 22:28 2014/07/09 22:28
해빠 이 작성.

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

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

한국형 웹콘텐츠 접근성 지침의 검사항목 중 헤딩과 관련된 항목이 있다.

2.4.2(제목 제공) 페이지, 프레임, 콘텐츠 블록에는 적절한 제목을 제공해야 한다.

검사항목을 준수하고 페이지를 구조적으로 마크업하기 위해 콘텐츠 블럭의 제목으로 헤딩(heading)을 많이 제공하고 있다. 제공된 헤딩 정보는 화면낭독기를 이용하는 사용자가 웹페이지의 구조를 파악하고 페이지를 빠르게 탐색하는데 매우 효과적으로 이용된다.

우선 헤딩의 존재만으로 콘텐츠 블럭을 구분하는 효과가 있다. 시각장애인은 한번에 하나의 요소에만 접근할 수 있기 때문에 전체적인 구조와 맥락을 파악하는 것이 쉽지 않다. 이 때 헤딩정보가 요소와 요소를 구분하고 단락을 구분하고 묶어 줄 수 있는 정보로 활용된다.
또한 헤딩의 숫자는 콘텐츠의 포함관계와 계층구조를 이해할 수 있게 한다. h1은 로고, h2는 메뉴, h3은 콘텐츠영역의 제목 등 일반적으로 많이 사용되는 헤딩숫자에 대한 구조적인 의미를 이해할 수 있고, h2가 나오다가 h3이 나온 경우 하위에 포함된 콘텐츠로 계층구조를 인지할 수 있다.

다들 이렇게 알고 있지만 실제로 화면낭독기가 헤딩을 어떻게 음성출력하는지 알고 있는 사람은 많지 않다

헤딩에 많이 사용되는 텍스트, 이미지, 텍스트링크, 이미지링크를 조합해서 화면낭독기가 어떻게 읽어주고 있는지 확인해보자

 

테스트환경

Windows 7 32bit / Internet Explorer 8
센스리더 3.2.2.0
센스리더 4.0 beta4
JAWS 13 한글
JAWS 15 영문
NVDA development 10114

헤딩 테스트 샘플 페이지

http://haeppa.kr/test/heading201406.html

헤딩정보 탐색에 이용되는 화면낭독기 기능키

기능 센스리더 3.2.2.0 센스리더 4.0 beta4 JAWS 13
한글
JAWS 15
영문
NVDA development 10114
헤딩단위 이동 Ctrl+F6
Ctrl+Shift+F6
H
Shift+H
H
Shift+H
H
Shift+H
H
Shift+H
헤딩 레벨단위 이동 none 1~6
Shift+1~6
1~6
Shift+1~6
1~6
Shift+1~6
1~6
Shift+1~6
헤딩 목록 none none Insert+F6 Insert+F6 Insert+F7

※ 헤딩레벨 단위 이동기능은 헤딩레벨에 해당하는 숫자(1~6)를 직접 눌러서 이동합니다.
※ JAWS 는 헤당레벨 단위 이동기능 사용시 section, landmark role, frame 등의 영향을 받아 이동 범위가 제한되지만 센스리더와 NVDA는 페이지내의 모든 헤딩으로 레벨단위 이동을 사용할 수 있습니다.

 

 

화면낭독기의 헤딩 음성출력 결과

아래 테스트 결과는 헤딩단위, 헤딩레벨단위 이동기능을 사용하지 않고 위/아래 방향키만 눌러서 페이지를 탐색하고 그 결과를 정리한 것입니다. 헤딩단위 이동기능 사용시 각 화면낭독기 마다 헤딩 속 요소에 대한 음성출력 방식이 매우 다르기 때문에 헤딩에 대한 지원여부를 직관적으로 확인하기 어려운 점을 감안한 것입니다.

 

1. 헤딩 기본 스타일

HTML
<h3>뽀로로</h3>
<h3><a href="poro.jpg">뽀로로</a></h3>
<h3><img src="poro.jpg" alt="뽀로로" /></h3>
<h3><a href="poro2.jpg"><img src="poro.jpg" alt="뽀로로" /></a></h3>

헤딩 기본 스타일 음성출력 내용
화면낭독기 종류 음성출력 내용 비고
센스리더 3.2.2.0 뽀로로 헤딩3
뽀로로 헤딩3 링크
헤딩3 *1
뽀로로 이미지
뽀로로 헤딩3 그래픽링크
*1) 헤딩에 이미지가 있음녀 헤딩과 이미지를 분리
센스리더 4.0 beta4 뽀로로 헤딩3
뽀로로 헤딩3 링크
뽀로로 헤딩3 그래픽 링크 *1
뽀로로 헤딩3 그래픽 링크
*1) 이미지를 그래픽링크로 음성출력하는 버그 (추정)
JAWS 13 한글 헤딩레벨3 뽀로로
헤딩레벨3 링크 뽀로로
헤딩레벨3 그래픽 뽀로로
헤딩레벨3 링크 그래픽 뽀로로
none
JAWS 15 영문 헤딩레벨3 뽀로로
헤딩레벨3 링크 뽀로로
헤딩레벨3 그래픽 뽀로로
헤딩레벨3 링크 그래픽 뽀로로
none
NVDA
development 10114
헤딩레벨3 뽀로로
헤딩레벨3 링크 뽀로로
헤딩레벨3 그래픽 뽀로로
헤딩레벨3 링크 그래픽 뽀로로
none

 

2. 헤딩 속 링크와 텍스트가 2개

HTML
<h3><a href="poro.jpg">뽀로로</a>크롱이</h3>
<h3><a href="poro.jpg">뽀로로</a><a href="krong.jpg">크롱이</a></h3>

헤딩 속 링크와 텍스트 음성출력 내용
화면낭독기 종류 음성출력 내용 비고
센스리더 3.2.2.0 뽀로로 헤딩3 링크
크롱이 *1
뽀로로 헤딩3 링크
크롱이 링크 *1
*1) 헤딩으로 묶어도 링크와 텍스트가 분리되어 헤딩 정보를 알 수 없음
센스리더 4.0 beta4 뽀로로 헤딩3 링크
크롱이 *1
뽀로로 헤딩3 링크
크롱이 링크 *1
*1) 헤딩으로 묶어도 링크와 텍스트가 분리되어 헤딩 정보를 알 수 없음
JAWS 13 한글 헤딩레벨3 링크 뽀로로
헤딩레벨3 크롱이
헤딩레벨3 링크 뽀로로
헤딩레벨3 링크 크롱이
none
JAWS 15 영문 헤딩레벨3 링크 뽀로로
헤딩레벨3 크롱이
헤딩레벨3 링크 뽀로로
헤딩레벨3 링크 크롱이
none
NVDA
development 10114
헤딩레벨3 링크 뽀로로 크롱이
헤딩레벨3 링크 뽀로로 링크 크롱이
none

 

3. 헤딩 속 이미지와 텍스트가 2개

HTML
<h3><img src="poro.jpg" alt="뽀로로" />크롱이</h3>
<h3><img src="poro.jpg" alt="뽀로로" /><img src="krong.jpg" alt="크롱이" /></h3>
<h3><img src="krong.jpg" alt="크롱이" /><img src="poro.jpg" alt="뽀로로" /></h3>

헤딩 속 이미지와 텍스트 음성출력 내용
화면낭독기 종류 음성출력 내용 비고
센스리더 3.2.2.0 헤딩3 *1
뽀로로 이미지
크롱이 *2
헤딩3 *1
뽀로로 이미지
크롱이 이미지 *2
헤딩3 *1
크롱이 이미지
뽀로로 이미지 *2
*1) 헤딩에 이미지가 있으면 헤딩과 이미지를 분리
*2) 헤딩으로 묶어도 요소가 모두 분리되어 헤딩 정보를 알 수 없음
센스리더 4.0 beta4 뽀로로 헤딩3 그래픽링크 *1*2
크롱이 헤딩3 그래픽링크 *1*3
뽀로로 헤딩3 그래픽링크 *1*3
*1) 이미지를 그래픽링크로 음성출력하는 버그 (추정)
*2) 텍스트정보가 누락됨
*3) 헤딩 안에 이미지가 2개인 경우 마지막 이미지만 음성출력
JAWS 13 한글 헤딩레벨3 그래픽 뽀로로
헤딩레벨3 크롱이
헤딩레벨3 그래픽 뽀로로
헤딩레벨3 그래픽 크롱이
헤딩레벨3 그래픽 크롱이
헤딩레벨3 그래픽 뽀로로
none
JAWS 15 영문 헤딩레벨3 그래픽 뽀로로
헤딩레벨3 크롱이
헤딩레벨3 그래픽 뽀로로
헤딩레벨3 그래픽 크롱이
헤딩레벨3 그래픽 크롱이
헤딩레벨3 그래픽 뽀로로
none
NVDA
development 10114
헤딩레벨3 그래픽 뽀로로 크롱이
헤딩레벨3 그래픽 뽀로로 그래픽 크롱이
헤딩레벨3 그래픽 크롱이 그래픽 뽀로로
none

 

 

4. 헤딩 속 이미지와 링크가 2개

HTML
<h3><img src="poro.jpg" alt="뽀로로" /><a href="krong.jpg">크롱이</a></h3>
<h3><img src="poro.jpg" alt="뽀로로" /><a href="poro.jpg"><img src="krong.jpg" alt="크롱이" /></a></h3>
<h3><a href="poro.jpg"><img src="poro.jpg" alt="뽀로로" /></a><a href="krong.jpg"><img src="krong.jpg" alt="크롱이" /></a></h3>

헤딩 속 이미지와 링크 음성출력 내용
화면낭독기 종류 음성출력 내용 비고
센스리더 3.2.2.0 헤딩3 *1
뽀로로 이미지
크롱이 링크 *2
헤딩3 *1
뽀로로 이미지
크롱이 그래픽링크 *2
뽀로로 헤딩3 그래픽링크
크롱이 그래픽링크 *2
*1) 헤딩에 이미지가 있으면 헤딩과 이미지를 분리
*2) 헤딩으로 묶어도 요소가 모두 분리되어 헤딩 정보를 알 수 없음
센스리더 4.0 beta4 뽀로로 헤딩3 그래픽링크
크롱이 링크 *1
뽀로로 헤딩3 그래픽링크
크롱이 그래픽링크 *1
뽀로로 헤딩3 그래픽링크
크롱이 그래픽링크 *1
*1) 헤딩으로 묶어도 요소가 모두 분리되어 헤딩 정보를 알 수 없음
JAWS 13 한글 헤딩레벨3 그래픽 뽀로로
헤딩레벨3 링크 크롱이
헤딩레벨3 그래픽 뽀로로
헤딩레벨3 링크 그래픽 크롱이
헤딩레벨3 링크 그래픽 뽀로로
헤딩레벨3 링크 그래픽 크롱이
none
JAWS 15 영문 헤딩레벨3 그래픽 뽀로로
헤딩레벨3 링크 크롱이
헤딩레벨3 그래픽 뽀로로
헤딩레벨3 링크 그래픽 크롱이
헤딩레벨3 링크 그래픽 뽀로로
헤딩레벨3 링크 그래픽 크롱이
none
NVDA
development 10114
헤딩레벨3 그래픽 뽀로로 링크 크롱이
헤딩레벨3 그래픽 뽀로로 링크 그래픽 크롱이
헤딩레벨3 링크 그래픽 뽀로로 링크 그래픽 크롱이
none

 

정리하자면…

  • JAWS 13 한글과 15 영문은 음성출력에 차이가 없음
  • NVDA, JAWS는 헤딩정보와 요소의 누락이 없음
  • 센스리더 3.2.2.0은
    • 이미지와 헤딩이 분리되어 헤딩정보 불확실
    • 헤딩 속 이미지, 링크, 텍스트가 2개 이상 있으면 서로 분리되고 헤딩정보가 누락
  • 센스리더 4.0 beta4는
    • “헤딩x 이미지”를 “헤딩x 그래픽링크”로 음성출력하는 버그
    • 헤딩 속 이미지, 링크, 텍스트가 2개 이상 있으면 서로 분리되고 헤딩정보가 누락
    • 헤딩 속 이미지와 텍스트가 있으면 텍스트 누락
    • 헤딩 속 이미지가 2개 있으면 첫번째 이미지 정보 누락
  • NVDA는 2,3,4 샘플에서 화면레이아웃모드 사용으로 모든 요소를 한 번에 음성출력하고 있으나 좌/우 방향키를 눌러 확인하면 요소의 시작/끝을 알 수 있어 문제되지 않음

 

추가, 헤딩 / 헤딩레벨 단위 이동기능의 차이

HTML

<h1>제목1</h1> 
<h3>내용1-1</h3>
<h3>내용1-2</h3>
<h1>제목2</h1>
<h3>내용2-1</h3>
<h3>내용2-2</h3>
<h1>제목3</h1>
<h3>내용3-1</h3>
<h3>내용3-2</h3>

위와 같은 구성된 경우 헤딩단위 이동기능을 이용하면

제목1 헤딩1
내용1-1 헤딩3
내용1-2 헤딩3
제목2 헤딩1
내용2-1 헤딩3
내용2-2 헤딩3
…..

위와 같이 모든 헤딩을 읽으면서 페이지를 탐색합니다.
하지만 헤딩레벨 단위 이동기능은 약간 다릅니다.

숫자 1만 누르면

제목1 헤딩1
제목2 헤딩1
제목3 헤딩1

숫자3만 누르면

내용1-1 헤딩3
내용1-2 헤딩3
내용2-1 헤딩3
내용2-2 헤딩3
……

위와 같은 형태로 숫자에 해당하는 레벨의 헤딩만 읽으면서 페이지를 탐색하게 됩니다. 페이지 구성에 따라 헤딩레벨단위 이동기능을 잘 활용한다면 효과적인 페이지 탐색이 가능합니다.

2014/06/15 21:47 2014/06/15 21:47
해빠 이 작성.

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

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