WAI-ARIA 속성을 활용하여 자바스크립트로 구현하는 탭 패널 접근성 개선 방법

19 Oct 2023

javascript

접근성(Accessibility)은 모든 사용자가 웹사이트나 애플리케이션을 동등하게 이용할 수 있도록 보장하는 중요한 요소입니다. 특히 탭 패널(Tab Panel)과 같은 상호작용 요소의 경우, 시각적인 효과와 함께 키보드 접근성을 제공해야 합니다. 이번 기사에서는 WAI-ARIA(웹 접근성 개선을 위한 인터페이스 구조) 속성과 자바스크립트를 활용하여 탭 패널의 접근성을 개선하는 방법에 대해 알아보겠습니다.

1. WAI-ARIA 속성 소개

WAI-ARIA는 웹 콘텐츠와 웹 애플리케이션의 접근성을 향상시키기 위한 표준입니다. 이 표준은 보조 기술(Assistive Technology)과 상호작용할 수 있도록 웹 요소의 역할, 상태, 속성 정보를 제공합니다. 탭 패널에서 접근성을 개선하기 위해 주로 사용되는 WAI-ARIA 속성은 다음과 같습니다:

role: 요소의 역할을 정의합니다. 탭(tab)과 패널(tabpanel)로 설정합니다.
aria-selected: 현재 선택된 탭을 나타냅니다. true 또는 false 값을 가집니다.
aria-controls: 탭이 제어하는 패널을 나타냅니다. 패널의 ID를 값으로 설정합니다.
aria-labelledby: 탭의 제목 요소와 연결됩니다. 제목 요소의 ID를 값으로 설정합니다.

2. 탭 패널 구현

먼저 HTML 구조를 준비합니다. 탭을 나타내는 버튼과 연결된 패널을 구성합니다.

<!-- 탭 버튼 -->
<button role="tab" aria-selected="true" aria-controls="panel-1" aria-labelledby="tab-1">Tab 1</button>
<button role="tab" aria-selected="false" aria-controls="panel-2" aria-labelledby="tab-2">Tab 2</button>
<button role="tab" aria-selected="false" aria-controls="panel-3" aria-labelledby="tab-3">Tab 3</button>

<!-- 탭 패널 -->
<div id="panel-1" role="tabpanel" aria-hidden="false" aria-labelledby="tab-1">Tab 1 content</div>
<div id="panel-2" role="tabpanel" aria-hidden="true" aria-labelledby="tab-2">Tab 2 content</div>
<div id="panel-3" role="tabpanel" aria-hidden="true" aria-labelledby="tab-3">Tab 3 content</div>

다음으로 자바스크립트를 활용하여 클릭 이벤트에 따라 탭을 선택하고 패널을 활성화하도록 구현합니다.

const tabs = document.querySelectorAll('[role="tab"]');
const panels = document.querySelectorAll('[role="tabpanel"]');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    // 선택된 탭의 상태를 변경합니다.
    tabs.forEach(t => t.setAttribute('aria-selected', 'false'));
    tab.setAttribute('aria-selected', 'true');

    // 선택된 탭의 패널을 활성화합니다.
    panels.forEach(panel => {
      panel.setAttribute('aria-hidden', 'true');
    });
    const panelId = tab.getAttribute('aria-controls');
    const panel = document.getElementById(panelId);
    panel.setAttribute('aria-hidden', 'false');
  });
});

3. 접근성 개선 요소

위의 코드를 통해 탭 패널을 구현하고 WAI-ARIA 속성을 활용하여 접근성을 개선하였습니다. 구현된 탭 패널은 다음과 같은 접근성 개선 요소를 가지고 있습니다:

탭 버튼의 선택 상태(aria-selected)를 변경하여 시각적 표시와 키보드 접근성을 함께 제공합니다.
패널의 숨김 상태(aria-hidden)를 변경하여 선택된 패널만 화면에 표시되도록 합니다.

4. 마무리

WAI-ARIA 속성과 자바스크립트를 활용하여 탭 패널의 접근성을 개선할 수 있습니다. 이를 통해 시각적인 효과와 함께 키보드 접근성까지 제공하여 모든 사용자가 웹사이트를 동등하게 이용할 수 있습니다.

더 많은 정보를 알고 싶다면 WAI-ARIA와 JavaScript Tab Panel 을 참조해보세요.

#접근성 #WAI-ARIA