🧱 커스텀 컴포넌트의 ARIA 속성 누락: 접근성의 벽 쌓기

Why Wrong?

How to Fix?

// Before: 커스텀 탭 컴포넌트 (ARIA 속성 없음)
import React, { useState } from 'react';

function CustomTabs() {
  const [activeTab, setActiveTab] = useState('tab1');

  return (
    <div className="tab-container">
      <div className="tab-list">
        <div
          className={`tab-item ${activeTab === 'tab1' ? 'active' : ''}`}
          onClick={() => setActiveTab('tab1')}
          // 키보드 이벤트 핸들링 및 ARIA 속성 부재로 접근성 문제 발생
        >
          탭 1
        </div>
        <div
          className={`tab-item ${activeTab === 'tab2' ? 'active' : ''}`}
          onClick={() => setActiveTab('tab2')}
        >
          탭 2
        </div>
      </div>
      <div className="tab-content">
        {activeTab === 'tab1' && (
          <div className="panel">
            <p>탭 1의 내용입니다.</p>
          </div>
        )}
        {activeTab === 'tab2' && (
          <div className="panel">
            <p>탭 2의 내용입니다.</p>
          </div>
        )}
      </div>
    </div>
  );
}

export default CustomTabs;

// After: ARIA 속성과 키보드 접근성이 적용된 커스텀 탭 컴포넌트
import React, { useState, useRef, useEffect } from 'react';

function AccessibleTabs() {
  const [activeTab, setActiveTab] = useState('tab1');
  const tabRefs = useRef({});

  // 키보드 네비게이션 (좌우 화살표 키로 탭 이동, Enter/Space로 탭 선택)
  const handleKeyDown = (e, tabId) => {
    const tabIds = ['tab1', 'tab2'];
    const currentIndex = tabIds.indexOf(tabId);
    let newIndex = currentIndex;

    if (e.key === 'ArrowRight') {
      newIndex = (currentIndex + 1) % tabIds.length;
    } else if (e.key === 'ArrowLeft') {
      newIndex = (currentIndex - 1 + tabIds.length) % tabIds.length;
    }

    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault(); // 스페이스바의 기본 동작 방지 (스크롤 등)
      setActiveTab(tabId);
    } else if (newIndex !== currentIndex) {
      setActiveTab(tabIds[newIndex]);
      // 새 활성 탭에 포커스 이동하여 키보드 사용자가 인지하도록 함
      tabRefs.current[tabIds[newIndex]].focus();
    }
  };

  useEffect(() => {
    // 활성 탭이 변경될 때 해당 탭에 포커스를 보장 (선택 사항이나 UX 개선에 도움)
    if (tabRefs.current[activeTab]) {
      tabRefs.current[activeTab].focus();
    }
  }, [activeTab]);

  return (
    <div className="tab-container">
      {/* role="tablist": 탭 그룹임을 명시, aria-label: 그룹의 목적을 스크린 리더에 알림 */}
      <div role="tablist" aria-label="Example Tabs" className="tab-list">
        <div
          id="tab1-header" // 탭 패널과의 관계를 위한 고유 ID
          role="tab" // 요소가 탭임을 명시
          aria-controls="tab1-panel" // 이 탭이 제어하는 패널의 ID를 명시
          aria-selected={activeTab === 'tab1'} // 탭의 선택 상태를 명시
          tabIndex={activeTab === 'tab1' ? 0 : -1} // 활성 탭만 포커스 가능하도록 설정
          className={`tab-item ${activeTab === 'tab1' ? 'active' : ''}`}
          onClick={() => setActiveTab('tab1')}
          onKeyDown={(e) => handleKeyDown(e, 'tab1')}
          ref={(el) => (tabRefs.current['tab1'] = el)}
        >
          탭 1
        </div>
        <div
          id="tab2-header"
          role="tab"
          aria-controls="tab2-panel"
          aria-selected={activeTab === 'tab2'}
          tabIndex={activeTab === 'tab2' ? 0 : -1}
          className={`tab-item ${activeTab === 'tab2' ? 'active' : ''}`}
          onClick={() => setActiveTab('tab2')}
          onKeyDown={(e) => handleKeyDown(e, 'tab2')}
          ref={(el) => (tabRefs.current['tab2'] = el)}
        >
          탭 2
        </div>
      </div>
      {activeTab === 'tab1' && (
        <div
          id="tab1-panel" // 탭 헤더와의 관계를 위한 고유 ID
          role="tabpanel" // 요소가 탭 패널임을 명시
          aria-labelledby="tab1-header" // 이 패널이 어떤 탭 헤더에 의해 레이블링되는지 명시
          tabIndex={0} // 패널 내용에 직접 포커스 진입 가능하도록 (선택 사항)
          className="panel"
        >
          <p>탭 1의 내용입니다.</p>
        </div>
      )}
      {activeTab === 'tab2' && (
        <div
          id="tab2-panel"
          role="tabpanel"
          aria-labelledby="tab2-header"
          tabIndex={0}
          className="panel"
        >
          <p>탭 2의 내용입니다.</p>
        </div>
      )}
    </div>
  );
}

export default AccessibleTabs;

You Might Also Like