웹 개발자를 위한 센스리더 가이드
웹 접근성을 보장하고 검증하는 데 있어 가장 좋은 방법은 장애 환경을 스스로 체험해보는 것입니다.
시각 장애인이 어떤 부분에서 어떤 문제가 발생하는지 정확하게 알기 위해서는 스크린리더로 꼭 테스트 해 볼 것을 권장합니다.
하지만 막상 테스트를 하려고하면 설치부터 웹 페이지 탐색까지의 과정이 쉽지가 않습니다.
국내 시각 장애인이 가장 많이 사용하고 있는 센스리더를 기준으로 웹 개발자들에게 필요한 내용을 공유해봅니다.
설치 및 실행
- 엑스비전테크놀로지 자료실에서 센스리더 최신 버전을 다운 받으세요.
라이센스가 없는 경우 데모 상태로 30분간 사용이 가능하지만 테스트에 제약이 있을 수 있으니 라이센스 구매를 권장합니다.
센스리더 최신버전 다운받으러 가기 - 다운받은 파일을 압축 해제한 뒤, setup.exe를 실행합니다.
- 안내에 따라 설치를 진행하세요. 설치 완료 후 윈도우가 다시 시작됩니다.
- 헤드폰 모양()의 아이콘을 클릭하거나 Ctrl + Alt + S를 눌러 센스리더를 실행합니다.
기본 환경 설정하기
음성 조절
아무런 설정을 하지 않으면 센스리더의 음성이 매우 빠르게 출력되어 인식이 어렵습니다. 초보 사용자도 쉽게 콘텐츠를 인식할 수 있도록 음성 출력 속도를 조정합니다.
- 시스템트레이(또는 작업표시줄)에서 헤드폰 모양()의 아이콘을 클릭하여 센스리더 메뉴를 활성시킵니다.
- 센스리더 메뉴에서 [파일] → [환경 열기]를 선택합니다.
- 환경 열기 창이 뜨면 환경 이름에 XVSRD를 입력한 후, "확인"을 선택합니다.
- 센스리더 메뉴 창의 상태 표시줄에 환경 값이 XVSRD인지 확인합니다.
환경 값이 다를 경우, 환경 열기부터 다시 수행하고 환경 값이 같다면 [음성 설정] → [음성 출력]을 선택합니다.
- 음성 출력 설정 창에서 속도/높이/크기를 알맞게 조정한 뒤 "확인"을 선택합니다.
- 센스리더 메뉴에서 [파일] → [환경 저장]을 선택한 뒤 기본 환경 저장 확인창이 나타나면 "예"를 선택합니다.
시작프로그램 등록/해제
다음으로는 윈도우 시작 시 센스리더가 항상 실행되는 것을 원치 않을 때 필요한 설정입니다.
- 시스템트레이(또는 작업표시줄)에서 헤드폰 모양()의 아이콘을 클릭하여 센스리더 메뉴를 활성시킵니다.
- 센스리더 메뉴에서 [파일] → [시작 프로그램 등록]을 선택합니다.
- 시작 프로그램 설정 창이 뜨면 시작 안함 옵션을 선택 한 후 "확인"을 누릅니다.
가상커서 설정
가상커서는 웹 페이지를 문서 편집기처럼 탐색할 수 있도록 재구성하여 상/하/좌/우 방향키 등으로 이동할 때 갖게 되는 포인터 위치를 말합니다. 가상 커서 설정에 따라 음성 출력 결과가 매우 다르기 때문에 시각 장애인들의 기본 설정을 참고하는 것이 좋습니다. 가상커서는 로그인 상태에서만 진행할 수 있습니다.
- 센스리더에서 사용 가능한 브라우저인 인터넷 익스플로러를 실행합니다.
- 인터넷 익스플로러가 활성된 상태에서 Shift + Ctrl + F9를 눌러 가상 커서 설정을 실행합니다.
- 아래 제시된 표와 같이 가상 커서를 설정합니다. 방향키로 항목 간 이동이 가능하고 스페이스 바로 설정 값을 변경할 수 있습니다.
설정 항목 | 설정 값 | 설명 |
---|---|---|
링크 속성 읽기 | 선택 | 방문 여부 및 메일 링크 또는 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 + ↓ |
참고 사이트
이 글은 위의 두 사이트 외에도 엔비전스 웹 팀의 도움을 받아 작성되었습니다.