소개

웹 접근성은 모든 사용자가 웹 콘텐츠에 동등하게 접근할 수 있도록 하는 것을 의미합니다. 이는 장애인, 고령자, 저시력자 등 다양한 사용자 그룹에게 웹 사용을 용이하게 만들어줍니다. 자바스크립트 탭 패널은 웹 사이트나 웹 애플리케이션에서 많이 사용되는 UI 패턴 중 하나입니다. 그러나 기본적인 자바스크립트 탭 패널의 접근성 문제가 있을 수 있으며, 이를 WAI-ARIA 속성을 이용하여 해결할 수 있습니다.

문제

일반적인 자바스크립트 탭 패널은 <ul> 태그와 <li> 태그를 사용하여 구성됩니다. 각 탭은 클릭할 수 있는 링크 형태로 표시되고, 해당 탭을 클릭하면 관련된 내용이 나타납니다. 이 때, 일반적으로는 탭을 클릭하고 관련 내용이 표시되지만, 스크린 리더 사용자나 키보드 사용자 등은 탭을 클릭하지 않고는 해당 내용에 접근할 수 없습니다. 이는 접근성 문제를 야기할 수 있습니다.

WAI-ARIA 속성을 이용한 해결 방안

WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)는 웹 접근성을 높이기 위해 개발된 스펙입니다. WAI-ARIA 속성을 이용하면 자바스크립트 탭 패널의 접근성을 개선할 수 있습니다.

1. role 속성: 자바스크립트 탭 패널을 의미하는 컨테이너 요소에 role="tablist" 속성을 추가합니다. 이 속성은 탭이 그룹으로 묶인 요소임을 나타냅니다.
2. aria-selected 속성: 각 탭에 aria-selected 속성을 추가합니다. 이 속성은 활성화된 탭을 나타냅니다. 초기에는 첫 번째 탭을 활성화 상태로 설정하고, 탭을 클릭할 때마다 해당 탭에만 aria-selected="true" 속성을 추가하고 나머지 탭은 aria-selected="false"로 설정합니다.
3. aria-controls 속성: 각 탭과 관련된 내용 컨테이너에 aria-controls 속성을 추가합니다. 이 속성은 해당 탭과 연결된 내용 요소를 지정합니다. 내용 컨테이너에는 role="tabpanel" 속성을 추가하여 해당 요소가 탭 패널의 내용을 나타내는 것임을 나타냅니다.

이렇게 WAI-ARIA 속성을 이용하여 자바스크립트 탭 패널을 구현하면 스크린 리더 사용자나 키보드 사용자 등이 탭의 클릭 없이도 탭 패널의 내용에 접근할 수 있습니다.

예제 코드

아래는 WAI-ARIA 속성을 이용하여 자바스크립트 탭 패널을 접근성을 개선하는 예제 코드입니다.

<div role="tablist">
  <a href="#panel1" role="tab" aria-selected="true" aria-controls="panel1">Tab 1</a>
  <a href="#panel2" role="tab" aria-selected="false" aria-controls="panel2">Tab 2</a>
  <a href="#panel3" role="tab" aria-selected="false" aria-controls="panel3">Tab 3</a>
</div>

<div id="panel1" role="tabpanel">
  ...
</div>
<div id="panel2" role="tabpanel">
  ...
</div>
<div id="panel3" role="tabpanel">
  ...
</div>

결론

WAI-ARIA 속성을 이용하여 자바스크립트 탭 패널의 접근성 문제를 해결할 수 있습니다. 이를 통해 모든 사용자가 웹 사이트나 웹 애플리케이션의 탭 패널을 동등하게 이용할 수 있도록 할 수 있습니다.

참고 자료

• WAI-ARIA: Web Accessibility Initiative - Accessible Rich Internet Applications
• WAI-ARIA Authoring Practices