본문으로 바로가기

WAI-ARIA 살펴보기

이번 글에서는 NVDA를 활용한 WAI-ARIA 살펴보기 #1 에 이어서 사용자의 입장에서 꼭 필요한 WAI-ARIA의 Role과 Property 몇 가지를 더 살펴보도록 하겠습니다.





탭 컨트롤

웹페이지가 점점 다이나믹해지고 복잡해짐에 따라 보다 사용자들이 편리하게 해당 페이지를 이용할 수 있도록 하는 많은 방법들이 고안되어 있습니다.

그 중 하나가 여러 개의 콘텐츠 그룹을 탭으로 분류하여 사용성을 높히는 방법이 있습니다. 

그러나 스크린리더 사용자의 입장에서 보았을 때 어떤 웹페이지의 콘텐츠들이 탭으로 분류되어 있을 경우 오히려 사용성에 있어 문제가 되는 경우가 종종 있습니다. 


그 이유는 다음과 같습니다.

일반적으로 웹페이지에서 콘텐츠를 탭메뉴로 그룹화하여 제공할 때 탭을 선택할 수 있는 'Button' 또는 'Link'요소를 선언하여 사용자가 해당 요소를 눌러 선택하도록 하고 있습니다. 

스크린리더 사용자가 아닐 경우 탭을 전환하였을 때 웹페이지의 콘텐츠 일부가 전환되고 있고 탭메뉴를 선택하는 요소들 역시 시각적으로 알 수 있도록 되어 있기에 사용에 큰 문제가 없으나 스크린리더 사용자는 탭을 전환하는 버튼 혹은 링크 등의 요소가 탭메뉴 요소라는 것을 바로 알 수 없거니와 콘텐츠 구조가 탭의 형태라는 것을 쉽게 알기 어렵습니다. 

그리하여 종래에는 탭을 전환하는 요소 중 현재 선택되어 있는 요소에 '선택됨' 등의 텍스트가 삽입되도록 하는 방법을 사용해 왔습니다. 

그렇다 하더라도 여전히 남는 문제는 스크린리더 사용자들이 탭을 전환할 수 있는 요소를 탐색할 때 해당 콘텐츠들이 탭 요소라는 것을 직관적으로 알기 어렵다는 문제는 해결되지 않습니다. 

이러한 경우에 WAI-ARIA의 Role중 하나인 'Tab'와 함께 ARIA-sellected를 사용할 수 있습니다.


아래의 링크에서 실제 적용된 예를 확인할 수 있습니다.

ARIA-Tab가 적용된 탭 DEMO


해당 페이지를 살펴보면 'primary'와 'social'이라는 두 개의 요소를 확인할 수 있습니다. 

또한 두 개중 아무 요소에 포커스가 위치했을 때 NVDA는 'Tab'요소라는 것을 출력하고 있으며, 'primary'탭은 선택되어 있다는 것을 알 수 있습니다. 

정리하자면 Role의 유형을 'Tab'로 임의의 요소에 지정하고, ARIA-selected 속성을 함께 적절히 선언하면 위에서 확인한 샘플과 같이 스크린리더는 출력하게 됩니다. 

이처럼 해당 ARIA 속성을 잘 사용하면 해당 객체가 의미하는 컨트롤 요소를 제대로 표현할 수 있게 됩니다.



'Radiogroup'과 'ARIA-labelledby'

두 번째로 ARIA의 Role중 하나인 'RAdiogroup'에 대해 알아보도록 하겠습니다. 

종종 우리는 웹상에서 수많은 문항이 있는 설문을 접할 때가 있습니다. 또는 기타의 이유로 여러 개의 'Radio' 또는 'Checkbox'가 모여있는 폼 영역을 접하는 경우가 있습니다. 

이러한 폼 요소들은 일정하게 그룹을 분류할 수 있습니다. 

여기서 스크린리더 사용자는 한 가지 문제에 마주치게 됩니다. 

그것은 만약 스크린리더 사용자가 'Tab'키를 이용하여 해당 영역을 탐색할 때 스크린리더는 'Tab'키의 포커스가 위차한 폼 요소와 연결된 'label'값만을 출력한다는 것입니다. 

