널리

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

[OS X 보이스오버로 웹페이지 사용하기 1부] 에서는 보이스오버의 기본 개념과 웹페이지 탐색시 주요 단축키에 대해 살펴보았습니다.

이번 글에서는 웹페이지 탐색을 위해 보이스오버에서 제공하는 유용한 고급 기능과 개념에 대해 안내해 드리도록 하겠습니다. 그리고 html의 주요한 요소를 보이스오버가 처리하여 출력하는 방식, 그 과정에서 알아 두어야 할 특징을 설명드리겠습니다.

1. WAI-ARIA 보이스오버 지원 부분은 이 아티클에서는 포함하고 있지 않습니다.

2. 1부에서 이어지는 글이므로 반드시 1부 아티클 또한 참고해 주시기 바랍니다.

가상커서와 캐럿브라우징

보이스오버는 [1부]에서 설명한 빠른탐색키를 on/off함에 따라 웹페이지를 탐색하는 방식이 달라집니다.

1. 빠른 탐색키를 온으로 설정한 경우 좌우 화살표는 이전 혹은 다음 요소 혹은 라인, 위아래는 웹 로터에서 지정한 요소로 바로 이동합니다. 이것은 보이스오버 커서로 웹을 탐색하는 것입니다.

2. 빠른 탐색키를 오프하고 방향키를 움직이면 캐럿브라우징이 작동합니다. 캐럿 브라우징이란 웹페이지 전체를 하나의 문서편집기처럼 탐색하게 하는 기능으로 전체적인 화면 구조를 살펴볼 때 유용할 수 있습니다. 이는 보이스오버 커서로 웹 탐색시에는 요소 단위로만 탐색하기 때문에 화면 레이아웃을 확인할 수 없기 때문입니다.

3. 캐럿 브라우징에서는 보이스오버 커서가 아닌 사파리 자체 커서로 이동하게 되며 빠른 탐색키를 온으로 설정했을 때보다 보이스오버가 출력하는 웹페이지 요소 정보가 적습니다. 따라서 스크린리더를 통해 웹페이지 접근성을 테스트할 때는 캐럿 브라우징 보다는 보이스오버 커서로 탐색하는 빠른 탐색키를 켜는 것을 권장합니다.

웹페이지 탐색방식(dom 순서 혹은 그룹화)

보이스오버유틸리티(vo key + f8) > 웹 카테고리 > 탐색 섹션에는 웹페이지 탐색 방법을 어떻게 할 것인지를 설정하는 두 가지 옵션이 있습니다. DOM 순서로 탐색과 그룹화로 탐색이 바로 그것입니다. DOM 순서로 탐색하는 것은 우리가 일반적으로 스크린리더로 탐색하는 방법입니다. 이때는 fieldset, table(웹 카테고리에서 내부 셀 그룹화를 선택한 경우)와 같은 그룹화를 제외하고는 모든 요소를 펼쳐놓고 탐색합니다.

반면 그룹화로 탐색을 체크하게 되면 보이스오버유틸리티 > 탐색에서 그룹짓기를 무시로 설정하지 않고 일반으로 설정한 경우 웹페이지 자체를 그룹화 시켜 대화식 기능을 사용하여야만 하위 내용을 탐색할 수 있습니다. 예를 들어 html의 body 요소에 header, main, footer 요소가 있다면 처음에는 세 개의 그룹만 접근이 됩니다. 그리고 각각의 그룹에 포커스 하면 그 그룹 안의 세부 내용을 연속으로 읽어줍니다.

메인 요소에 세 개의 div가 있다면 메인 요소에서 대화식 기능 사용(vo key + shift 아래쪽 화살표 혹은 빠른 탐색키를 활성화한 경우 오른쪽 + 왼쪽 화살표)을 동작시키면 세 개의 그룹이 접근됩니다. 이 방식은 맥의 보이스오버에서만 지원하는 기능으로 윈도우용 스크린리더 사용자에게는 익숙지 않은 기능일 수 있으며 html의 구조를 계층적으로 이해하고자 할 때 유용한 기능입니다.

이미지 탐색방식

