HTML, CSS

웹 접근성💡 ARIA 속성, 키보드 내비게이션, 모달 접근성까지 완전 정리

jonbeo 2025. 10. 14. 11:02
반응형

 

 

웹 접근성은 단순히 alt 속성 넣고, 시맨틱 태그를 쓰는 수준에서 끝나지 않습니다.
실제 프로젝트에서는 모달, 드롭다운, 탭, 다크모드 등 동적 UI 컴포넌트에서 접근성 문제가 자주 발생합니다.
이번 포스팅에서는 실무에서 특히 중요한 심화 접근성 주제 3가지를 다뤄봅니다.

🧠 1. ARIA 속성 활용하기

✅ ARIA란?

  • Accessible Rich Internet Applications의 약자
  • HTML 태그만으로 의미를 전달하기 어려운 경우, **보조 기술(스크린리더 등)**에 추가 정보를 제공

📌 자주 쓰는 ARIA 속성

속성 설명
aria-label 스크린리더용 레이블 제공
aria-hidden="true" 보조 기술에서 숨김 처리
aria-expanded="true/false" 드롭다운, 아코디언의 열림 상태 표시
aria-modal="true" 모달 창임을 명시
role="dialog" 해당 요소가 모달 다이얼로그임을 정의

 

⌨️ 2. 키보드 내비게이션 지원

  • 모든 UI 요소는 마우스 없이 Tab 키, Enter, Space, 방향키로 조작 가능해야 합니다.
  • 문제 사례:
    • 모달 열었을 때 배경 요소도 Tab으로 포커스 이동 가능 → ❌
    • 커스텀 셀렉트박스에서 방향키 동작 안 됨 → ❌

📌 해결 방법: 포커스 트랩(Focus Trap)

 
function trapFocus(modal) {
  const focusableElements = modal.querySelectorAll('a, button, input, textarea, [tabindex]:not([tabindex="-1"])');
  const first = focusableElements[0];
  const last = focusableElements[focusableElements.length - 1];

  modal.addEventListener("keydown", (e) => {
    if (e.key === "Tab") {
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    }
  });
}

 

👉 모달 안에서만 포커스가 순환되도록 처리해야 합니다.

 

🪟 3. 모달/다이얼로그 접근성

문제점

  • 모달 열려도 스크린리더는 여전히 배경 콘텐츠 읽음
  • 포커스가 모달 밖으로 빠져나감

해결 방법

  1. 모달 열리면 aria-hidden="true"를 배경 콘텐츠에 추가
  2. 모달에는 role="dialog" + aria-modal="true" 추가
  3. 모달 열릴 때 첫 번째 버튼에 포커스 이동
  4. 모달 닫으면 원래 버튼으로 포커스 복귀

📝 마무리 정리

  • 기초 접근성은 시맨틱 태그 + alt 속성 + 대비
  • 심화 접근성은 ARIA 속성 + 키보드 내비게이션 + 포커스 제어
  • 특히 모달, 드롭다운, 아코디언 등 동적 컴포넌트에서는 접근성 고려가 필수입니다.

접근성을 지킨 UI는 단순히 법적 요구사항 충족을 넘어서, 모든 사용자에게 더 나은 UX를 제공합니다.

반응형