센스리더 최신버전(v3.2.1) 업데이트 내용 리뷰
안녕하세요. 엔비전스의 김형섭입니다.
저는 네이버 서비스의 접근성 개선을 위해서 임희택 사원과 함께 NHN 네이버 서비스의 사용성 평가를 진행하며 시각장애인 입장을 대변하도록 노력하고 있습니다.
최근(2012.07.05) 센스리더 프로패셔널 버전이 3.2.1로 업데이트 됨에 따라 인터넷 기능 중에서 변경, 추가된 사항을 공유드리고자 첫 글을 쓰게 되었습니다. 참고로 이 문서는 일반 스크린리더 유저를 대상으로 하기보다는 홈페이지를 센스리더로 테스트를 하시는 분들을 위해 작성한 문서이므로 소소한 버그 보다는 업데이트, 개선된 내용 중심으로 공유 드림을 참고해 주시기 바랍니다.
1. 공통사항
이번 버전에서는 일부 aria 지원과 Internet Explorer(이하 IE) 뿐만 아닌 Chrome과 파이어폭스(이하 FF) 지원이 주된 업데이트 내용입니다.
2. 랜드마크 기능 지원(IE, FF, Chrome에서 지원)
랜드마크란 페이지의 여러 영역을 섹션별로 분류, 이름을 붙여 줌으로써 스크린리더 사용자가 여러 섹션을 빠르게 파악함과 동시에 페이지 구조를 쉽게 이해하도록 돕는 기능을 말합니다. 랜드마크 기능을 활용하면 검색영역, 네비게이션 영역, 하위메뉴영역, 푸터영역 등을 섹션별로 분류하여 시각장애인의 페이지 이해에 도움을 줄 수 있습니다.
참고로, 랜드마크를 적용하기 위한 방법은 다음과 같습니다.
각 요소에 role이라는 속성을 지정하고 적절한 값을 지정하거나, 랜드마크역할을 하는 HTML5의 요소를 적절하게 사용합니다.
- role 속성 값 목록
-
- application(웹 응용프로그램)
- banner(사이트 로고)
- complementary(독립적/부가콘텐츠)
- contentinfo(문서정보영역)
- form(검색 역할을 제외한 서식영역)
- main(메인)
- navigation(메뉴영역)
- search(검색영역)
- HTML5 요소 목록
-
- aside(독립적/부가콘텐츠)
- header(상단 머릿말영역)
- footer(하단 바닥글영역)
- nav(메뉴 영역)
- section(제목을 포함한 콘텐츠 영역)
- article(독립적/재배포/재사용 가능 영역)
사용방법
현재는 랜드마크 속성을 방향키로 페이지를 탐색할 경우는 알려주지 못하며 탭키나 랜드마크 이동키인 컨트롤과 탭키로 이동시에만 랜드마크를 읽어주게 됩니다. 또한 네비게이션, 푸터 등의 문구가 랜드마크 속성을 가졌다는 것을 알려 주어야 하나 랜드마크라는 속성을 알려주지 못합니다.
테스트해 보시려면
현재 보고 계신 널리 사이트에서 문서 처음으로 이동한 후(컨트롤과 홈키) 랜드마크 이동키인 컨트롤과 탭키를 눌러가며 랜드마크를 들어볼 수 있습니다.
해결과제
현재 랜드마크 속성은 각 스크린리더마다 지원 범위가 조금씩 다릅니다. 센스리더의 경우에는 앞에서 설명드린 롤 속성과 html5의 속성의 랜드마크를 같이 지원하지만 Nvda 스크린리더의 경우 html5 랜드마크 속성은 지원하지 않고 있습니다. 따라서 각 스크린리더마다 서포트 하는 지원범위를 잘 확인하여 페이지 개발시 반영해야 할 것으로 보여집니다.
3. 하위메뉴를 적용한 아리아 일부 지원(IE, Chrome)
어떤 페이지는 주메뉴 중 하위메뉴를 가진 주메뉴가 있고 하위메뉴가 없는 주메뉴가 있는데 스크린리더 사용자는 해당 메뉴에 하위메뉴가 있는지 없는지 바로바로 알 수 없었습니다. 그러나 아리아를 적용하면 하위메뉴가 있는 메뉴들은 서브메뉴라고 음성을 출력하여 사용자가 하위메뉴가 있음을 인지할 수 있도록 해줍니다.
테스트해 보시려면
- Microsoft accessibility 사이트에 접속합니다.
- 방향키를 이동하여 주메뉴 항목을 찾습니다.
- 서브메뉴가 있는 항목을 읽어주는 것을 확인하고 메뉴를 열기 위하여 엔터를 누릅니다.
- 아래에 하위메뉴가 ul 태그로 묶여 있는 것을 확인합니다.
해결과제
FF 브라우저에서는 이러한 메뉴 하나로만 접근이 되면 방향키를 아래로 아무리 내려도 다른 메뉴로 접근이 안 되는 문제가 있습니다.
4. Facebook에서의 알림, 요청, 메시지 등의 팝업메뉴 지원(Chrome만)
Chrome에서 페이스북에 로그인하여 나타나는 알림, 메시지 등의 버튼은 아래에 내용이 레이어처럼 열리는 형태로 되어 있는데 이런 메뉴를 Chrome에서는 그 안에 콘텐츠가 있다는 것을 메뉴라고 해서 읽어줍니다.
테스트해 보시려면
- Chrome으로 페이스북에 로그인합니다.
- 위에서 언급한 각각의 메뉴 중 아무 메뉴에서나 엔터를 쳐서 레이어가 열림을 확인합니다.
해결과제
현재는 IE와 FF에서는 각각의 버튼마다 메뉴가 있다는 것을 읽어주지 못합니다.
5. visibility hidden 속성 기본적으로 음성출력하지 않도록 수정
이전 버전까지는 가상커서 설정에서 숨긴내용읽기를 해제할 경우 display none 속성만 읽지 않았으나 현재는 visibility hidden 속성으로 처리된 내용도 읽지 않도록 했습니다. 이것은 센스리더뿐만 아니라 다른 스크린리더에서도 공통적으로 취하고 있는 정책이며 이로 인해 스크린리더 사용자를 위한 숨김 텍스트를 제공하려면 overflow와 같은 다른 속성을 써야 할 것으로 보여집니다.
테스트해 보시려면
- 어둠속의대화 사이트에 접속합니다.
- 주메뉴의 각 메뉴마다 표시된 목록 열기 메시지를 확인합니다(숨김 속성으로 적용됨).
6. 기타사항
- 일부 페이지에서 편집창이나 텍스트가 나타나지 않던 문제가 해결되었습니다. 이것은 예전 버전에서 display none을 안 읽게 처리하는 과정에서 페이지의 내용이 일부 누락되던 문제가 있었는데 이 문제가 해결되었습니다.
- 가상커서 설정에서 자동포커스 모드를 선택으로 해 놓을 경우 일부 페이지의 글자에 포커스만 가도 링크가 실행되어 버리거나 체크박스에서 체크상자 윗 줄에 포커스만 가도 선택, 해제가 자동으로 되는 문제가 있었는데 해결이 된듯 보입니다. 하지만 이 부분은 워낙 변수가 많으므로 조금 더 테스트가 필요합니다.
- 일부 버튼과 글자가 라인이 분리되어 표시되던 문제가 있었는데 일부 문제가 해결되었습니다.
감사합니다.