아래 링크에서 구체적인 예를 확인하면서 이 문제에 대해 다루도록 하겠습니다.

Radiogroup DEMO VIEW


샘플 페이지를 확인해 보면 여러 개의 'Radio'요소들이 확인될 것입니다. 

그 중 '여러분은 햄버거를 좋아하십니까?'라는 부분을 확인해 보겠습니다. 

'Yes'또는 'No'를 선택할 수 있는 두 개의 Radio요소가 있습니다. 

그러나 NVDA를 실행한 상태에서 위, 아래 방향키를 전혀 사용하지 않고 Tab키만으로 탐색한다면 어떤 것에 대한 'yes'인지 전혀 알 수 없습니다. 

각 'Radio'요소에 연결된 'Label'의 값이 단지 'Yes'와 'No'로 제공되고 있기 때문입니다. 

물론 'fieldset'과 'legend'를 결합하여 폼 요소들을 그룹화하면 이 문제가 해결됩니다. 

하지만 만약 이 요소들을 선언하기 어려울 경우 'Radiogroup''ARIA-Labelledby'를 조합하여 사용할 수 있습니다. 

위 샘플 페이지에서 '성별'을 선택하는 'Radio'가 그 예입니다. 즉 Tab키를 눌렀을 때 현재 포커스가 위치한 'Radio'요소는 성별을 선택하는 폼 요소의 그룹 중 하나이며 '남자'일 경우 선택할 수 있는 것임을 정확히 알려주게 됩니다.


'ARIA-labelledby'는 여러 개의 폼 요소를 그룹화하여 동일한 'Label'값으로 묶어서 제공하고 싶을 때 사용할 수 있습니다.



dialogue role

웹페이지에서 어떤 이벤트가 발생하여 Alert이 레이어 형태로 띄워졌을 때 스크린리더 사용자 입장에서 해당 메시지가 대호상자 형태로 출력되고 있다는 것을 알려주는 것은 굉장히 중요합니다. 

이는 소리만 들어서는 팝업이 뜬 것인지 혹은 일반 메시지인지를 구분하기 어려울 수 있기 때문입니다. 

 이때 사용할 수 있는 방법 중 하나가 role="dialogue" 입니다. 아래 샘플 페이지의 예를 확인해 보도록 하겠습니다.

Dialogue role DEMO VIEW


NVDA는 Dialogue role을 만나면 대화상자라고만 읽어줍니다. 이것은 NVDA에서 해당 롤을 처리하는 특징으로서 Dialogue role이 적용된 대화상자에서 엔터를 누르면 대화상자의 내용을 들을 수 있습니다. 또한 소스코드를 보시면 아시겠지만 해당 role에는 'ARIA-labelledby'도 함께 사용되었는데 이는 대화상자의 제목을 스크린리더에서 인식하도록 하기 위함입니다.




마치며

지금까지 오픈소스 기반의 스크린리더인 NVDA에 대한 소개와 함께 국제적으로 비중이 확대되어 가고 있는 웹 접근성의 기술 중 하나인 WAI-ARIA에 대한 내용을 간략하게 살펴 보았습니다. 

NVDA는 오픈소스 기반의 무료 스크린리더이기 때문에 비교적 자유롭게 사용해 볼 수 있다는 장점을 가지고 있어 접근성에 관심있는 분들이 실제 스크린리더를 사용해 보면서 웹 접근성을 개선하는데에 도움이 될 수 있습니다.

게다가 NVDA는 상당히 그 품질이 우수한 스크린리더이고 언급한바와 같이 WAI-ARIA의 Role과 Property를 잘 지원하는 편이기 때문에 최신의 웹 접근성 기술들을 직접 체험할 수 있는 장점을 가지고 있습니다. 

아직까지 국내에서는 WAI-ARIA가 널리 적용되고 있지는 않지만 앞으로 스크린리더 사용자에게 매우 큰 도움이 될 수 있는 WAI-ARIA가 적절하게 적용된 웹 환경이 구축된다면 다양한 사용자가 좀더 풍요로운 웹을 경험하실 수 있을 것입니다.



Jaehee's WebClub



[출처] NULI(널리)