« Prev : 1 : 2 : 3 : 4 : 5 : ... 10 : Next »

이 문서에서 Sitecues를 리뷰하는 것은 글꼴크기 조절, 혹은 확대기능이 제공되는 서비스에서 저시력 사용자에게 보다 나은 경험을 제공할 수 있는 방법을 찾아보기 위함이다.
Sitecues의 “도구모음 패널 확장”, “세밀한 배율조절”, “마우스포인터 확대”, “좌우스크롤”, “음성낭독” 등의 기능에서 모티브를 얻어 국내 웹서비스의 접근성이 조금이나마 더 개선되기를 기대한다.

 

A. Sitecues가 무엇일까?

Ai squrared 사에서 서비스하는 웹페이지 플러그인 서비스. 
Zoomtext 개발사로서 보유한 노하우를 바탕으로 저시력 사용자를 위한 확대기능과 음성낭독 기능을 제공한다.
웹페이지에 도구모음을 삽입하고 JavaScript library를 다운로드 받아 동작합니다. 

주요기능

  • 웹페이지 확대/축소 (슬라이드바로 조절)
  • 마우스포인터 확대/축소
  • 마우스를 이용한 가로스크롤
  • 텍스트 음성낭독
  • 설정내용 저장

URL : http://www.sitecues.com

 

B. Sitecues 기능의 특징


1. 도구모음에 마우스를 오버하면 영역이 확대되면서 조작이 쉬워진다.

기존 사이트의 확대 기능은 일반적인 크기/디자인의 버튼을 사용하기 때문에 저시력 사용자가 버튼의 위치를 찾기 어렵고, 클릭 등의 동작을 수행하기 수월하지 않았다.
하지만 Sitecues 서비스의 경우 도구모음 영역에 마우스포인터를 올리면 해당 도구모음의 크기가 확장되면서 확대 기능을 쉽게 인지하고 보다 쉽게 마우스로 도구모음을 조작하는 것이 가능하다.

* 기본화면에서 도구모음은 별다른 특징을 찾아볼 수 없다.
도구모음 기본

* 도구모음 영역에 마우스 포인터를 올리면 아래 이미지와 같이 도구모음 영역이 크게 확대되면서 인식이 용이하다.
도구모음 확대


2. 슬라이드바를 좌,우로 움직이면 확대배율이 조절되고, 세밀한 조절이 가능하다.

일반적으로 글꼴의 크기를 조절할 때는 확대/축소 버튼을 눌러서 단계적으로 크기를 조절한다. 이 경우 자신의 시력정도에 따라 적절한 크기를 정확히 선택하는 것이 쉽지 않다.
Sitecues의 서비스는 슬라이드바를 활용해서 단계별 조절이 아닌 세밀한 조절이 가능하다. 사용자가 자신의 시력에 따라 알맞은 크기로 조절하는 것이 가능하다. 

* 기존 미디어 다음의 글꼴 크기는 + / - 버튼을 눌러서 5단계로 조절된다.
미디어다음크기조절~

* sitecues 서비스의 확대기능은 슬라이드바를 이용해서 세밀한 조절이 가능하다.
도구모음 확대~


3. 배율에 따라 마우스포인터의 크기가 확대/축소 된다.

저시력 사용자가 컴퓨터를 이용할 때 어려워하는 부분중의 하나가 마우스 포인터의 위치를 인지하는 것이다. 마우스 포인터의 크기가 작고 배경색과 비슷한 경우가 많다보니 포인터의 위치를 찾지못해 컴퓨터 사용에 어려움을 겪는 일이 자주 발생한다. 웹사이트의 확대기능은 화면이 확대되더라도 마우스포인터의 크기는 확대되지 않기 때문이다.
Sitecues 서비스는 화면의 확대배율이 높아짐에 따라 마우스 포인터의 크기도 함께 크게 확장시킴으로서 저시력 사용자가 확대된 화면안에서 마우스포인터를 찾지 못해 헤매는 일을 방지하는데 도움을 준다. 

* 확대기능을 사용하지 않았을 때의 기본 마우스 포인터 크기
마우스포인터 기본~1

