아티클

센스리더 4.0beta 버전의 업그레이드 사항 (2/2)

2014-05-23 13:49:01

센스리더 4.0beta 버전의 업그레이드 사항 두 번째

안녕하세요? 엔비전스 입니다. 제목과 같이 지난 글에 이어서 웹에서의 센스리더 4.0beta의 변경된 내용을 공유드리도록 하겠습니다. 이 글이 센스리더를 이용해 접근성 테스트를 하시는 분들에게 조금이남아 도움이 되었으면 좋겠습니다.

 

참고 : 이 글은 센스리더의 일반 사용자들 보다는 접근성 관련 마크업을 하시는 분들을 주요 대상으로 작성된 글임을 밝혀 둡니다. 또한 이 글이 언급하고 있는 센스리더는 현재 4.0 beta4이며 아직 까지 해당 버전에 대한 정식 버전은 출시되지 않았음을 밝힙니다.

변경 내용 자동읽기

센스리더 4.0 beta버전 부터 자동으로 변경되는 콘텐츠 영역에 센스리더 가상커서 포커스가 위치한 경우 콘텐츠가 자동으로 변경될 때 마다 센스리더는 해당 내용을 바로 음성으로 출력하게 됩니다. 기존의 버전에서는 사용자가 커서키를 해당 콘텐츠 영역에 두었다가 다시 다른 곳으로 포커스를 이동 한 후 돌아와야만 변경된 콘텐츠 내용을 확인할 수 있었습니다. 이 부분을 확인하기 위해서는 다음과 같은 설정을 적용해야 합니다.

  1. 먼저 인터넷 익스플로러를 실행한 후 CTRL+Shift+F9키를 눌러 가상커서 설정 메뉴에 진입합니다.
  2. 여러 개의 메뉴 중 '설정'메뉴를 선택합니다.
  3. 커서를 아래로 내려 '변경 내용 자동 구성'이 선택되어 있는지 확인합니다.
  4. '변경 내용 자동 읽기'항목에서 해당 항목이 선택되어 있지 않다면 선택합니다.
  5. '확인'을 누른 후 설정 메뉴를 종료합니다.

위에 설정 과정을 마무리했다면 이제 변경 내용 자동읽기에 대한 테스트를 할 준비가 완료 되었습니다. 네이버 모바일 페이지에 접속해 '실시간 급상승 검색어'에 있는 검색어에 가상커서의 포커스를 위치 시킵니다. 잠시 기다려 보면 검색어 순위가 변하는 것에 맞추어 센스리더 역시 음성으로 해당 내용을 출력하는 것을 확인 할 수 있을 것입니다.

효과 : 센스리더 4.0beta에서 지원되기 시작한 '변경 내용 자동읽기'기능으로 인해 이제 센스리더 사용자들이 'AJAX'등을 이용해 페이지의 일부가 갱신되도록 만들어 진 콘텐츠 영역에서 좀 더 자연스럽게 콘텐츠의 내용에 접근할 수 있게 되었습니다. 물론 ARIA-live Leigion을 지원했다면 좀 더 해당 콘텐츠 영역에 대한 활용 범위가 넓어졌겠다는 부분은 약간의 아쉬움으로 남습니다.

ARIA-label

이제 부터는 글의 서두에서 언급한바와 같이 센스리더 4.0 beta에서 지원하기 시작한 'ARIA'의 속성들과 'role'을 살펴볼 텐데요 먼저 'ARIA-label'을 센스리더에서는 어떻게 음성으로 출력해 주고 있는지 알아보도록 하겠습니다. 'ARIA-label'은 화면 상에는 보이지 않지만 HTML의 요소에 스크린리더만이 인식 가능한 별도의 해당 요소에 대한 label을 삽입해 주는 속성입니다. 우선 다음의 예시 두 개를 확인해 보도록 하겟습니다.

예제



  • 센스리더출력내용
    '닫기버튼'

    코드
    <input type="button" aria-label="닫기" onclick="close_()">


  • 센스리더출력내용
    'X닫기버튼'

    코드
    <input type="button" aria-label="닫기" value="X" onclick="close_()">

두 개의 버튼을 확인해 보면 아시겠지만 모두 '닫기'버튼 이라고 센스리더가 인식하고 있는 것을 확인 하셨을 것입니다. 다만 두 번째 '닫기'버튼의 경우 'X'라는 문자열이 덧붙혀저 있는데요 이것은 해당 요소의 'value'값으로 'X'가 선언되어 있기 때문입니다. 즉 정리해서 말씀드리면 센스리더는 'input'요소에 "value"속성 값이 선언되어 있거나 'button'요소에 별도의 텍스트가 선언되어 있으면 해당 값들을 먼저 출력한 후에 ARIA-label에 있는 값을 출력하게 됩니다.

효과 : 센스리더 사용자들을 위해 대체텍스트 제공이 필요하나 화면 레이아웃 역시 고려하지 않을 수 밖에 없는 상황에 종종 마주치곤 합니다. 그럴 때 마다 적절한 IR기법을 적용하여 이런 문제를 해결하곤 했습니다. 그러나 센스리더에서 ARIA-label을 지원함으로써 화면의 레이아웃과 대체텍스트 사이에서의 부담을 덜 수 있을 것이라 생각합니다. 또한 자세한 설명이 필요한 경우 충분히 센스리더 사용자들에게 ARIA-label을 통해 해당 요소에 대한 설명을 제공해 줄 수 있을 것입니다.

참고 : 'HTML5'에서 도입된 'SEmantic'요소들과 'ARIA-label'을 함께 사용하면 'ARIA-label'을 센스리더 상에서 음성으로 읽지 못하고 있습니다.

ARIA-hidden

