Haeppa World

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

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

※ 헤딩레벨 단위 이동기능은 헤딩레벨에 해당하는 숫자(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>

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

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

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>

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>

정리하자면…

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

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

HTML

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

제목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
……

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

끝

JAWS 설치하는 방법에 대한 문의가 간혹 있어서 예전에 Freedom Scientific 홈페이지를 뒤지다가 찾아낸 방법을 공유합니다.

JAWS for windows 는 원래 영어권에서 사용하는 스크린리더이기 때문에 공식적으로는 한국어 음성지원은 하지 않았습니다. 영어권외의 국가에서는 localization을 해서 현지어로 제품을 새로 출시하곤 했습니다. 국내에도 2010년에 “실로암시각장애인복지관”에서 한글화한 “JAWS for windows v11”을 출시했는데 그 이후로 업데이트가 안되고 있습니다. 스크린리더의 특성상 잦은 기능개선이 이루어지고 v13이 거론되는 시점에서 한글화된 버전을 그대로 적용하기에는 좀 무리가 있습니다.

Freedom Scientific 홈페이지를 방문해 보면 최신 버전을 DEMO로 사용해볼 수 있습니다. DEMO 의 시간 제한은 40분입니다. 날짜 제한은 없구요. 40분이 경과한 후 재부팅하면 다시 40분을 사용할 수 있는 형태입니다. 실사용이 아닌 테스트 목적이라면 “부팅 후 40분”의 시간은 100여 만원을 절약하기에 충분한 가치가 있다고 생각합니다.

A. JAWS 와 한국어 TTS 다운로드

우선 Freedon Scientific 홈페이지(http://www.freedomscientific.com)에 접속해서
Products > JAWS® screen reading software 로 들어갑니다.

JAWS의 제품소개 페이지에 들어가면 오른쪽 하단에 “Free downloads” 링크가 있습니다.
설치파일은 32bit, 64bit 버전이 나뉘어 있어서 자신의 윈도우 버전에 맞는 파일을 다운 받으시면 됩니다.

JAWS 제품소개 페이지 : http://goo.gl/dUJ4

이제 영문 JAWS 프로그램을 다운 받았으니 한국어를 말할 수 있는 TTS를 다운받으면 됩니다.
국내에서는 한국어 TTS를 주로 Voiceware 사의 Yumi 엔진으로 사용하는데
Freemdom Scientific사는 RealSpeak Direct Solo Voice를 사용하고 데모 버전도 다운받을 수 있습니다.
JAWS 제품소개 페이지 좌측하단 “JAWS Features” 부분의 “Sample and download RealSpeak Solo Direct voices in various languages”로 이동합니다.

RealSpeak Solo Driect Voices 다운로드 페이지 : http://goo.gl/lUcQ7

RealSpeak Solo Driect Voices 페이지에서 아래로 쭉 내려가다 보면
반가운 태극기 그림과 함께 “KOREAN NARAE” TTS를 다운받는 링크가 나타납니다.

B. JAWS 설치하기

우선 다운 받은 JAWS와 NARAE TTS 파일을 실행해서 각각 설치합니다.
NARAE는 설치 과정 중 주의할 점이 없어서 언급하지 않고 JAWS를 설치할 때 참고할만한 부분 몇 가지를 점검할게요.

첫번째, 일반 사항

설치 과정 중 재부팅이 필요합니다. 작업중인 파일은 반드시 저장하세요. 또한 시스템에 따라서 오류를 일으킬 수 있습니다. 안전을 위해 설치 전에 시스템을 백업하세요.

두번째, 드라이버 설치

설치 과정 중 드라이버 설치에 대한 경고창이 나타납니다. 스크린리더가 화면정보를 얻기 위한 드라이버이므로 “이 드라이버 소프트웨어를 설치합니다”를 선택하세요.

세번째, 원격지원 서비스 설치하지 않기

JAWS는 자체적으로 JAWS 사용자 간에 혹은 본사 고객지원을 통해 원격지원하는 기능을 포함하고 있습니다.
데모버전을 사용하면서 원격지원 할 일이 없고, 윈도우즈 터미널 서비스를 사용하기 때문에 보안에 예민한 환경에서는 설치하지 않는 것이 좋을 것 같습니다.

JAWS 설치 과정 중 “Choose Setup Type”에서 “Custom”을 선택합니다.

“Custom Setup”과정이 나오면 “Remote Access Support…” 항목을 클릭하고 “Entire feature will be unavailable”을 선택해서 설치항목에서 제외하도록 합니다.

C. JAWS가 한국말을 하도록 설정하기

JAWS를 설치해 보면 기본적으로 영문 음성엔진이 말(?)을 합니다. 한국어 TTS를 설치했어도 설정을 바꿔주지 않으면 영어로만 말을 합니다. 우리는 한국인이니까 미리 다운받아서 설치한 NARAE의 목소리를 들을 수 있도록 설정하는 방법을 알려드릴께요.

JAWS 메인메뉴의 Options > Voices > Select a Voice Profile…로 들어갑니다.

Default 항목을 “RealSpeak Solo Direct – (factory)”로 변경하고 OK를 클릭합니다.

설정하는 순간부터 JAWS가 한국말을 구사하는 것을 들으실 수 있을거에요. ㅎㅎㅎ

‘

D. 부탁과 당부의 글

JAWS for windows 는 국내에 실제 사용자가 거의 없습니다. 정식으로 구입한 사용자가 20명도 채 안 되는 것으로 짐작되고, 그나마도 대부분이 테스트를 목적으로 하는 사용자로 보입니다. 절대 다수의 시각장애인들은 실제 컴퓨터 활용에 있어 국내 스크린리더(센스리더, 드림보이스 등)를 사용하고 있습니다.

그 이유는 일단 엄청난 가격 떄문입니다. 국내 스크린리더는 무료 제품도 있고, 유료 제품도 몇 십만원의 비용이면 구입해서 업데이트 비용없이 수년간 사용할 수 있습니다. 하지만 JAWS는 초기 구입비용이 100만원이 넘고 해마다 업데이트 비용이 200달러 정도 필요한 것으로 알고 있습니다. 더구나 대부분의 일반사용자들이 사용하는 기본 기능들에 있어서는 JAWS와 국내 스크린리더와 큰 차이가 없기 때문에, 실제 사용자들은 더더욱 JAWS를 사용하지 않고 있습니다.

가격 뿐만 아니라 기능의 차이도 있습니다. 모두 아시다시피 해외는 소프트웨어나 웹사이트 환경이 국내와 전혀 다릅니다. 이외에도 사용자들의 컴퓨터 사용패턴이나 요구사항(정말 매우 다양한)도 현저하게 차이가 납니다. 국내 스크린리더들은 이에 대한 대응으로 기능보완이 되어 있고, 수년간 비슷한 프로그램 사용패턴을 유지해 왔기 때문에 사용자들이 편하게 느끼는 반면, JAWS는 이런 대응이 전혀 되어 있지 않아서 사용자들에게는 비싸고 불편한 존재로 인식되어 있습니다.

이런 말씀을 드리는 이유는 JAWS를 근거로 접근성을 평가하거나 제작기준을 제시하면, 현실과 많이 동떨어진 결과물을 만들어낼 우려가 있다는 점입니다. 제가 이 글을 포스팅을 한 이유는 국내 스크린리더가 미처 지원하지 못하는 최신 기술, 특히 웹페이지 제작기술들에 대한 테스트에 사용되었으면 하는 바람 때문입니다. 테스트의 용도에서 벗어나 JAWS를 기준이 되어야 한다는 의견이 나타날 수 있습니다. 하지만 실제 사용자들이 부딪혀야 하는 현실은 JAWS와는 전혀 무관하다는 점을 잊지 말아야 합니다.

JAWS를 근거로 국내 스크린리더에게 기능개선을 요구할 수는 있습니다. 하지만 대다수의 국내 스크린리더 사용자를 고려하지 않은채 JAWS만을 기준으로 최신 기술을 사용하고, 이렇게 제작된 페이지나 소프트웨어로 서비스를 제공하게 되면 실제 이를 이용하는 시각장애인 사용자들은 매우 불편해질 수 있다는 점을 반드시 고려해주시길 부탁드립니다.

-------------------------------------------------------------------------------------------------------------------------
※ 위 내용은 2011년 9월 27일 기준으로 작성되었습니다.
------------------------------------------------------------------------------------------------------------------------

Adobe 사는 Flash, Flex 의 접근성을 높이기 위해
관련 기능을 구현하고, 범위를 확대하는 노력을 기울이고 있다.
접근성 관련 세미나까지 열면서 접근성을 보장하기 위해 심열을 기울인다.

헌데 미처 생각지 못한 부분이 있는 것 같다.
바로 Flash Player의 접근성이다.
다들 알다시피 Flex 건 Flash 건 브라우저에서 실행되기 위해서는 Flash Player가 반드시 필요하다.
헌데 Adobe가 직접 제작해서 공급하고 있을 Flash Player를 설치하는 과정에서는 접근성을 보장하지 않고 있다.

Flash Player를 설치하기 위해서는 우선 사용약관에 동의를 선택한 후 설치 버튼을 눌러야 한다.
하지만 약관에 동의하는 체크박스, 종료버튼 설치버튼 모두 해당 컨트롤의 이름을 알 수가 없다.

실제로 스크린리더를 실행하고 Tab키를 눌러보면 계속해서
버튼 버튼 버튼 버튼 버튼 버튼 버튼 버튼 …
이라고 반복해서 읽어줄 뿐이다.
당연히 전맹 사용자가 스크린리더에만 의지해서 Flash Player를 설치하기란 매우 어렵다.

Adobe가 직접 만드는 비교적 간단한 대화상자인 Flash Player의 설치 과정조차 접근성을 보장하지 않는데
개별 업체의 개발자들에게
“접근성을 보장하는 컨텐츠를 만들기 위해 노력해야 한다. 그 방법은 어렵지 않다.”
라고 강조하면 얼마나 설득력이 있을까?

사소한 부분일 수 있지만 Adobe에서 가장 기본적인 부분에 신경을 쓰지 못했다는 점이 아쉬울 뿐이다.

테스트 환경
Windows XP SP3
Internet Explorer 8
Sense Reader Professional Edition v1.5.0.2
JAWS for Windows Korean v11.0.1430

-------------------------------------------------------------------------------------------------------------------------
이미 컴파일된 프로그램의 내용을 확인하기 어렵고, 보조기기의 별도 API 지원 여부를 확인할 수 없기 때문에 스크린리더의 음성출력 여부를 기준으로 판단한 내용입니다.
2010년 11월 13일에 최종테스트 되었습니다.
-------------------------------------------------------------------------------------------------------------------------

작년부터 소문만 무성하고 실물이 공개되지 않았던 JAWS의 한국어 버전이 출시 된다고 합니다.

공지사항을 보니 오늘(2010/07/20) 출시된다고 하네요.

헌데 가격이 정말 손 떨립니다 ^^;

Professional : $1,095 + 49,500원 = 약 138 만원
Standard : $895+ 49,500원 = 약 114 만원
(환율 1 USD = 1,214원 기준)

한국어 리비전은 “드림보이스”를 개발했던 실로암 복지관의 소프트웨어 개발원에서 진행했다고 합니다.

자세한 정보는 실로암 복지관의 공지사항을 참고하세요
http://210.217.26.94/bbs/view.php?id=notice&no=2758

데모버전 다운로드

다운로드 #1 : http://ideebee.com/filekey=1569925-9bf8
다운로드 #2 : http://www.megaupload.com/?d=5KCX0AD7