* 확대기능을 최대로 사용했을 때 확대된 마우스 포인터 크기
마우스포인터-확대~2


4. 웹페이지를 확대했을 때 생기는 가로스크롤 이슈를 마우스 포인터의 이동으로 해결

브라우저에서 제공하는 확대기능을 사용하면 가로 스크롤이 생기는데, 이때 스크롤바를 이용해서 화면 밖의 콘텐츠를 좌, 우로 이동하면서 탐색해야 하기 때문에 사용이 매우 불편하다. (상/하 스크롤은 마우스 휠 사용으로 불편하지 않음)
Sitecues의 서비스는 화면의 양쪽 끝에 좌/우 스크롤 영역을 지정하고 이 영역에 마우스가 진입하면 좌/우 스크롤 동작을 실행한다. 이 기능으로 좌/우 스크롤로 인한 불편을 크게 해소되었다. 

* 브라우저의 기본 확대기능 사용시 좌/우 스크롤바가 생겨서 화면을 탐색하는 것이 매우 불편하다.
브라우저확대기능가로스크롤~

* sitecues 서비스는 가로스크롤이 생기더라도 좌/우 끝 부분을 스크롤영역으로 지정해서 마우스 오버만으로 좌/우 화면이동이 가능하다.
마우스오버pan~


5. 음성낭독기능

저시력 사용자가 글자를 읽을 수는 있지만 장문의 글을 읽어야할 때 눈으로 읽는 것에 많은 부담을 느낀다. 이 때문에 저시력 사용자 중 일부는 화면낭독 프로그램을 함께 사용하기도 한다. 웹사이트에서 본문 영역을 음성으로 들을 수 있게 된다면 눈을 많이 사용하지 않아 피로도를 낮출 수 있기 때문에 저시력 사용자에게 도움이 될 수 있다.
음성낭독 기능을 켠 후 듣고자하는 텍스트에 마우스를 포인터를 올려놓고 스페이스바를 누르면 해당 텍스트에 대한 음성출력이 진행된다. 

* 음성 낭독을 원하는 영역에 마우스를 오버해서 박스표시가 되었을 때 스페이스바를 누른다. 
sppech~1

* 음성낭독이 동작하면서 아래 이미지와 같이 텍스트를 확대하여 부각시킨다. 
sppech~2

※ 한국어 미지원
※ 음성낭독기능은 텍스트 정보를 TTS 서버에 보낸 후 오디오파일을 전송받아 재생하는 형태로 구동된다. 이 때 모든 통신은 암호화되며 어떤 정보도 저장하지 않는다고 한다.


6. 기타

  • js는 텍스트,css 등을 모두 로딩한 후 마지막에 로딩해서 사이트의 로딩속도 이슈는 감쇠될 수 있다.
  • 쿠키에 도구모음을 사용한 기록을 저장해서 재방문시 동일 설정이 복원되어 이용할 수 있다.

in the Future

  • 2014년 2분기 터치기능 지원예정
  • 고대비 모드 지원 준비중
  • 향후 브라우저 추가기능이나 별도의 툴로 제공할 예정

지원 환경

확대기능과 음성낭독 기능은 html 문서만 지원한다.
flash는 전체를 한 번에 음성출력하는 것은 가능하나, pdf는 현재 지원하지 않는다. 

지원브라우저

  • internet Explorer 9 +
  • Chrome
  • Firefox

2014/08/27 01:22 2014/08/27 01:22
해빠 이 작성.

화면낭독기와 링크의 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
해빠 이 작성.

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

연두군! 앱스토어의 이름하고 설치된 앱의 이름이 너무 달라서 못 찾을 때가 있다고~~

이 말을 듣고 아이폰의 앱 이름을 살펴보니 보다 심각한 문제가 있었다.

앱 이름만 봐서는 어느 앱인지 알 수가 없자나!

 

앱 이름을 살펴보자

iOS용 뱅킹앱을 마구 설치해서 살펴보니 어느 은행의 앱인지 조차 알 수 없는 앱이 있다는 것을 발견했다.

