NVDA를 활용한 WAI-ARIA 살펴보기(1부)
안녕하세요.
N-Visions
입니다. 이번 글에서는 지난번
NVDA
에 대한 소개에 이어 NVDA를 통해 웹 접근성 기술 WAI-ARIA가 실제로 적용된 웹 페이지를 살펴 봄으로써 스크린리더 사용자들에게 어떻게 ARIA가 웹페이지 탐색에 있어 도움이 되고 있는지를 알아 보도록 하겠습니다. 이 글이 웹 접근성에 대해 고민하시고 계신 개발자 분들에게 조금이나마 도움이 되었으면 좋겠습니다.
이 글에서 사용하는 NVDA의 버전은 지난 5월 말에 업데이트 된
2014.2
입니다. 또한 아래 글에서 예시로 하는 테스트 절차에서 사용되는 브라우저 환경은 특별한 언급이 없는 이상 Internet Explorer11과 Mozilla Firefox의 최신 버전 모두 사용 가능합니다. 다만 이 글에서 언급한 부분 외에 NVDA는 기본적으로 Firefox에서 더 나은 사용자 경험을 제공하고 있습니다.
Landmarks Role를 이용해 콘텐츠 블록에 고유의 식별자 지정해 주기.
가장 먼저 Landmarks Role에 대해 알아보도록 하겠습니다. 스크린리더 사용자들에게 웹페이지를 탐색하는 데 있어 중요한 것 중 하나는, 적절한 방식으로 구조화 된 콘텐츠의 블록화 일 것입니다. 지금 까지 사용되어 왔던 HTML의 'heading(<hx">)'요소등이 그 예입니다. 그러나 웹에서의 접근성 구현 기술인 'WAI-ARIA' 가 도입되었고, 그 중에는 콘텐츠의 영역을 스크린리더에서만 인식 가능한 형태로 블록화 해 줄 수 있는 'Landmarks'Role들이 있습니다. 'Landmarks'의 자세한 내용은 'W3C'의 Landmarks 안내 페이지를 참조해 주시기 바랍니다.
Landmarks Role들을 사용하면 스크린리더 사용자들에게 현재 탐색하고 있는 콘텐츠 영역이 'Banner'영역인지 아니면 콘텐츠의 'Main'영역인지 등을 알려 줄 수 있습니다. 또한 'Role="region"'을 선언한 후 'ARIA-label'을 함께 선언하여 특정 콘텐츠 블록의 이름을 해당 웹페이지를 개발하시는 분들이 더 적합하다고 판단되는 이름으로 지정할 수 있습니다. NVDA의 경우 2014.2 버전 부터 'Role="region"'과 'ARIA-label'의 형태를 지원하기 시작했습니다. 그럼 NVDA를 이용해 실제로 Landmarks를 탐색해 보도록 하겠습니다. NVDA에서 'Landmarks' Role가 적용된 콘텐츠 영역으로 이동하는 키는 웹페이지 상에서 'd'키를 누르면 됩니다. 현재 위치에서 'd'를 누르면 NVDA는 'NVDA Landmarks Test 구역'이라고 음성 출력 하게 됩니다. 즉 이 것의 의미는 'NVDA Landmarks Test'라는 이름의 Landmark가 적용된 구역의 시작이라는 의미입니다.
NVDA 2014.2부터 해당 기능을 지원함으로써 위에서 기술한 바와 같이 스크린리더 사용자들에게 더욱 상세한 콘텐츠 영역에 대한 설명 및 구별점의 제공이 필요한 경우 ‘Role=”region”’을 사용하는 것 만으로도 손쉽게 스크린리더 사용자가 탐색하기 좋은 페이지를 구현할 수 있을 것이라고 생각 됩니다. 또한 웹페이지의 시각적 화면 레이아웃과 스크린리더 사용자들에게 적합한 콘텐츠 블록을 제공 하는 것 사이에서의 갈등 역시 크게 줄일 수 있을 것이라고 기대할 수 있습니다.
Internet Explorer 11에서 ARIA Live Region 활용하기
Ajax등을 활용하여 웹페이지 내에 콘텐츠가 동적으로 갱신되도록 설계된 경우 스크린리더 사용자들은 해당 콘텐츠의 갱신 여부를 즉시 파악하는 데에 큰 어려움이 있었습니다. 이 문제를 해결하기 위한 것이 바로 이번에 소개할 ARIA Live Region 입니다. 동적으로 갱신되는 콘텐츠가 포함된 '<div>'와 같은 요소에 Live Region을 적용하면 해당 블록에 포함된 콘텐츠의 갱신 여부를 쉽게 스크린리더 사용자들도 파악할 수 있습니다. ARIA Live Region의 더 자세한 내용은 이곳에서 확인해 주시기 바랍니다.
기존에 NVDA는 ARIA Live Region을 지원하기는 하였지만 Mozilla Firefox로 지원 범위가 제한되어 있었습니다. 때문에 Internet Explorer의 사용자들은 Live Region이 웹페이지에 적용되어 있어도 접근이 되지 않았습니다. 그러나 NVDA 2014.2부터는 Explorer 11에서 ARIA Live Region을 지원하고 있습니다. 다음은 ARIA Live Region이 실제 적용된 두 가지의 예를 살펴 보도록 하겠습니다.
첫 번째는 Live Region을 구현하는 속성 중 하나인 'ARIA-atomic'의 예입니다. 링크를 눌러 페이지로 이동하여 안내문과 같이 10초 정도 기다려 보면 'Tampa Bay Rays'와 'Boston Red Sox'의 스코어가 갱신되고 있고 해당 내용을 NVDA는 음성으로 출력하고 있습니다.
두 번째 Yahoo의 경우에는 먼저 Yahoo 영문 페이지에 접속합니다. 그 후 검색어 입력창으로 이동한 다음 검색어를 입력합니다. Yahoo의 검색어 입력창은 자동완성을 지원합니다. 검색어를 입력하는 도중 화면상에 자동완성 목록이 나타나면 NVDA는 'One or more search suggestions are available. Use up or down arrow keys to navigate between them.'이라는 메시지를 출력하게 됩니다. 해당 안내에 따라 커서키를 아래로 움직여서 탐색해 보면 자동완성 목록들이 있다는 것을 알 수 있을 것입니다. 여기서 Live Region의 역할은 사용자가 검색창에 검색어를 입력하던 도중 자동완성 목록이 나타나고 있다는 것을 알려 주기 위한 것으로 사용되었습니다.
지금 까지 Internet Explorer로 Live Region이 적용된 웹페이지에 접속하여 NVDA에서 동작하는 예를 확인해 보았습니다. NVDA가 해당 버전 부터 Explorer에서의 Live Region을 지원 함으로써 Firefox 사용자 뿐만 아니라 Explorer 사용자들도 NVDA를 통해 다이너믹한 웹페이지를 좀 더 손쉽게 탐색할 수 있을 것이라고 기대할 수 있습니다.
'ARIA-expanded'와 'ARIA-haspopup' 살펴 보기
웹페이지를 탐색하다 보면 자주 마주치는 유형의 객체가 있는데 그것은 어떤 요소 예컨데 버튼 혹은 링크를 눌렀을 때 레이어팝업이 열리거나 하위 목록이 펼쳐지는 형태의 것입니다. 이런 류의 객체를 스크린리더 사용자들이 탐색할 때 마주치게 되는 문제는 해당 객체가 레이어를 열거나 하위 목록이 펼쳐지는 형태의 것인지 알기 어렵다는 것입니다. 이 문제를 해결하기 위하여 'ARIA-haspopup' 과 'ARIA-expanded' 를 사용할 수 있습니다.
먼저 'ARIA-haspopup'을 시연해 보기 위해서는 Internet Explorer을 실행하여 Yahoo.com 에 접속합니다. CTRL+'Home'키를 눌러 페이지 상단으로 이동합니다. 방향키 혹은 탭키를 한 번 누르면 'Select Country Site'버튼이 위치하고 있습니다. 여기서 NVDA는 해당 객체를 출력하는 것 외에도 '하위메뉴'라는 별도의 정보를 알려주고 있습니다. 이 곳에서 'Enter'키를 누르면 해당 객체 아래에 바로 국가를 선택하는 레이어가 열리게 되는 것을 확인할 수 있습니다. 해당 레이어를 닫기 위해서는 다시 'Select Country Site'버튼을 한 번 더 누르면 됩니다. 이렇게 'ARIA-haspopup'은 레이어가 열리는등의 역할을 하는 객체일 경우 그 정보를 알려 주어 스크린리더 사용자들에게 정확한 정보를 제공하기 위한 목적으로 사용됩니다.
그 다음으로 'ARIA-haspopup'과 유사한 'ARIA-expanded'를 NVDA에서 처리하는 방식에 대해 살펴 보도록 하겠습니다. 이 속성의 경우 어떤 객체를 눌렀을 때 확장, 축소되는 객체임을 알리는 역할을 하고 있습니다. 먼저 Internet Explorer을 실행하여 Google 에 접속합니다. CTRL+'Home"를 눌러 페이지의 상단으로 이동합니다. 'Tab'키를 눌러 이동하다 보면 '앱 축소됨'이라고 출력되는 버튼을 만나게 될 것입니다. 이 버튼의 의미는 만약 이것을 누를 경우 확장이 되는 객체이고 현재 상태는 접혀진 상태라는 것을 의미하고 있는 것입니다. 이런 정보를 스크린리더에서 출력하도록 하는 것이 바로 'ARIA-expanded'입니다. 이 버튼에서 'Enter'키를 누르면 '확장됨'이라는 메시지가 출력이 되며 'Tab' 혹은 방향키로 이동해 보면 'Youtube', '지도'와 같은 메뉴들이 나타나 있는 것을 확인할 수 있을 것입니다. 다시 '앱'이라는 버튼으로 이동해 보면 '확장됨'이라고 현재 상태를 출력하고 있습니다. 이 곳에서 다시 이전과 같이 버튼을 누르면 '축소됨'이라는 메시지를 출력하며 목록이 접히게 됩니다.
사실 위에서 다루었던 'ARIA-haspopup'의 경우 단순히 레이어가 있다는 것 만을 의미하는 것은 아닙니다. 'menuitem Role' 또는 'menu Role'과 결합하여 트리뷰 형태의 객체를 탐색하는 것과 같은 환경을 스크린리더 사용자에게 제공할 수도 있습니다. 또한 'ARIA-expanded'와 'ARIA-haspopup'를 결합하여 사용하는 경우도 많이 확인할 수 있습니다. 이렇게 웹페이지는 적절하게 ARIA의 속성과 Role들을 결합하여 사용함으로써 스크린리더 사용자에게 알맞은 웹 환경을 제공할 수도 있습니다.
ARIA-disabled 살펴 보기
마지막으로 간략하게 'ARIA-disabled' 에 대해 알아보도록 하겠습니다. 간혹 스크린리더 사용자들은 어떤 링크 혹은 버튼과 같은 요소가 사용 불가능한 요소임에도 이에 대한 정보를 얻지 못하여 혼란을 겪는 경우가 있습니다. 이를 방지하기 위하여 사용되는 것이 바로 'ARIA-disabled'입니다. 일단 직접 아래의 예시를 보도록 하겠습니다.
리스트박스 안에 'ARIA-disable Test'버튼과 'Link Test'링크가 있는 것을 확인할 수 있습니다. 또한 이 두 요소들을 탐색해 보면 모두 '사용불가'라는 메시지가 함께 출력되는 것을 확인할 수 있을 것입니다. 이유는 짐작 하시는 것 처럼 'ARIA-disabled'가 적용되어 있기 때문입니다. 확인해 보신것 처럼 'ARIA-disabled'는 어떤 요소가 사용 가능하지 않다고 스크린리더 사용자들에게 알려 주는 역할을 합니다.
글을 마치며
지금 까지 NVDA를 사용하여 웹페이지에 WAI-ARIA가 적용 되었을 때 스크린리더 사용자들에게 어떤 도움을 줄 수 있는지에 대해 아주 간략하게 알아 보았습니다. 이 글에서 소개한 WAI-ARIA는 많은 ARIA의 Role들과 Property들 중 아주 일부 만을 소개한 것입니다. 또한 위에 소개한 요소들을 서로 결합하여 사용하는 경우 역시 많습니다. 이에 대해서는 다음 기회에 더욱 자세하게 다루어 볼 것임을 약속 드립니다. 잠깐 언급 하였지만 'menuitem Role', 'ARIA-haspopup', 'menu Role'등을 활용하여 복잡한 웹 구조를 스크린리더 사용자들에게 알맞게 제공하는 것을 포함하여 'ARIA-selected'을 이용하여 탭메뉴를 구성하는 것도 빼 놓을 수는 없을 것입니다. 이 외에도 많은 것이 있지만 아쉬움을 뒤로 하고 다음 글에서 더욱 알찬 내용으로 찾아 뵙겠습니다.