보이스오버유틸리티 > 웹 > 탐색에서 이미지 탐색 방법을 설정할 수 있습니다. 여기서의 이미지는 말 그대로 웹페이지 내의 이미지를 말하며 항상, 하지 않음, 설명 포함(대체 텍스트) 중에서 설정이 가능합니다. 만약 하지 않음으로 설정하면 웹페이지 내에서의 모든 이미지는 대체 텍스트가 있다 하더라도 음성출력하지 않습니다.

키보드 명령이 항상 웹사이트 탐색하는 것을 허용

어떤 웹페이지에서는 스크립트 등을 이용하여 키보드 방향키를 눌렀을 때 특정 아이템으로 이동하도록 제작된 경우가 있습니다. 예를 들어 gmail 홈페이지에 접속하여 방향키를 내리면 메뉴 혹은 메일 단위로 이동합니다. 만약 키보드 명령이 웹사이트를 탐색하는 기능을 선택하게 되면 빠른 탐색키를 오프 하여 캐럿 브라우징을 사용하더라도 브라우저에서 제공하는 고유의 방향키 액션을 사용할 수 없으며 캐럿 브라우징으로 만 작동하게 됩니다.

기타

1. Vo key + f를 누르면 웹페이지 내에서의 문자열 찾기가 가능하지만 한글은 입력할 수 없습니다.

2. Ctrl + vo key + f를 누르면 웹 로터에서 지원하지 않는 컬러, 폰트, 라이브 리전 등의 웹 요소로 바로 이동할 수 있는 리스트가 표시됩니다. 특정 요소를 바로 테스트해보고 싶을 때 유용하게 이용할 수 있습니다.

주요 html 요소 처리에 관하여

마지막으로 주요 html 처리 방식과 관련하여 참고할만한 내용을 아래에 정리하였습니다.

이미지와 대체텍스트

1. 다른 스크린리더와 마찬가지로 이미지에 대체 텍스트가 있으면 ‘이미지’라는 문구와 함께 대체 텍스트를 읽어줍니다.

2. 이미지에 대체 텍스트를 null(“”)로 지정하면 다른 스크린리더와 마찬가지로 그 이미지를 읽지 않습니다.

3. 이미지 링크인 경우 대체 텍스트를 null로 지정하면 슬래시 링크라고 표시합니다. 장식용 이미지는 대체 텍스트를 null 값으로 주어 스크린리더에서 읽지 않게 할 수 있으나 링크인데 읽지 않게 하는 것은 말이 되지 않으므로 스크린리더에 따라 이미지 소스를 읽어주는 경우도 있고 보이스오버와 같이 슬래시 링크라고만 표시하는 경우도 있습니다.

데이터테이블

1. 테이블 내에서는 VoiceOver key + 화살표 키를 이용하여 셀 단위 이동이 가능합니다. 즉 왼쪽 오른쪽은 이전, 다음 열로 이동하며 위쪽 아래쪽은 이전 혹은 다음 행으로 이동합니다.

2. 빠른 탐색키를 온으로 설정한 경우(왼쪽 오른쪽 화살표 동시에 누르기) 왼쪽 혹은 오른쪽 화살표를 이용하여 순서대로 셀단위 탐색이 가능합니다.

3. 빠른 탐색키를 온으로 둔 상태에서 왼쪽 혹은 오른쪽으로 테이블을 탐색하게 되면 테이블의 헤더셀이 마크업 된 경우 셀에 해당하는 th 요소를 함께 출력합니다.

4. 테이블 내에 헤더 셀(th)가 마크업 된 경우 그 셀에 해당하는 헤더 셀을 음성으로 출력합니다. 그러나 현재는 열과 행에 th 요소가 마크업 되어 있을 때 열에 해당하는 헤더만 출력하며 행에 해당하는 헤더는 출력하지 못 합니다.

5. 셀 이 병합된 경우 병합된 셀임을 알려줍니다.

6. VoiceOver key + c를 누르면 현재 셀이 위치한 열의 헤더 정보를 알려줍니다.

폼컨트롤

1. Label, fieldset과 legend 등의 속성은 다른 스크린리더와 같이 동작합니다.

2. Label, title이 함께 부여된 경우 다른 스크린리더와 달리 두 속성을 함께 출력합니다.