20014.07.07

센스리더에서 상당기간 베타테스트를 거친 4.0 버전이 드디어 정식으로 출시되었습니다.

가장 큰 특징은 윈도우즈8을 지원하는 것과 인터넷지원이 개선된것 그리고 설치패키지의 변경입니다.
베이직버전과 프로페셔널 버전 설치파일이 따로 있으며 세부사항을 선택해서 설치하는 것이 가능해졌습니다.

인터넷 관련 기능 중 가장 큰 특징은 4가지 정도인 것 같습니다.

  1. 브라우저탭키 모드를 도입해서 보다 동적인 웹 환경에 대응할 수 있도록 한 것 (http://haeppa.kr/114)
  2. 가상커서 기능키의 변화 (http://haeppa.kr/114)
  3. 숨김항목읽기 설정의 기본값이 해제로 변경된 것
  4. 링크의 title 값을 링크텍스트와 함께 음성출력하도록 변경 (http://haeppa.kr/119)

보다 자세한 변경사항은 센스리더 제작사의 자료실을 참고해주세요
센스리더 4.0 상세정보 : http://xvtech.com/xvtech/?mid=data&document_srl=7016
센스리더 4.0 다운로드 : 센스리더 4.0 베이직 / 센스리더 4.0 프로페셔널

2014/07/08 01:21 2014/07/08 01:21
해빠 이 작성.

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

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
해빠 이 작성.

최근 센스리더(www.xvtech.com)는 4.0 beta 를 공개하고 베타테스트를 진행했습니다. 현재 beta4까지 공개되었고 곧 정식출시를 앞두고 있다고 합니다.
센스리더 4.0 업데이트는 Windows 8 지원이 가장 큰 키워드로 보일 수 있지만, 가상커서에서도 변화가 있었습니다. 센스리더 개발 이후 줄곧 유지하던 가상커서 체계에 큰 변화가 있었고, 복잡했던 기능키조합도 크게 바뀌었습니다.

 

가상커서 - 브라우저 탭키의 등장

기존 가상커서에서는 브라우저의 기능 및 초점이동을 센스리더가 직접 제어하는 방식으로 동작합니다. 이로인해 jQuery UI 등의 다양한 네이게이션응ㄹ 활용할 수 없고 RIA 환경에 적절하게 대응할 수 없었습니다.
센스리더가 4.0으로 업데이트 되면서 "브라우저 탭키"라는 모드를 도입하고 브라우저의 기능과 초점을 더 이상 제어하지 않아 기능변화에 약간의 기대를 걸고 있습니다.
또한 WAI-ARIA에 대한 기능개선이 진행되고 있어 해외의 화면낭독기처럼 보다 나은 RIA, WAI-ARIA 환경을 이용할 수 있을지 기대됩니다.
기존의 가상커서 체계는 “가상커서 탭키”라는 명칭으로 병행 운용된다고 합니다.

 

입력모드와 기능키모드

브라우저 탭키에서는 입력모드와 기능키모드가 존재합니다.
입력모드는 편집창에서 텍스트를 입력하는 상태를 말하고 기능키모드는 이동기능키(H, F, I 등)를 눌러 콘텐츠를 탐색하는 상태를 말합니다.
이동기능(Tab, F2)으로 편집창을 만나게 되면 바로 "입력모드"로 변경되며 글자를 입력할 수 있습니다. 여기에서 다른 요소로 이동하기 위해 기존 3.x 버전의 방식대로 바로 이동기능 H(헤딩이동)키를 누르게 되면 초점이 이동되지 않고 텍스트가 입력됩니다.
이런 상황에서는 Tab키나 ESC키를 눌러 기능키모드로 전환하하고 페이지 탐색을 진행하면 됩니다.

 

가상커서 설정의 기본값 변경

센스리더 4.0 beta4 기준으로 가상커서 설정의 기본값 중 아래 두 항목이 변경되었습니다.

  • 자동포커스 = 선택
  • 숨긴내용읽기 = 해제

자동포커스는 브라우저의 초점표시에 대한 옵션으로 onfocus 이벤트와 관련이 있고,
숨긴내용읽기는 display:none, visibility:hidden, aria-hidden 스타일의 음성출력과 관계가 있습니다.

 

가상커서 기능키 변화

내용 중 "-" 는 기능키 없음, 빈칸은 변경사항 없음을 의미합니다.

 

1. 기본기능

 

센스리더 3.2.2.0

센스리더 4.0 bets4

비고

프로그램 실행 Ctrl+Alt+S    
프로그램종료 Insert+F4    
메뉴창 열기 Ctrl+\    
카상커서 설정 Ctrl+Shift+F9    
가상커서 사용/해제 Ctrl+Shift+F11 / F12   입력서식에서는 Enter
가상커서 임시해제 - Ctrl+↑/↓  
가상커서 즉시사용 - ESC, Tab  

 

2. 읽기기능

 

센스리더 3.2.2.0

센스리더 4.0 beta4

비고

가상커서 갱신 Ctrl+Shift+F11    
음성 중지 Ctrl    
이전/다음 글자 읽기 ← / →    
이전/다음 요소 읽기 ↑ / ↓    
자동읽기 시작/ 중지 F11 / ESC    
└ 현재 프레임만 읽기 Alt+F11    
윈도우 제목 읽기 Ctrl+Shift+T    
페이지 정보 읽기 Ctrl+F9    
입력서식 정보 읽기 Ctrl+Alt+Shift+T Ctrl+Alt+Shift+F9 입력서식의 label, title 정보 확인
음성출력내용 보기 F12   바로 이전에 음성출력된 내용 확인하기

 

3. 읽기설정 (toggle)

 

센스리더 3.2.2.0

센스리더 4.0 beta4

비고

숨김 내용읽기 설정 Ctrl+/   display:none, visibility:hidden, aria-hidden
자동포커스 설정 Ctrl+.(점)   브라우저의 쵸점표시
구두점 읽기 Alt+Shift+Z   키보드기호 읽기 설정
특수문자 읽기 Alt+Shift+' (어포스트로피)   유니코드 읽기 설정

 

4. 이동기능

 

센스리더 3.2.2.0

센스리더 4.0 beta4

비고

페이지 처음/끝 Ctrl+Home / End    
다음/이전 개체 Tab / Shift+Tab Insert+Tab
Insert+Shift+Tab
가상커서의 초점 운용 기능키
(브라우저의 초점 운용은 tab 사용)
다음/이전 텍스트 Ctrl+F4
Ctrl+Shift+F4
F4 / Shift+F4  
다음/이전 링크 Ctrl+' (어포스트로피)
Ctrl+Shift+'
L / Shift+L  
└ 다음/이전 방문한링크 Ctrl+; (새미콜론)
Ctrl+Shift+;
K / Shift+K  
└ 링크목록 Ctrl+L ; (새미콜론)  
다음/이전 헤딩 Ctrl+F6
Ctrl+Shift+F6
H / Shift+H  
└ 다음/이전 헤딩레벨 - 1~6 / Shift 1~6 해당레벨의 숫자만 입력
다음/이전 입력서식 Ctrl+F2
Ctrl+Shift+F2
N / Shift+N  
다음/이전 편집창 Ctrl+F8
Ctrl+Shift+F8
F2 / Shift+F2  
다음/이전 프레임 Ctrl+Tab
Ctrl+Shift+Tab
F / Shift+F  
└ 프레임 목록 Alt+Shift+W G  
다음/이전 랜드마크 Ctrl+Tab
Ctrl+Shift+Tab
J / Shift+J  
다음/이전 외부개체 Ctrl+F7
Ctrl+Shift+F7
E / Shift+E 플래시, 윈도우즈미디어, 실버라이트 등
다음/이전 목록 Ctrl+K
Ctrl+I
S / Shift+S  
└ 다음/이전 목록항목 - I / Shift+I  
다음/이전 폼 - R / Shift+R <form>
다음/이전 필드셋 - D / Shift+D <fieldset>

 

5. 테이블 관련 기능

 

센스리더 3.2.2.0

센스리더 4.0 beta4

비고

다음/이전 테이블 Ctrl+F3
Ctrl+Shift+F3
T / Shift+T  
구조적인 테이블탐색
(제목셀 참조)
Ctrl+Alt+
← / ↑ / ↓ / →
  테이블의 시각적인 구조에 따라 방향키로 이동
테이블 정보 Ctrl+Alt+Enter   테이블의 구조정보, 현재 셀 정보
테이블 모드 선택/해제 Ctrl+T / U   초점이 테이블을 벗어나지 않음

 

6. 찾기기능

 

센스리더 3.2.2.0

센스리더 4.0 beta4

비고

문자열 찾기 Ctrl+F    
다음/이전 결과로 이동 F3
Shift+F3
   
사용한 링크 문자열 찾기 Ctrl+~(그레이브)
Ctrl+Shift+~
  바로전에 사용한 링크의 텍스트의 문자열로 이동

 

7. 기타기능

 

센스리더 3.2.2.0

센스리더 4.0 beta4

비고

블럭지정 Alt+L B 가상커서의 텍스트
TITLE 속성값 읽기 Ctrl+Alt+Shift+T Ctrl+Alt+Shift+F9 링크나 입력서식에서 사용가능
longdesc 내용 읽기 Alt+Enter    
콘트롤 선택하기 Ctrl+↑/↓   셀렉트박스 값 조절
윈도우내용 읽기 Ctrl+Shift+W   브라우저 경고창의 내용
현재 포커스 객체 읽기 Ctrl+Shift+F    
도움말 열기 Insert+F1    
기능키 무시 Ctrl+Shift+N   브라우저의 기능키가 센스리더와 동일해서 동작이 안될 때 센스리더기능키 1회 무시

 

8. 미디어관련기능 (윈도우즈미디어)

 

센스리더 3.2.2.0

센스리더 4.0 beta4

비고

미디어 재생/정지 Ctrl+] / [ P / Shift+P  
미디어 다음/이전 탐색 Alt+] / [ ] / [ 미디어 앞/뒤 탐색
미디어 빠르게 / 느리게 Ctrl+Shift+] / [ Ctrl+] / [ 재생속도 조절
미디어 정상속도 Ctrl+Alt+] Ctrl+'(어포스트로피)  
미디어 볼륨 크게/ 작게 Alt+Shift+[ / ] Shift+[ / ]  
미디어 URL복사 Ctrl+Alt+[ U  
미디어 정보 Ctrl+Alt+Shift+] Y  
활성미디어 변경 Ctrl+Alt+Shift+[ O 재생/조절할 미디어 선택 기능
미디어 이동시간 변경 Alt+' (어포스트로피) (어포스트로피) 앞/뒤 탐색 기능에 적용

2014/06/07 04:13 2014/06/07 04:13
해빠 이 작성.

웹 접근성에 관심을 가지고 가장 처음 접하게 되는 정보 중 하나가 img의 alt 속성이다. 시각장애인은 이미지 정보를 눈으로 확인할 수 없기 때문에 이를 보완하기 위해 alt 속성을 사용하게 되고, 이것을 화면낭독기가 음성출력한다.

다들 알다시피 모든 이미지에 alt 속성값을 제공하는 것은 아니다. alt 속성의 제공에서 제외되는 것은 정보를 담지 않은 블릿, 선, 배경 등의 이미지다. 장식에 사용되는 이런 이미지에는 화면낭독기가 음성을 출력하지 않도록 alt=””과 같이 공백문자를 제공한다.

 

뭐가 문제냐면요…

일반 이미지에서는 alt 속성의 사용이 매우 명확하다. 하지만 링크에 사용된 이미지라면 어떨까?

<a href=”#go” ><img src=”abc.jpg” alt=”아름다운풍경”></a>
<a href=”#go”>아름다운 풍경</a>

이 경우 인접한 두 링크의 텍스트와 목적지가 같기 때문에 이미지링크는 alt=”” 공백처리를 하게 된다.

<a href=”#go” ><img src=”abc.jpg” alt=””></a>
<a href=”#go”>아름다운 풍경</a>

제작자의 의도와 다르게 화면낭독기는 링크 속 이미지는 공백문자로 처리하지 않는다. 센스리더와 죠스는 아래와 같이 파일명을 그대로 음성출력하고 있다.

센스리더 : 에이비시점제이피지 그래픽링크
죠스 : 경로명/에이비씨 링크 그래픽

이런 현상에 대해 화면낭독기 개발사 측의 입장은 이렇다.

사이트를 이용하다 보면 아직도 전반적으로 준수상태가 매우 낮고 대체텍스트가 누락되거나 심지어 사이트의 모든 이미지링크가 공백처리 된 경우도 있다. 화면낭독기가 링크의 이미지도 alt=””를 공백처리하게 되면 일부 사이트를 이용할 수 없는 문제가 있다.

처음 이런 설명을 듣는 경우 납득하지 못할 수도 있지만, 화면낭독기는 접근성을 준수하지 않은 사이트도 이용해야하는 장애인보조기기이므로 이 주장을 반박하기가 어렵다.

 

어떻게 해야하죠?

그렇다면 어떻게 보완할 수 있을까? 해결방법은 “한국형웹콘텐츠접근성지침 v2.1 검사항목 2.4.3 적절한 링크텍스트”에서 확인할 수 있다

1-3) 이미지 링크를 제공하는 경우: URL에 관한 정보를 제공하는 텍스트와 URL로 이동하는 이미지 링크는 하나의 링크로 구성하는 것이 바람직하다. 이 경우, 이미지 링크의 대체 텍스트는 공백 문자로 제공해야 한다.

지침에서 알려주는 대로 한번 적용해보자.

<a href=”#go” ><img src=”abc.jpg” alt=””>아름다운풍경</a>

이미지를 공백처리하고 텍스트와 하나의 링크로 만들면 아래와 같이 음성출력 한다.

센스리더 : 아름다운풍경 그래픽링크
죠스 : 아름다운풍경 링크

이미지와 텍스트 링크가 인접한 경우 이 방법으로 보완할 수는 있지만, 이것이 정답이라고 말할 수는 없다. 디자인이나 개발 등 여러 이유로 하나의 링크로 묶을 수 없는 경우도 많기 때문이다.

이 사례를 접할 때마다 “지침상의 의도와 이상적인 접근성 높은 웹”이, “화면낭독기가 접하는 접근성 낮은 현실의 웹”과 상충하고 있는 지금이 참 씁쓸하다.

 

추가로,

이 문제를 보완하는 여러 방법이 있겠지만, 이미지를 링크에 넣지 않고 링크 영역의 베경이미지로 사용하면 된다는 의견이 제시 되었지만, 어쨋든 이 경우에도 링크라는 요소가 인지되고 음성출력되기 때문에 추천하기는 어려울 것 같다.

 

테스트는…

Internet Explorer 8
센스리더 v3.2.2.0
죠스 한글판 v13

2014/06/06 18:49 2014/06/06 18:49
해빠 이 작성.

먼저 특정 사이트에 악감정이 있거나 비방하기 위한 포스팅이 아님을 밝힙니다.

네이버에서 카페를 가입할 때 반드시 통과해야 하는 부분이 있습니다.

네이버카페가입의 보안문자입력 

CAPTCHA… 보통 보안문자, 그림문자 라고도 부르는 녀석입니다.
다들 아시는 대로 봇에 의한 자동가입을 막기 위해 사용되는 녀석이지요.

예전부터 요게 문제입니다.
CAPTCHA는 그 특성상 대체텍스트를 제공할 수 없어 시각장애인 혼자서는 통과할 수 없는 큰 장벽입니다.
카페 가입을 원하는 시각장애인 중 많은 수가 지인에게 네이버 아이디/비밀번호를 알려주고, 타인을 통해 카페에 가입하고 있습니다.
시각장애인 본인이 해결할 수 없는 부분이기 때문에 개인정보의 유출을 감수하고서라도 지인에게 가입을 부탁하는 겁니다.

반면에 다음(daum.net)의 카페는 대체수단을 제공해서 확연히 다른 모습을 보여줍니다.

다음카페가입의 보안문자입력

스피커 그림을 누르면 좌측의 그림문자를 음성으로 들려주기 때문에 시각장애인도 카페가입을 문제없이 할 수 있습니다.
굳이 시각장애인이 아니더라도 눈으로 알아보기 힘들 때 눌러보면 도움이 됩니다.

네이버의 CAPTCHA 사용 정책 때문에 많은 시각장애인이 불편을 겪었고, 고객센터를 통해 수도 없이 민원을 넣었다고 들었습니다.
하지만 아직까지 그 어떤 대체수단도 제공하지 않고 있습니다.

며칠 전 우연히 매우 아이러니한 점을 발견했습니다.
네이버의 이토록 견고한 CAPTCHA 보안정책이 플랫폼에 따라 다르다는 것입니다.

 

A. 카페가입

1. 데스크탑 웹

 데스크탑웹 카페가입시 보안문자입력

데스크탑 웹에서는 카페를 가입할 때 반드시 CAPTCHA 를 입력해야만 합니다.
CAPTCHA 단계를 건너뛸 수 없고 다른 대체수단도 제공되지 않습니다.
결과적으로 시각장애인 혼자 카페에 가입하는 것은 불가능합니다.

 

2. 모바일 웹 (Safari, iOS 6.0.1)

모바일웹 카페가입1 - 답변 입력   모바일웹 카페가입2 - 가입완료

모바일 웹에서는 카페를 가입할 때 CAPTCHA 입력과정이 없습니다.
카페관리자가 요구한 질문에 답변만 입력하고 확인을 누르면 바로 가입이 됩니다.
결과적으로 시각장애인이 혼자서 카페에 가입할 수 있습니다.

 

3. 카페 앱 (v2.8.0 / iOS 6.0.1)

 카페앱 카페가입1 - 답변입력 및 약관동의    카페앱 카페가입2 - 가입완료

iOS의 카페앱에서는 카페를 가입할 때 CAPTCHA 입력과정이 없습니다.
카페관리자가 요구한 질문에 답변을 입력하고, 약관에 동의만하면 바로 가입이 됩니다.
결과적으로 시각장애인이 혼자서 카페에 가입할 수는 있습니다.
다만…
카페 앱의 경우 대체텍스트 등 애플리케이션 접근성을 전혀 고려하지 않고 만들어졌습니다.
부실한 대체텍스트 때문에 숙련된 사용자가 짐작에 의존해 가입할 수 있을 뿐, 초심자의 경우 앱을 이용하는 것 자체가 불가능합니다.

 

B. 네이버 회원가입

1. 데스크탑 웹

데스크탑웹 네이버회원가입 - 입력정보 확인 및 보안문자 입력

데스크탑 웹에서 네이버 회원가입의 마지막 단계로 입력정보를 확인하는 부분입니다.
이미 이전단계에서 휴대폰으로 인증을 마쳤지만, CAPTCHA를 통해 추가로 재인증을 요구하고 있습니다.
이 CAPTCHA 역시 우회할 수 없고, 대체수단이 제공되지도 않습니다.
결과적으로 시각장애인 혼자 회원가입을 진행하는 것은 불가능합니다.

 

2. 모바일 웹 (Safari, iOS 6.0.1)

모바일웹 네이버회원가입 - 정보입력1     모바일웹 네이버회원가입 - 약관동의모바일웹 네이버회원가입 - 휴대폰인증     모바일웹 네이버회원가입 - 가입완료

모바일 웹에서 네이버 회원가입은 매우 간단합니다.
회원정보 입력 후 휴대폰 인증을 하면 바로 회원가입을 완료할 수 있습니다.
CAPTCHA 입력과정은 나타나지 않습니다.
휴대폰인증 후에도 CAPTCHA를 통해 재인증하는 데스크탑 웹과 상반된 부분입니다.
결과적으로 시각장애인 혼자 회원가입을 진행하는 것이 가능합니다.

 

C. 제 생각에는…

플랫폼에 따라 CAPTCHA 사용에 대한 보안정책이 다르게 적용되는 모습을 살펴볼 수 있었습니다.
같은 사용자가 플랫폼에 따라 전혀 다른 사용자 경험을 가질 수 밖에 없는 상황입니다.
특히나 시각장애인은 CAPTCHA를 통한 인증과정을 통과할 수 없기 때문에 완전히 다른 결과를 가져오게 됩니다.

정리하면,
같은 네이버 카페에 가입하는데 데스크탑 웹으로 접근하면 CAPTCHA가 있어서 시각장애인이 혼자 카페에 가입을 할 수 없고, 모바일 웹이나 앱으로 접근하면 CAPTCHA가 없어서 가입하는데 전혀 문제가 없습니다.

그거라도 되는게 어디냐고 말할 수도 있겠지만…

지금까지 CAPTCHA 때문에 네이버가입과 카페가입에 불편을 겪어왔던 시각장애인 사용자의 입장에서 이런 상반된 보안정책을 어떻게 받아들일 수 있을까요?
몇 년간 개선을 요청해도 보안이란 이유로 요지부동이던 CAPTCHA가 플랫폼에 따라 달라질 수 있다니… CAPTCHA 의 필요성에 의문을 제기할 수 밖에 없습니다.
그리고 지금의 데스크탑 웹 보안정책에 더욱 불만이 가중될 것입니다.

회원가입의 경우는 더 황당합니다.
데스크탑 웹에서 휴대폰 인증과정을 거친 후에도 마지막 단계에서 CAPTCHA를 통해 재인증을 요구합니다. 반면 모바일 웹에서는 휴대폰인증만으로 회원가입을 완료할 수 있습니다.

사실 모바일 웹을 데스크탑 브라우저에서 사용할 수 있는 현재 상황에 상반된 CAPTCHA 정책을 있는 그대로 받아들이기는 정말 어렵습니다. “CAPTCHA는 보안을 위한 것이기 때문에 바꿀 수 없다”라는 주장은 설득력이 매우 낮습니다.

위의 지적은 결과만 바라본 것이고, 근본적인 원인은 CAPTCHA를 사용하는 보안정책에 있는 것이 아닙니다. 
가장 중요한 것은 인증과정에서 CAPTCHA를 사용할 때, 동등한 기능의 인증 대체수단을 전혀 제공하지 않고 있다는 점입니다.
장애로 인해 필수 인증과정을 수행할 수 없는 경우, 선택 가능한 대체수단을 반드시 함께 제공해야 합니다.
그렇지 않으면 해당 서비스는 전혀 이용할 수가 없습니다.

이미 2010년에 이 문제에 대해 포스팅을 했었고 (보안문자입력과웹접근성 www.haeppa.kr/39)
접근성에 관심 있는 많은 분들이 이 문제를 인지하고 있습니다.
분명 문제가 있는 것으로 알려져 있지만
아직까지 해결되지 않는 이 현실이 언제까지 지속될지…………
답답하기만 합니다.

마지막으로 CAPTCHA의 대체수단을 제공하는 myid.net도 좋은 예가 될 것 같습니다.

myid.net의 captcha는 승인메일발송을 대체수단으로 제공한다.

2012/12/20 03:48 2012/12/20 03:48
해빠 이 작성.

2011.09.29에 진행되었던 업데이트입니다.
기록으로 남기기 위해 포스팅합니다.

센스리더 일반

-엑셀 2007에서 행과 열을 전체 선택할 경우 셀 개수를 잘못 읽는 문제 수정.
-엑셀에서 조건부 서식이 지정된 셀의 서식을 정상적으로 읽지 못하던 문제 수정.
-USB 버전을 만들 때 주소록, 타자연습 등의 아이콘이 원본 상태 그대로 적용되도록 수정.

센스 독서기

-독서기 실행시 녹음 폴더 등을 체크하여 폴더가 없는 경우 자동으로 폴더를 생성하도록 수정.
-VBF 파일을 MP3 파일로 변환할 때 나타나던 오류 수정.
-HWP 파일을 읽을 때 나타나던 컨버터 오류 수정.

센스리더 인터넷

-새창에서도 문자열 다시 찾기 기능이 동작하도록 기능 보강.
-가상커서를 해제한 상태에서 플래시 개체를 정상적으로 읽지 못하던 문제 수정.
-싸이월드 1촌 목록, 멜론 등에서 클릭되지 않던 링크 동작 개선.

 

※ 센스리더의 라이센스가 없는 경우 30분 동안 데모 상태로 사용할 수 있습니다.
※ 센스리더 구입에 관한 문의는 www.xvtech.com을 참고하세요.
※ 센스리더의 음성을 이해하기 어려운 경우 인터넷뷰어(http://haeppa.kr/17)사용하실 수도 있습니다.

2012/05/29 18:39 2012/05/29 18:39
해빠 이 작성.