현재 페이지 위치

Home> 광장> 널리 블로그> 상세보기

목록이전 글 보기144/391다음 글 보기

추천하기
추천 횟수 :0
조회수
22,975
공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0

웹 개발자를 위한 센스리더 가이드

접근성

웹 접근성을 보장하고 검증하는 데 있어 가장 좋은 방법은 장애 환경을 스스로 체험해보는 것입니다.
시각 장애인이 어떤 부분에서 어떤 문제가 발생하는지 정확하게 알기 위해서는 스크린리더로 꼭 테스트 해 볼 것을 권장합니다.
하지만 막상 테스트를 하려고하면 설치부터 웹 페이지 탐색까지의 과정이 쉽지가 않습니다.
국내 시각 장애인이 가장 많이 사용하고 있는 센스리더를 기준으로 웹 개발자들에게 필요한 내용을 공유해봅니다.


설치 및 실행

  1. 엑스비전테크놀로지 자료실에서 센스리더 최신 버전을 다운 받으세요.
    라이센스가 없는 경우 데모 상태로 30분간 사용이 가능하지만 테스트에 제약이 있을 수 있으니 라이센스 구매를 권장합니다.
    센스리더 최신버전 다운받으러 가기새 창
  2. 다운받은 파일을 압축 해제한 뒤, setup.exe를 실행합니다.
  3. 안내에 따라 설치를 진행하세요. 설치 완료 후 윈도우가 다시 시작됩니다.
  4. 헤드폰 모양()의 아이콘을 클릭하거나 Ctrl + Alt + S를 눌러 센스리더를 실행합니다.

기본 환경 설정하기

음성 조절

아무런 설정을 하지 않으면 센스리더의 음성이 매우 빠르게 출력되어 인식이 어렵습니다. 초보 사용자도 쉽게 콘텐츠를 인식할 수 있도록 음성 출력 속도를 조정합니다.

  1. 시스템트레이(또는 작업표시줄)에서 헤드폰 모양()의 아이콘을 클릭하여 센스리더 메뉴를 활성시킵니다.
     
  2. 센스리더 메뉴에서 [파일] → [환경 열기]를 선택합니다.
      
  3. 환경 열기 창이 뜨면 환경 이름에 XVSRD를 입력한 후, "확인"을 선택합니다.
      
  4. 센스리더 메뉴 창의 상태 표시줄에 환경 값이 XVSRD인지 확인합니다.
    환경 값이 다를 경우, 환경 열기부터 다시 수행하고 환경 값이 같다면 [음성 설정] → [음성 출력]을 선택합니다.

  5. 음성 출력 설정 창에서 속도/높이/크기를 알맞게 조정한 뒤 "확인"을 선택합니다.

  6. 센스리더 메뉴에서 [파일] → [환경 저장]을 선택한 뒤 기본 환경 저장 확인창이 나타나면 "예"를 선택합니다.

시작프로그램 등록/해제

다음으로는 윈도우 시작 시 센스리더가 항상 실행되는 것을 원치 않을 때 필요한 설정입니다.

  1. 시스템트레이(또는 작업표시줄)에서 헤드폰 모양()의 아이콘을 클릭하여 센스리더 메뉴를 활성시킵니다.
  2. 센스리더 메뉴에서 [파일] → [시작 프로그램 등록]을 선택합니다.

  3. 시작 프로그램 설정 창이 뜨면 시작 안함 옵션을 선택 한 후 "확인"을 누릅니다.

가상커서 설정

가상커서는 웹 페이지를 문서 편집기처럼 탐색할 수 있도록 재구성하여 상/하/좌/우 방향키 등으로 이동할 때 갖게 되는 포인터 위치를 말합니다. 가상 커서 설정에 따라 음성 출력 결과가 매우 다르기 때문에 시각 장애인들의 기본 설정을 참고하는 것이 좋습니다. 가상커서는 로그인 상태에서만 진행할 수 있습니다.

  1. 센스리더에서 사용 가능한 브라우저인 인터넷 익스플로러를 실행합니다.
  2. 인터넷 익스플로러가 활성된 상태에서 Shift + Ctrl + F9를 눌러 가상 커서 설정을 실행합니다.
  3. 아래 제시된 표와 같이 가상 커서를 설정합니다. 방향키로 항목 간 이동이 가능하고 스페이스 바로 설정 값을 변경할 수 있습니다.
