아티클

OS X 보이스오버로 웹페이지 탐색 및 접근성 테스트하기

2016-04-26 10:26:53

안녕하세요, 엔비전스입니다.


이번에 저희가 준비한 주제는 애플 OS X 운영체제의 스크린리더인 보이스오버(VoiceOver)를 사용하여 웹 페이지를 탐색하는 방법입니다. 이번 주제의 내용이 VoiceOver로 웹 페이지를 탐색하는 방법뿐만 아니라 OSX에서의 웹 페이지 접근성을 진단하는 데에 도움이 될 수 있으리라 생각합니다. 해당 내용은 총 두 개의 글로 나누어 작성됩니다. 첫 번째 글은 보이스오버의 기본 사용 개념을, 두 번째에서는 웹에서의 여러 요소를 탐색할 때 사용되는 보이스오버의 기능 혹은 특징에 대해 살펴보겠습니다.


1. 이 글은 보이스오버로 웹페이지를 탐색할 때 알아 두어야 하는 최소한의 기능에 대해 설명하는 글이므로 보이스오버에 대한 기본적인 안내는 포함되어 있지 않습니다. 전반적인 사용 방법에 대해서는 여기를 참고해 주십시오.


2. 2016년 4월 현재 최신 운영체제인 El Capitan을 중심으로 작성되었습니다.


3. 보이스오버는 OS X 용 오페라, 크롬 등에서도 어느 정도 웹페이지 사용은 가능하지만 기본 브라우저인 사파리에서 접근성 기능을 가장 많이 지원하므로 사파리를 기준으로 하여 설명합니다.


4. 보이스오버 시작과 종료는 command + F5 번키로 할 수 있습니다. 참고로 보이스오버는 별도의 설치형 프로그램이 아니라 OS X 운영체제에 기본 포함된 스크린리더이기 때문에 실행과 종료가 빠르고 작업에 딜레이를 많이 주지 않습니다.


보이스오버키

스크린리더는 화면에 표시된 다양한 형태의 정보를 탐색할 수 있도록 많은 단축키 들을 제공합니다. 보이스오버의 단축키는 대개 Caps lock 혹은 Control + Option키를 기반으로 특정 키를 조합하는 방식인데 이때의 Caps lock 혹은 Control + Option 키를 보이스오버 키라고 부릅니다. 이 글에서는 보이스오버 키를 Vo key로 표시하겠습니다. 보이스오버 키는 보이스오버유틸리티(Voice Over Key + F8) > 일반에서 Caps lock 키와 Control + Option 키 중 하나를 선택하여 설정할 수 있습니다.


보이스오버 음성출력내용을 화면으로 보기

스크린리더 사용에 익숙지 않은 분들은 청각만으로는 스크린리더의 음성 출력 내용을 정확히 이해하기 어렵습니다. 이때 보이스오버에서 제공하는 자막 패널 기능을 사용하면 음성 출력하는 모든 내용을 화면에 표시하기 때문에 음성 출력 정보를 시각으로도 확인할 수 있습니다. 보이스오버유틸리티 > 시각 정보 > 자막 패널을 선택하십시오.


힌트 메시지 켜기

위에 서술했듯이 보이스오버에는 여러 단축키가 있으며 탐색하는 객체의 종류에 따라 실행하는 보이스오버의 기능 단축키가 몇 가지 있습니다. 보이스오버에 익숙하지 않은 사용자들은 이러한 기능을 알지 못할 수 있는데, 보이스오버유틸리티 > 말수 > 힌트 탭에서 보이스오버 커서에 있는 항목의 지침 말하기를 선택하면 수행할 수 있는 기능과 단축키를 힌트 메시지로 알려줍니다.


콘텐츠 읽기 기본명령

보이스오버를 처음 사용하면 속도 조절이나 기본 읽기 명령에 대한 숙지가 필요합니다. 아래는 기본적인 명령 리스트 및 단축키를 정리했습니다.


1. Vo key + a: 보이스오버 커서가 현재 위치한 곳부터 연속하여 콘텐츠를 읽습니다. 컨트롤 키를 한번 누르면 연속 읽기를 일시 정지하며, 다시 누르면 정지한 위치부터 읽기를 재개합니다. 컨트롤키 외의 다른 키를 누르면 연속 읽기가 모두 중단됩니다.


2. Vo key + 왼쪽·오른쪽 화살표: 이전·다음 항목을 읽습니다. 여기서 말하는 항목이란 스크린리더의 보이스오버 커서 초점이 이동하는 요소를 말합니다. 즉 탭 키 등을 눌러 포커스가 되지 않는 요소인 경우에도 스크린리더에서 인식 가능한 텍스트인 경우 초점이 가게 됩니다.


3. Vo key + command + 왼쪽·오른쪽 호살표: 음성 속도, 고저, 음성 엔진선택 등의 음성출력 옵션을 조절합니다.


4. Vo key + command + 위·아래 화살표: 선택된 음성 옵션의 값을 조절합니다. 예를 들어 음성출력 옵션이 속도로 되어 있다면 속도의 값을 조절합니다.


특정 요소로 바로가기 기능에 관하여

