[웹 표준 시리즈 #4] "움직이는 웹도 표준이 있나요?" : Vanilla JS와 WAI-ARIA 실전편

우리는 2부와 3부를 통해 탄탄한 HTML 구조가 얼마나 중요한지 배웠습니다. 하지만 현대의 웹은 클릭하고, 펼쳐지고, 팝업이 뜨는 등 쉴 새 없이 움직입니다.

여기서 문제가 발생합니다. 눈에 보이는 디자인은 바뀌지만, 보조 공학 기기(스크린 리더 등)는 이 변화를 눈치채지 못할 때가 많기 때문입니다. 오늘은 자바스크립트로 동적인 기능을 구현할 때 웹 표준을 지키는 필살기, WAI-ARIA를 알아보겠습니다.

---

 1. WAI-ARIA, 왜 필요한가요?

자바스크립트로 특정 요소를 display: none;에서 block;으로 바꿨다고 가정해 봅시다. 눈으로는 보이지만, 스크린 리더는 이 메뉴가 열렸는지, 닫혔는지, 혹은 지금 내가 누르는 것이 탭 버튼인지 일반 버튼인지 알 수 없습니다.

WAI-ARIA(Web Accessibility Initiative - Accessible Rich Internet Applications)는 바로 이럴 때 사용합니다. HTML 태그만으로는 설명하기 힘든 '역할(Role)', '상태(State)', '속성(Property)'을 추가로 명시해주는 일종의 '보충 설명서'입니다.

---

 2. 실전! 접근 가능한 탭(Tab) 메뉴 만들기

가장 흔하게 쓰이는 탭 메뉴를 BEM 방법론과 Vanilla JS, 그리고 WAI-ARIA를 결합해 구현해 보겠습니다.

📄 HTML 구조 (BEM + WAI-ARIA)

<div class="c-tabs" data-component="tabs">
  <div class="c-tabs__list" role="tablist">
    <button 
      type="button" 
      class="c-tabs__item c-tabs__item--active" 
      role="tab" 
      aria-selected="true" 
      aria-controls="panel-1" 
      id="tab-1"
    >
      공지사항
    </button>
    <button 
      type="button" 
      class="c-tabs__item" 
      role="tab" 
      aria-selected="false" 
      aria-controls="panel-2" 
      id="tab-2" 
      tabindex="-1"
    >
      이벤트
    </button>
  </div>

  <div 
    class="c-tabs__panel c-tabs__panel--active" 
    id="panel-1" 
    role="tabpanel" 
    aria-labelledby="tab-1"
  >
    <p>최신 공지사항 내용입니다.</p>
  </div>
  <div 
    class="c-tabs__panel" 
    id="panel-2" 
    role="tabpanel" 
    aria-labelledby="tab-2" 
    hidden
  >
    <p>진행 중인 이벤트가 없습니다.</p>
  </div>
</div>

---

⚙️ Vanilla JS 로직 (Airbnb Style Guide 준수)

const initTabs = () => {
  const tabContainers = document.querySelectorAll('[data-component="tabs"]');

  tabContainers.forEach((container) => {
    const tabs = container.querySelectorAll('[role="tab"]');
    const panels = container.querySelectorAll('[role="tabpanel"]');

    const switchTab = (event) => {
      const targetTab = event.currentTarget;
      const targetPanelId = targetTab.getAttribute('aria-controls');

      tabs.forEach((tab) => {
        tab.classList.remove('c-tabs__item--active');
        tab.setAttribute('aria-selected', 'false');
        tab.setAttribute('tabindex', '-1');
      });

      panels.forEach((panel) => {
        panel.classList.remove('c-tabs__panel--active');
        panel.setAttribute('hidden', '');
      });

      targetTab.classList.add('c-tabs__item--active');
      targetTab.setAttribute('aria-selected', 'true');
      targetTab.setAttribute('tabindex', '0');

      const targetPanel = container.querySelector(`#${targetPanelId}`);
      if (targetPanel) {
        targetPanel.classList.add('c-tabs__panel--active');
        targetPanel.removeAttribute('hidden');
      }
    };

    tabs.forEach((tab) => {
      tab.addEventListener('click', switchTab);
    });
  });
};

document.addEventListener('DOMContentLoaded', initTabs);

---

 코드 밖에서 드리는 상세 설명

위 코드는 사용자가 탭을 클릭했을 때 시각적인 변화뿐만 아니라 보조 공학 기기에도 상태 변화를 완벽하게 전달하도록 설계되었습니다.

1. Role 명시: role="tablist", role="tab", role="tabpanel"을 통해 이 구조가 탭 시스템임을 브라우저에 명확히 알립니다.
2. Aria 속성 제어: 자바스크립트로 단순히 클래스만 바꾸는 것이 아니라 aria-selected 값을 true/false로 토글합니다. 스크린 리더는 이 값을 읽어 사용자에게 "선택됨" 여부를 알려줍니다.
3. 포커스 관리: 선택되지 않은 탭에는 tabindex="-1"을 주어 불필요한 키보드 접근을 막고, 활성화된 탭에만 포커스가 가도록 관리했습니다.
4. Hidden 속성 활용: display: none 대신 HTML5 표준인 hidden 속성을 토글하여 시각적으로나 구조적으로나 패널을 숨깁니다.
5. Vanilla JS & Airbnb Style: 외부 라이브러리 의존성을 제거하고 화살표 함수, const, forEach 등 현대적인 자바스크립트 문법을 사용하여 깔끔하고 빠른 로직을 구성했습니다.

---

 마치며: 기술보다 중요한 것은 '연결'입니다

자바스크립트는 웹을 즐겁게 만들지만, 잘못 쓰면 누군가에게는 거대한 장벽이 됩니다. WAI-ARIA는 그 장벽을 허물고 기술과 사용자를 연결해주는 따뜻한 가이드라인입니다.

화려한 애니메이션을 고민하기 전에, "내 코드가 보이지 않는 곳에서도 친절한가?"를 먼저 고민하는 개발자가 진짜 실력 있는 개발자 아닐까요?

---

 4부 핵심 요약

• 동적인 UI 변화는 반드시 aria-selected, aria-expanded 등으로 상태를 알려야 한다.
• role 속성을 통해 태그의 기본 의미를 넘어선 실제 역할을 부여한다.
• 바닐라 자바스크립트로 클래스와 ARIA 속성을 동시에 제어하는 것이 표준 코딩의 핵심이다.