웹 개발자를 위한 가상 커서 설정
설정 항목설정 값설명
링크 속성 읽기 선택 방문 여부 및 메일 링크 또는 ftp 링크임을 알려줄지 결정
자동 포커스 선택 가상 커서와 화면 상의 커서를 일치시킬지 결정.
선택으로 지정하면 포커스가 닿는 순간 기능이 실행되는 경우가 있어 시각 장애인은 해제를 하고 사용하는 것이 일반적이나 접근성 테스트 시에는 포커스의 현재 위치를 쉽게 파악할 수 있어야 하므로 선택으로 설정
가상커서 시 편집창 입력 선택 가상커서 설정 상태에서 편집창 입력이 바로 가능하게 할지를 결정
이미지 읽기 모두 읽기 <img>로 마크업 된 정보를 음성 출력할지를 결정
페이지 이동 줄 25 웹 문서를 페이지 단위로 끊어 읽을 때 한 페이지에 몇 줄을 포함할지를 결정
줄 크기 100 한 줄의 최대 크기를 지정
툴팁 읽기 해제 링크 또는 이미지에 부여된 title 속성을 음성 출력할지를 결정. 링크의 텍스트나 이미지의 대체 텍스트와 중복되는 경우가 많아 해제하고 사용하는 것이 일반적임
숨긴 내용 읽기 해제 display:none 스타일이 적용된 콘텐츠를 음성 출력할지를 결정. 센스리더 설치 시 기본 설정은 선택이나 불필요한 콘텐츠가 많아 해제하고 사용하는 것이 일반적임
새 페이지 자동 읽기 해제 새로 열린 페이지의 콘텐츠를 자동으로 읽을지를 결정
단축키 읽기 선택 accesskey 속성이 선언되었을 경우 단축키가 있다는 것을 알려줄지를 결정
생략어, 두문자어 읽기 해제 <abbr>, <acronym>으로 마크업 된 정보를  생략어, 두문자어로 음성 출력할지를 결정. 사용자 기호에 따라 설정 값이 다름
생력어, 두문자어 설명 읽기 해제 <abbr>, <acronym>title 속성으로 제공된 전체 내용을 음성 출력할지를 결정. 사용자 기호에 따라 설정 값이 다름
외부 개체 시작, 끝 읽기 선택 플래시나 미디어 플레이어 등에 접근 시 알려줄지를 결정
폼 시작, 끝 읽기 선택 <form>으로 마크업 된 정보를 폼으로 음성 출력할지를 결정
필드셋 시작, 끝 읽기 선택 <fieldset>으로 마크업 된 정보를 필드셋으로 음성 출력할지를 결정
헤딩 읽기 선택 헤딩 요소(<h1>~<h6>)로 마크업 된 정보를 헤딩으로 음성 출력할지를 결정
언어 변경 시 엔진 변경 해제 lang 속성이 적용된 경우 속성값의 언어에 맞은 음성 엔진으로 변경하여 음성 출력할지를 결정. 문서 내에서 lang 속성이 변경되는 경우가 거의 없으므로 해제하는 것이 기본적이며, lang 속성 테스트 시 선택할 것을 권장
언어 변경 시작, 끝 읽기 해제 lang 속성이 변경된 지점을 알려줄지를 결정
목록 시작, 끝 읽기 선택 <ol>, <ul>, <dl>로 마크업 된 정보를 목록으로 음성 출력할지를 결정
이미지 설명 읽기 선택 이미지에 longdesc 속성으로 긴 설명이 제공된 경우 '설명 있음'으로 알려줄지를 결정
표 시작, 끝 읽기 선택 <table>로 마크업 된 정보를 테이블로 음성 출력할지를 결정
셀 주소 읽기 읽지 않기 테이블 모드에서 셀 이동 시 현재 위치가 몇 행, 몇 열인지 음성 출력할지를 결정.
사용자 기호에 따라 설정 값이 다르며, 읽지 않더라도 정보 인식에 큰 문제 없음
미디어 객체 읽기 선택 윈도우 미디어 플레이어 컨트롤(되감기, 일시 정지, 볼륨 조절)을 음성 출력할지를 결정
새 창 링크 읽기 선택 링크의 target 속성이 blank로 지정되었을 때 새 창이라고 알려줄지 결정
변경 내용 자동 구성 선택 콘텐츠가 자동으로 변경된 경우,  반영할지를 결정
숨긴 콘트롤 알림 해제 disabled로 지정된 콘트롤을 사용불가로 음성 출력할지를 결정. 사용자 기도에 따라 설정 값이 다름
미디어 이동 시간 3초 윈도우 미디어 플레이어에서 되감기/빨리 감기의 이동 간격을 결정