윈도우의 스크린리더와 마찬가지로 보이스오버 역시 웹페이지에서의 여러 요소들 중 링크, 헤딩과 같은 특정 요소로 바로 가기 기능을 제공합니다. 이것을 스크린리더의 공통적 용어로 빠른 탐색 키라고 부릅니다. 보이스오버에서 특정 요소로 바로 가는 방법은 다음과 같습니다.


1. Voice Over key + command + 영문 첫자: 만약 현재 위치에서 다음 헤딩으로 이동하고 싶다면 Voice Over key + command + h를 누르면 됩니다.


2. 빠른 탐색을 활성화한 경우 영문 첫 글자: 보이스오버유틸리티 > 명령자 > 빠른 탐색 탭에서 ‘빠른 탐색 활성화 시 단일키 웹페이지 탐색 활성화’가 체크된 경우에는 Voice Over key + command 키를 누르지 않고 빠른 탐색키를 활성화 하여 단일글자만 눌러 요소 탐색이 가능합니다. 이 경우 편집 영역 등에서 내용을 입력하려면 빠른 탐색을 해제해야 합니다. 여기서 빠른 탐색이란 보이스오버키 없이 왼쪽·오른쪽 등의 화살표를 눌러 화면을 탐색할 수 있는 기능을 말하며 좌·우 화살표를 동시에 눌러 온오프할 수 있습니다. Shift + 첫 글자를 누르면 이전 요소로 이동합니다.


3. 로터 이용: 아이폰의 보이스오버와 마찬가지로 스크린리더와 유사한 빠른 탐색키 외에도 빠른 탐색 모드를 활성화하면 로터를 이용하여 웹 페이지의 특정 요소로 바로 갈 수 있습니다.


① 이전 로터 혹은 다음 로터를 활성화하려면 왼쪽·위쪽 화살표, 혹은 오른쪽·위쪽 화살표를 이용합니다.


② Voice Over key + u를 누르면 웹로터 메뉴가 열리면서 로터를 리스트 형식으로 선택이 가능합니다. 왼쪽·오른쪽 화살표는 로터의 요소를 변경하고 위·아래 화살표는 변경된 요소의 리스트를 나타냅니다. 만약 요소를 링크로 맞추고 위·아래 방향키로 특정 링크를 찾아 엔터를 누르면 웹 로터 메뉴는 닫히면서 포커스는 선택한 링크에 위치하게 됩니다. 또한 웹로터 메뉴에서 임의의 알파벳을 누르면 해당 알파벳이 포함된 항목으로 이동합니다(한글은 지원 안 됨).


③ 로터를 활성화 한 다음 활성화된 요소 단위로 이동할 때는 위쪽 혹은 아래쪽 화살표를 사용합니다. 예를 들어 로터를 머리말(헤딩)으로 맞추어 놓았다면 위·아래 화살표는 이전·다음 헤딩으로 이동합니다.


④ 웹페이지의 페이지 구성에 따라 로터의 항목이 달라집니다. 예를 들어 특정 웹페이지에 헤딩이 없다면 로터 항목에 헤딩이 포함되지 않습니다.


⑤ 보이스오버유틸리티 > 웹 > 웹로터 메뉴에서는 로터에 표시할 요소를 선택할 수 있습니다. 예를 들어 링크를 해제하였다면 페이지 로드 시 링크가 있다 하더라도 로터 항목에 링크는 포함되지 않습니다.


대화식 기능 동작 관련

보이스오버 환경설정을 변경하지 않았다면 웹페이지 탐색 시 그룹(fieldset)이나 테이블과 같은 요소는 하나의 상위 객체로만 처리하기에 대화식 기능사용(Vo key + shift + 아래쪽 화살표, 빠른 탐색 모드를 활성화한 경우 오른쪽 + 아래쪽 화살표)를 눌러야 해당 객체에 속하는 하위 콘텐츠를 확인할 수 있습니다. 다시 상위 객체로 돌아오려면 대화식 기능 사용 중단(Vo key + shift + 위쪽화살표, 빠른 탐색모드 사용 시 왼쪽 + 아래쪽 화살표)키를 눌러주면 됩니다. 만약 이 작업이 번거롭고 모든 콘텐츠를 수평적으로 탐색 하고싶다면 보이스오버유틸리티 > 탐색에서 그룹 짓기를 ‘그룹 무시’로 설정하면 됩니다.


보이스오버의 웹 페이지 빠른 탐색키 리스트

아래는 보이스오버에서 제공하는 보이스오버의 빠른 탐색키 목록입니다.


1. L: 다음 링크로 이동


2. H: 헤딩


3. J: 버튼, 편집창과 같은 폼 컨트롤


4. T: 테이블


5. X: 목록, x는 다른 요소와 달리 x키를 눌러도 목록에 진입했음을 읽어주지 않습니다. 오른쪽 화살표(빠른 탐색 키가 활성화되지 않은 경우 vo key + 오른쪽 화살표)를 누르면 첫 항목을 들을 수 있습니다.


6. G: 그래픽 요소


지금까지 웹 탐색 시 참고할 수 있는 보이스오버 개념 및 단축키에 대해 알아보았습니다. 2부에서 계속 이어집니다.

댓글 0
댓글을 작성하려면 해주세요.