아이폰의 뱅킹앱 아이콘 목록20개, 자세한내용은 다음 표 참조 
아이폰 뱅킹앱 20개 앱이름
은행명 아이콘 이름
KB국민은행 KB스타뱅킹
신한은행 신한S뱅크
하나은행 하나N Bank
NH농협 NH 뱅킹
우체국 스마트뱅킹
우리은행 원터치 개인
IBK기업은행 ONE뱅킹개인
SC제일은행 Breeze뱅킹
KEB외환은행 스마트뱅크
KDB산업은행 스마트KDB
씨티은행 씨티모바일
수협 수협 Bank
신협 신협S뱅킹
새마을금고 MG새마을금고
광주은행 광주S뱅킹
대구은행 스마트뱅크
부산은행 스마트뱅크
제주은행 스마트뱅킹
경남은행 스마트뱅킹
전북은행 전북M뱅크

앱 이름에 은행이 없다!

기본적으로 은행의 뱅킹앱이면 당연히 은행이름이나 이니셜이 들어갈 것으로 생각한다. 하지만 앱 이름을 유심히 살펴보면 몇몇 앱은 은행 이름이나 이니셜이 전혀 들어가지 않았다. 아이콘에는 떡하니 은행이름이 들어있지만 텍스트로는 표기되지 않은 것이다.


우체국
스마트뱅킹
우리은행
원터치 개인
IBK기업은행
ONE뱅킹개인
SC제일은행
Breeze뱅킹
KEB외환은행
스마트뱅크
대구은행
스마트뱅크
부산은행
스마트뱅크
제주은행
스마트뱅킹
경남은행
스마트뱅킹

시각장애인 사용자는 보이스오버를 통해 앱 이름만 음성으로 듣기 때문에 도대체 어느 은행의 앱인지 도저히 알 수 없다.
아이콘의 정보가 시각장애인에게는 무용지물이까...

심지어 우리은행은 앱 이름이 “원터치 개인”이다. 은행 혹은 뱅킹이란 단어 조차 사용하지 않았다.
무슨 배짱일까…

 

스마트뱅킹? 스마트뱅크?

단순히 은행 이름이 표기되지 않아 어느 은행의 앱인지 알 수 없는 것 뿐 아니라 매우 유사하거나 동일한 앱이름을 사용하고 있어 보이스오버의 음성만 들었을 때는 도저히 앱을 구분하는 것이 불가능한 경우도 있다.

우체국
스마트뱅킹
KEB외환은행
스마트뱅크
대구은행
스마트뱅크
부산은행
스마트뱅크
제주은행
스마트뱅킹
경남은행
스마트뱅킹

 

접근성의 기본을 생각해서…

앱이름에 은행을 구분할 수 있는 명칭이 포함되지 않은 이유를 어렴풋이 짐작할 수도 있을 것 같다. 시각적인 정보만을 기준으로 본다면 아이콘에 은행이름이 표시되고 있으니 앱 이름은 어쩌면 부가적인 의미로 활용될 수도 있을 것 같다.

하지만 시각장애인은 아이콘 “이미지”에 포함된 정보를 전혀 인지할 수 없기 때문에 문제가 발생한다. 우리가 웹접근성을 고려할 때 의미를 가지는 아이콘은 대체텍스트를 제공하는 것과 마찬가지로 앱에서도 아이콘이 담은 의미가 있다면 앱 이름에 동일한 정보를 제공해야하지 않을까?

앱 이름에 앱을 구분할 수 있는 고유의 정보로 매우 유니크한 문구를 사용한다면 음성정보로만 앱 목록에 접근할 수 있는 시각장애인 사용자도 앱의 명칭을 동등한 수준에서 인지하고 구분할 수 있을 것이라 기대한다.

신기한건~ 뱅킹 앱 이름에는 유독 “스마트”란 단어가 많이 사용되드라. 
앱 이름은 썩 그렇게 스마트하지 않더만… 쩝…

 

추가로 카드사 앱을 보니…