키보드 명령어

센스리더는 효율적인 웹 탐색을 위해 상/하/좌/우 방향키 외에도 다양한 키보드 명령을 제공하고 있습니다. 아래는 접근성 테스트에 유용하게 사용되는 센스리더의 주요 키보드 명령어 목록입니다.

프로그램 실행/종료 키
설명입력 키
프로그램 실행Ctrl + Alt + S
프로그램 종료Insert + F4
웹 페이지 기본 탐색 키
설명입력 키
문서 제목 읽기Ctrl + Shift + T
문서 처음으로Ctrl + Home
문서 끝으로Ctrl + End
이전 줄로
다음 줄로
현재 줄 읽기Ctrl + Shift + I
이전 단어로Ctrl + ←
다음 단어로Ctrl + →
현재 단어 읽기Ctrl + Shift + K
이전 글자로
다음 글자로
현재 글자 읽기Ctrl + Shift + , (Comma)
연속 읽기Ctrl + F11
요소별 탐색 키
설명입력 키
다음 헤딩Ctrl + F6
이전 헤딩Ctrl + Shift + F6
다음 목록Ctrl + I
이전 목록Ctrl + K
다음 테이블Ctrl + F3
이전 테이블Ctrl + Shift + F3
다음 링크Ctrl + ' (Apostrophe)
이전 링크Ctrl + Shift + ' (Apostrophe)
다음 방문한 링크Ctrl + ; (Semi Colon)
이전 방문한 링크Ctrl + Shift + ; (Semi Colon)
링크만 따로 보기Ctrl + L
다음 링크가 아닌 텍스트Ctrl + F4
이전 링크가 아닌 텍스트Ctrl + Shift + F4
다음 폼 콘트롤 요소Ctrl + F2
이전 폼 콘트롤 요소Ctrl + Shift + F2
다음 편집창Ctrl + F8(F2)
이전 편집창Ctrl + Shift + F8(F2)
다음 버튼Ctrl + F2
이전 버튼Ctrl + Shift + F2
다음 체크박스Ctrl + F2
이전 체크박스Ctrl + Shift + F2
다음 라디오버튼Ctrl + F2
이전 라디오버튼Ctrl + Shift + F2
다음 콤보박스Ctrl + F2
이전 콤보박스Ctrl + Shift + F2
다음 프레임Ctrl + Tab
이전 프레임Ctrl + Shift + Tab
프레임만 따로 보기Alt + Shift + W
테이블 모드 탐색 키
설명입력 키
테이블 모드 선택Ctrl + T
테이블 모드 해제Ctrl + U
윗 셀로 이동Ctrl + Alt + ↑
아래 셀로 이동Ctrl + Alt + ↓
왼쪽 셀로 이동Ctrl + Alt + ←
오른쪽 셀로 이동Ctrl + Alt + →
현재 위치 읽기Ctrl + Alt + Enter
현재 행 첫 셀로 이동Ctrl + Alt + Home
현재 행 마지막 셀로 이동Ctrl + Alt + End
현재 열 첫 셀로 이동Ctrl + Alt + PgUp
현재 열 마지막 셀로 이동Ctrl + Alt + PgDn
폼 모드 탐색 키
설명입력 키
체크박스 선택 해제Spacebar
라디오버튼 선택 해제Spacebar
콤보박스 목록 선택 Ctrl + ↑ / Ctrl + ↓

참고 사이트

이 글은 위의 두 사이트 외에도 엔비전스새 창 웹 팀의 도움을 받아 작성되었습니다.

Nts Nuli님 프로필

회원 등급 : 7

Nts Nuli

널리 관리자입니다.

1개56개

댓글보기

전체 댓글
0
로그인

댓글이 없습니다.

목록이전 글 보기144/391다음 글 보기

공유하기
페이스북으로 공유하기페이스북 공유 횟수 :0트위터로 공유하기트위터 공유 횟수 :0