[Window-Eyes] 인터넷 서비스 사용 시 특징
안녕하세요. N-Visions입니다.
지난 글에서는 스크린리더 Window-Eyes에 대한 소개와 웹에서의 특징 그리고 간단한 사용방법등을 안내해 드렸습니다. 이번 글은 지난 글에 이어 웹페이지에서의 Window-Eyes의 특징들에 대해 더 자세하게 소개해 드리려 합니다.
이번 포스팅은 3월 현재 업데이트 된 9.1 영문버전(한글버전은 네오엑세스에서 출시 준비 중)을 기준으로 작성하였으며 Window-Eyes의 매뉴얼에 명시된 내용은 간략하게, 명시되어 있지 않은 내용을 자세하게 설명하는 방향으로 작성되었습니다.
브라우즈모드(가상커서)와 WE커서
다른 스크린리더와 마찬가지로 Window-Eyes 역시 웹페이지의 내용을 탐색하기 쉽도록 재구성한 브라우즈모드(가상커서)를 사용합니다. 그런데 브라우즈모드는 링크나 버튼과 같이 포커스 되는 객체를 탐색할 경우, 실제 화면에서 한 줄에 여러 개의 객체가 있다 하더라도 키보드와의 상호작용을 위하여 라인을 분리할 수밖에 없으며 화면의 레이아웃을 그대로 표현하지는 못합니다. 이를 해결하기 위해서 NVDA에서는 화면 레이아웃을 따를 것인지 말 것인지를 환경설정에서 선택할 수 있고, Window-Eyes에서는 화면의 레이아웃을 그대로 파악하고 싶은 사용자들을 위하여 WE커서를 제공합니다.
WE커서는 웹페이지의 정보를 마우스포인터를 움직여 화면의 레이아웃 형태에 맞게 탐색할 수 있도록 하는 기능을 말합니다. 특정 웹페이지의 화면 레이아웃을 확인해 보고 싶다면 KEYPAD 2, 8번 등의 방향키를 이용하면 됩니다. 기본적으로는 마우스포인터가 사용자의 키 조작에 따라 움직이게 되어 있는데 KEYPAD INSERT + KEYPAD MINUS를 눌러 마우스포인터는 고정시킨 상태로 정보를 탐색할 수도 있습니다.
웹페이지 제목처리
센스리더나 JAWS와 같은 스크린리더에서는 가상커서 상의 문서 첫 줄에 웹페이지 제목이 표시됩니다. 그러나 Window-Eyes에서는 웹페이지 제목은 실제 브라우즈모드상에 표시되지 않으며 제목줄을 읽는 CTRL + SHIFT + T를 눌렀을 때에만 제목 요소를 출력해 줍니다. 해당 제목줄읽기를 눌렀을 때의 좋은 점은 해당 제목 요소와 함께 현재 창이 최대화 되어 있는지 혹은 기본창인지를 같이 알려준다는 것입니다.
개별화된 브라우즈모드 환경설정
Window-Eyes는 브라우즈모드에서의 세부 설정된 항목들을 Internet Explorer, Firefox, Chrome 브라우저 전체에서 적용되게 할 것인지 혹은 개별적으로 따로 적용되게 할 것인지를 설정할 수 있습니다. 특정 옵션은 전체 브라우즈모드에서, 다른 옵션들은 각 브라우저별로 설정을 달리함으로써 조금 더 프로그램별 세밀한 환경설정을 할 수 있습니다. 예를 들면 Internet Explorer을 사용할 때는 대체텍스트가 없는 이미지 링크는 읽지 않도록 설정하고 Firefox 브라우저에서는 모든 이미지를 읽게 하는 것 등입니다.
HTML 주요 요소의 개별 읽기 설정
웹에서 많이 쓰이는 링크, 목록, 헤딩, 플래시, 랜드마크 등의 요소는 사용자의 필요에 따라 읽는 방식 또는 읽기의 유무를 개별 설정할 수 있습니다. 예를 들어 ‘목록 시작’, ‘목록 끝’과 같은 메시지를 읽지 않게 하거나 헤딩 요소에서 ‘헤딩’은 읽지 않게 설정하는 것 등입니다. 만약 헤딩을 읽지 않게 설정한다면 웹을 탐색하는 도중 헤딩을 만났을 때 ‘헤딩’이라는 말 없이 글자로만 음성을 출력할 것입니다. 해당 옵션은 위/아래 방향키를 내려서 탐색할 때와 전체읽기를 실행하여 자동으로 위에서 아래로 읽었을 때의 설정을 다르게 할 수 있습니다.
포커스가 위치한 요소의 세부정보 파악하기
웹페이지를 탐색하다보면 상황에 따라 해당 페이지에 포함된 태그나 추가요소들을 확인하고싶을 때가 있습니다. 물론 브라우저에서 개발자 도구 같은 기능을 활용해서 그러한 내용들을 살펴볼 수도 있지만 Window-Eyes에서는 ‘element property’(keypad insert + e) 기능을 제공하여 해당 요소가 속한 태그, 각 속성들, 그리고 기타정보 등을 얻을 수 있습니다. 웹페이지를 테스트 하는 스크린리더 사용자에게 유용한 기능이라 생각됩니다.
랜드마크 속성과 HTML5의 semantic tag 처리
Window-Eyes는 section, header, aside와 같은 HTML5의 semantic tag들을 랜드마크로 인식합니다. 따라서 랜드마크 롤은 부여되지 않고 HTML5의 semantic tag만 부여된 웹페이지에서도 해당 페이지 랜드마크 정보를 비교적 명확하게 파악할 수 있습니다. 이에 대한 세부적인 내용은 다음과 같습니다.
semantic tag에 랜드마크 롤이 같이 부여된 경우에는 랜드마크 롤만 출력합니다. 예: <footer role=”contentinfo”></footer> - 랜드마크 롤이 부여된 속성은 랜드마크, section, aside, footer와 같은 semantic tag들은 랜드마크라는 말을 제외한 고유의 소스(section, aside, footer 등)으로 출력함으로써 사용자는 해당 속성이 랜드마크인지 semantic tag인지를 파악할 수 있습니다. 단 nav 태그는 navigation으로 음성출력합니다.
- 방향키가 아닌 TAB키나 기타 페이지 탐색 빠른 단축키를 사용하여 탐색시에는 랜드마크 혹은 semantic tag 정보는 인식하지 않습니다.
- 한소네와 같은 점자정보단말기를 연결하여 Window-Eyes와 같이 사용할 경우 랜드마크 정보는 출력되지 않습니다. (점자정보단말기에 대한 자세한 내용은 다른 섹션에서 자세하게 다룰 예정입니다.)
Title, placeholder 속성 처리
- 편집영역, 체크박스, 콤보상자, 라디오버튼과 같은 폼 요소에 label이 걸려 있지 않고 title 속성만 있을 경우 이를 인식합니다.
- 폼 요소에 Label과 title 속성이 같이 포함된 경우에는 방향키로 접근하거나 탭키 혹은 빠른 탐색키로 접근시 label 요소만 인식하고 title 요소는 인식하지 않습니다.
- 폼 요소가 아닌 링크나 버튼요소에 추가정보로 title 요소가 제공된 경우에 해당 정보를 전혀 인식하지 않습니다. 그러므로 Window-Eyes 처리 기준으로 생각한다면 해당 태그에 추가정보를 넣어야 하는 경우는 IR 기법을 사용하거나 aria-label 속성을 사용하여 추가정보를 주어야 해당 내용을 스크린리더 사용자가 충분히 인지할 수 있습니다.
- Html5에서 많이 사용되고 있는 placeholder 속성은 title 속성과 달리 해당 편집 영역에 레이블이 걸려 있건 그렇지 않건 항상 해당 속성으로 부여된 값을 읽어줍니다. 예를 들어 레이블이 ‘검색어’, placeholder가 ‘검색어 입력’이라면 ‘검색어 검색어 입력’이라고 읽어주게 됩니다. 레이블이 걸려 있지 않은 경우에는 placeholder 속성만 단독으로 읽습니다.
데이터 테이블 셀 처리
데이터 테이블은 기본적으로는 다른 스크린리더와 구동방식에서 큰 차이는 없기 때문에 셀병합된 테이블 탐색에 대해서만 설명하겠습니다.
Window-Eyes는 특정 셀과 셀이 병합된 경우 몇 칸이 병합되어 있는지를 알려줍니다. 따라서 좀 더 명확한 표에 대한 이해가 가능합니다. 참고로 해당 속성은 기본적으로는 읽지 않게 되어 있으며 테이블 트리뷰에서 병합된 이슈 알려주는 라디오버튼을 체크해 주어야 합니다.
결론
지금까지 Window-Eyes 스크린리더가 가지는 인터넷에서의 특징 중 일부를 살펴보았습니다. 다음 글에서는 기타 html 처리에 대한 내용과 aria 처리에 대하여 살펴보는 시간을 가져보도록 하겠습니다.
감사합니다.