두 번째로 ARIA-hidden을 센스리더에서 처리하는 방식에 대해 알아보도록 하겠습니다. ARIA-hidden은 스크린리더가 어떤 임의의 요소와 그 요소에 포함된 값들을 읽지 않도록 해 주는 속성입니다. 만약 두 개의 중복된 링크가 있고 이것이 스크린리더 사용자들이 웹페이지를 탐색하는데 번거로울 수 있다고 판단되면 중복된 링크 중 하나를 ARIA-hidden을 이용해 숨길 수 있을 것입니다. 아래의 예를 통해 센스리더가 ARIA-hidden을 처리하는 방식에 대해 구체적으로 살펴 보도록 하겠습니다.

예제

  • 네이버

    센스리더출력내용
    '네이버새창새창방문한링크'

    코드
    <a href="http://www.naver.com/" target="_blank" title="새창">네이버</a>


  • 센스리더출력내용
    (숨긴 내용 읽기 해제 상태일 경우, 접근&음성출력 안 됨)

    코드
    <a href="http://happybean.naver.com/" target="_blank" title="새창" aria-hidden="true">해피빈</a>
  • Google

    센스리더출력내용
    'Google새창새창방문한링크'

    코드
    <a href="https://www.google.com" target="_blank" title="새창" aria-hidden="false">Google</a>

위에서 확인해 볼 수 있듯이 기본적으로( '네이버'와 'Google' 두 개의 링크만이 센스리더에서 읽어 주고 있습니다. 그러나 화면상으로는 두 번째 '해피빈'링크가 보이고 있을 것입니다. 센스리더에서 ARIA-hidden으로 처리된 요소를 확인해 보기 위해서는 'CTRL+/'를 눌러 '숨긴 내용 읽기 선택'으로 변경한 후 다시 위에 목록으로 접근해 보면 '해피빈'링크가 센스리더 상에서 인식되고 있습니다. 이처럼 ARIA-hidden은 스크린리더 사용자들에게 웹페이지 탐색에서 불필요한 요소들을 숨김으로써 좀 더 웹페이지 탐색을 효율적으로 만들어 줄 수 있을 것입니다. 또 하나 ARIA-hidden을 사용할 때 'true', 'false'를 이용해 해당 요소를 숨길 것인지 아니면 스크린리더 상에서 인식되게 할 것인지를 컨트롤 할 수 있습니다. 위에 예제에서 마지막 링크인 'Google'에는 'ARIA-hidden'의 속성인 'false'가 선언되어 있기 때문에 센스리더를 포함한 다른 스크린리더에서도 해당 링크를 인식하고 있습니다.

효과 : 중복된 링크등이 있을 경우 스크린리더 사용자가 웹페이지 탐색 시 번거로울 수 있는 부분을 간결하게 만들어 효율적으로 페이지를 탐색하도록 도울 수 있을 것입니다. 그리고 제한적으로 어떤 레이어팝업이 열렸을 때 열려있는 팝업에 포함된 콘텐츠를 제외한 나머지를 임시로 숨김 처리 함으로써 센스리더 사용자들이 보다 손쉽게 레이어팝업 안의 콘텐츠를 탐색할 수 있으리라 생각합니다.

참고 : 주의해야 할 점은 'Mozilla Firefox'에서 센스리더의 경우 'ARIA-hidden'이 적용되지 않고 있습니다.

button role

마지막으로 센스리더 4.0 beta부터 지원하기 시작한 'button role'에 대해 알아보도록 하겠습니다. 'button role'은 스크린리더에서만 인식 가능한 버튼을 생성하여 스크린리더 사용자들이 키보드로 접근하기 어려운 요소를 작동시킬 수 있도록 합니다. 불가피하게 'Clickable'요소를 사용할 때 사용할 수 있을 것입니다. 그럼 간단한 'button role'의 예를 살펴보도록 하겠습니다. 우선 아래 에 'button role'속성을 사용한 것 만으로도 센스리더는 해당 요소가 버튼인것 처럼 인식하고 있을 것입니다.

예제

  • Button Role

    센스리더 출력 내용
    'Button Role 버튼'

    코드
    <span role="button">Button Role</span>


이어서 'button role'이 사용되고 있는 예시를 살펴보도록 하겠습니다. 첨부된 이미지와 같이 Google 에서 임의의 검색어를 입력한 후 검색결과 영역으로 이동합니다. '검색결과 세부정보'에 포커스를 위치하면 센스리더는 '검색결과 세부정보 버튼'이라고 출력할 것입니다. 이 곳에서 'Enter'키를 누르면 팝업이 열리고 커서키를 아래로 내리면 해당 팝업에 포함된 메뉴들을 확인할 수 있을 것입니다. 물론 해당 요소에 소스코드를 열어 보시면 'button role'외에 'ARIA-expanded'와 'ARIA-haspopup'이 같이 사용되고 있다는 것이 확인됩니다. 그러나 'button role'외에 다른 'ARIA'이슈는 논외의 것 임으로 다른 기회에 설명하도록 하겠습니다.

Google 검색결과 세부정보

효과 : 센스리더가 'button role'을 지원함으로써 Clickable요소로 이루어 진 트리거를 작동 시킬 수 있습니다. 기존의 센스리더는 'button role'속성이 부여된 요소를 일반 텍스트와 같이 처리를 했기 때문에 사용자들이 어떤 용도로 만들어 진 트리거라는 것을 알 수 없었습니다.

글을 마치며

이제 까지 '변경 내용 자동 읽기'와 'ARIA-label, hidden' 그리고 'button role'을 센스리더에서 처리하는 방식에 대해 공유 드렸습니다. 아무쪼록 이 글이 접근성 관련 마크업을 하시는 분들에게 조금이남아 참고가 되었으면 좋겠습니다.

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