WAI-ARIA의 tab, 아직 사용하긴 이르다.

WAI-ARIA에는 다양한 위젯 – 여기서 위젯이란 tab, dialog, alert 등을 말한다. – 이 있는데 그 중 tab은 아직 조금 문제가 많은 것 같다.

WAI-ARIA 저작 가이드 문서의 tab 부분을 보면 탭 인터페이스를 구현하는 방법을 자세히 소개하고 있는데 그 중 키보드 인터페이스에서 좌/우, Ctrl+Tab/Ctrl+Shift+Tab, Ctrl+PageUp/Ctrl+PageDown 키를 이용하여 탭과 탭을 이동하는 기능을 구현하도록 문서화되어 있는데 좌/우 키는 기존에 웹 페이지에서 탭 키를 통해 링크를 이동하던 사용자에게 혼란을, Ctrl+Tab/Ctrl+Shift+Tab이나 Ctrl+PageUp/Ctrl+PageDown 키는 브라우저의 탭간 이동에 사용되고 있어 중복된다. (문서에 이 내용도 언급이 되어있다! -_-)

현재 탭(처럼 보이는) 마크업에는 크게 2가지 코드 형태가 사용된다고 생각한다.

<div class="tabpanel">
	<ul class="tablist">
		<li><a href="#tab1">Tab1</a></li>
		<li><a href="#tab2">Tab2</a></li>
		<li><a href="#tab3">Tab3</a></li>
	</ul>
	<div id="tab1">
		<h1>Tab1</h1>
		Tab1 Content</div>
	<div id="tab2">
		<h1>Tab2</h1>
		Tab2 Content</div>
	<div id="tab3">
		<h1>Tab3</h1>
		Tab3 Content</div>
</div>
[코드1] 탭이 목록형태로 마크업되고 각각 탭 내용으로 연결되도록 구성한 마크업
<div class="tabpanel">
	<h1>Tab1</h1>
	<div id="tab1">Tab1 Content</div>
	<h1>Tab2</h1>
	<div id="tab2">Tab2 Content</div>
	<h1>Tab3</h1>
	<div id="tab3">Tab3 Content</div>
</div>
[코드2] 탭을 헤딩으로, 탭 내용을 헤딩에 이어지는 컨텐츠로 구성한 마크업

[코드1]에는 문제가 발생할 여지가 많다. 탭에서 href="#tab1"와 같은 링크가 생략되는 경우, 링크가 올바로 컨텐츠를 가리키지 못하는 경우, 컨텐츠에 헤딩이 누락되는 경우 등이다. 그리고 [코드1]을 자바스크립트를 통해 구현한 경우 보통 탭의 링크를 취소(preventDefault) 시키기 때문에 다른 탭들을 건너뛰어 해당 내용으로 이동해야 하기 때문에 마우스 사용자 이외에는 비효율적이다. 탭이 많으면 많을수록 더욱 더 비효율적이 된다.

코드1의 키보드 이동 순서

[그림1] 코드1의 키보드 이동 순서는 1번탭 → 2번탭 → … → 마지막 탭 → 선택된 탭 내용 순이다.

[코드2]는 코드1의 키보드 비효율성이 전혀 없다. 코드1의 문제가 발생할 여지들도 애초에 차단된다. 탭 UI를 위해 헤딩을 작성하도록 유도시키고 빼먹거나 잘못 구현할지 모르는 탭 링크들을 애초에 제거하였다.

코드2의 키보드 이동 순서

[그림2] 코드2의 키보드 이동 순서는 1번탭 → 1번탭 내용 → 2번탭 → 2번탭 내용 → …

웹 어플리케이션 위젯을 OS의 그것들처럼 인식시키려고 하는 ARIA의 구현방식에서 볼 때는 코드2와 같은 구현이 적절하지 않다고 생각되기도 한다. 하지만 마우스 사용자에게는 어차피 상관없는 문제이고 키보드 사용자에게는 이전의 웹 페이지들과 다른 사용행태에 대한 혼란을 없앨 수 있다(익숙함을 유지하는 것을 영원히 장점이라고 하긴 어렵지만…). 무엇보다 개발자들에게 오류 발생 가능성을 상당히 줄여줄 수 있다는 사실 때문에 앞서 언급했던 ARIA tab의 문제들을 제거한 라이브러리들이 등장하기 전까지는 코드2와 같은 구현 방식을 추천하고 싶다.