웹 접근성 ✅ 모달, 드롭다운, 탭 UI를 위한 ARIA 패턴

 

 

웹 접근성을 고려하지 않은 UI는 시각장애인, 키보드 사용자 등에게 큰 불편을 줍니다.
이를 해결하기 위해 ARIA 속성과 포커스 제어를 올바르게 적용해야 합니다.
이번 포스팅에서는 실무에서 가장 많이 쓰이는 세 가지 UI 패턴을 정리해보겠습니다.

---

🪟 1. 모달(Dialog)

문제점

• 모달 열렸을 때 배경 요소까지 포커스가 이동
• 스크린리더가 모달임을 인식하지 못함

✅ 접근성 패턴

 

<div role="dialog" aria-modal="true" aria-labelledby="modalTitle">
  <h2 id="modalTitle">회원가입</h2>
  <p>정보를 입력해주세요.</p>
  <button aria-label="닫기">X</button>
</div>

 

📌 포인트

• role="dialog" + aria-modal="true"
• 모달 열릴 때 첫 번째 포커스 이동
• 닫을 때 원래 버튼으로 포커스 복귀
• 배경에는 aria-hidden="true" 적용

---

⬇️ 2. 드롭다운 메뉴

문제점

• div만으로 메뉴 구성 → 스크린리더 인식 불가
• 키보드 화살표로 메뉴 이동 불가능

✅ 접근성 패턴

 

<button aria-haspopup="true" aria-expanded="false" aria-controls="menu1">
  메뉴 열기
</button>
<ul id="menu1" role="menu">
  <li role="menuitem"><a href="#">프로필</a></li>
  <li role="menuitem"><a href="#">설정</a></li>
</ul>

 

📌 포인트

• aria-haspopup="true" → 메뉴 있음 알림
• aria-expanded → 열림/닫힘 상태 반영
• role="menuitem" → 항목으로 인식
• 키보드 ↓/↑로 항목 이동 지원

---

🗂️ 3. 탭 UI

문제점

• 탭 전환 시 화면 독자가 어떤 탭이 활성화됐는지 알 수 없음

✅ 접근성 패턴

 

<div role="tablist" aria-label="콘텐츠 탭">
  <button role="tab" aria-selected="true" aria-controls="panel1" id="tab1">
    소개
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel2" id="tab2">
    리뷰
  </button>
</div>

<div id="panel1" role="tabpanel" aria-labelledby="tab1">소개 내용</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>리뷰 내용</div>

 

📌 포인트

• role="tablist", role="tab", role="tabpanel" 구조
• 활성 탭 → aria-selected="true", 비활성 탭 → hidden
• 키보드 ←/→로 탭 전환

---

⚡ 실무 적용 체크리스트

• ✅ 모달 → role="dialog", 포커스 트랩
• ✅ 드롭다운 → aria-haspopup, 키보드 이동 지원
• ✅ 탭 → aria-selected, tabpanel과 연동
• ✅ 공통 → 키보드 Tab, Enter, Esc 동작 반드시 확인

---

📝 마무리 정리

• ARIA 속성은 **보조 기술(스크린리더)**을 위한 설명 역할
• 모달, 드롭다운, 탭은 접근성 이슈가 가장 많은 UI → 반드시 패턴화 필요
• 접근성은 “옵션”이 아니라 웹 표준과 사용자 경험의 기본입니다