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

Trackback URL : http://www.haeppa.kr/trackback/120

Trackback RSS : http://www.haeppa.kr/rss/trackback/120

Trackback ATOM : http://www.haeppa.kr/atom/trackback/120


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

[로그인][오픈아이디란?]
: 1 : ... 16 : 17 : 18 : 19 : 20 : 21 : 22 : 23 : 24 : ... 117 :