아이폰의 카드사앱 아이콘 목록11개, 자세한내용은 다음 표 참조
아이폰 카드사앱 11개 앱이름
카드사 아이콘 이름
KB국민카드 KB국민카드
신한카드 Smart신한
하나SK카드 카드서비스
NH농협카드 NH농협카드
BC카드 비씨카드
우리카드 우리카드
외환카드 Smart외환카드
현대카드 현대카드
롯데카드 스마트롯데
삼성카드 삼성카드
씨티카드 씨티카드앱

하나SK카드의 앱 이름은 [카드서비스]였다.

2014/06/29 05:07 2014/06/29 05:07
해빠 이 작성.

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

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

프로글매 메인화면 minitool partition wizard home edition

파티션 관리 툴입니다.
윈도우 7 디스크관리자에서 기본으로 파티션 관리 기능을 제공하고 있지만 기능이 많이 미흡하죠?
예전에는 Partition Magic라는 프로그램을 참 많이 사용했는데 요즘엔 이 프로그램을 애용하고 있습니다.
파티션 생성, 삭제, 분할, 병합, 이동, 복구 등의 기능을 매우 편리하게 사용할 수 있구요 윈도우XP, VISTA, 7, 8까지 모든 버전을 지원하고 있어요. 게다가 개인사용자에게는 Home Edition을 무료로 제공하고 있습니다.

 

다운로드와 사용방법

minitool Partion Wizard 홈페이지로 이동 : http://www.partitionwizard.com/download.html
해빠의 다운로드 : http://goo.gl/0LjbnV
사용방법 파티션 분할 : http://qkrtmdqo2003.blog.me/150109430203
사용방법 파티션 복구 : http://cappleblog.co.kr/578

2014/06/07 00:47 2014/06/07 00:47
해빠 이 작성.

웹 접근성에 관심을 가지고 가장 처음 접하게 되는 정보 중 하나가 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
해빠 이 작성.

웹접근성과 품질인증 책표지

웹 접근성과 관련된 일을 하다보니 어찌어찌해서 책을 출판하게 되었어요~!
책을 준비한 기간은 1년 남짓~
1년이란 준비기간은 좋은 분들과 함께한 오래 기억에 남을 시간들이었어요. ^^
글을 쓰는 동안엔 미처 느끼지 못했는데 막상 출판되고 책을 받아보니 매우 민망하고 부끄럽고 그렇습니다. ㅎㅎ

책의 제목은 “웹접근성과 품질인증” 이에요.
품질인증이라는 이슈에 대응하기에는 다소 늦은 감이 있지만 지침에 대한 설명과 사례, 구현방법, 난제해결, 직군의 역할분담, 각종 노하우, 품질인증제도 싱세, 접근성 평가방법, 화면낭독기에 대한 상세설명까지 웹 접근성을 총 망라하는 매우 폭넓은 내용으로 구성되어 있어요.

전반적으로 좋은 내용을 담고 애정을 갖고 준비한 내용이지만 제가 전담하고 가장 중점을 두었던 꼭지는 화면낭독기에 관한 내용이니까 살짝 소개를 하자면요~

화면낭독기 쪽에서는 국내에서 사용할 수 있는 화면낭독기들을 찾아보고 비교를 해봤어요.
각 요소에 대한 화면낭독기의 반응과 구현 방법의 차이에 다른 화면낭독기의 음성출력 차이를 비교/분석했구요. 화면낭독기마다 서로 다른 기능키와 운용방법에 대한 설명도 담고 있어서 구축한 사이트를 직접 평가해보고자 하는 사람에게도 유용할 것 같아요.
헤헤~ ^^*

책에 대한 자세한 정보는 책 파는 사이트에 가보시면 보실 수 있어요.
가격이 다소 비싸지만 그만큼 엄청나게 무거운 책이에요. 
840쪽이나 되다보니 한 권의 무게가 무려 1624g!!
왠만한 노트북만큼 무겁지요 ;;;;

책에 대한 정보는 네이버 책에서~~
http://book.naver.com/bookdb/book_detail.nhn?bid=7398412

리뷰도 있네요~ ㅎㅎ
http://messinger00.blog.me/130186154988

 

끝~~~

2014/01/23 01:29 2014/01/23 01:29
해빠 이 작성.

« Prev : 1 : 2 : 3 : 4 : 5 : ... 10 : Next »