웹 접근성을 고려하지 않은 UI는 시각장애인, 키보드 사용자 등에게 큰 불편을 줍니다.이를 해결하기 위해 ARIA 속성과 포커스 제어를 올바르게 적용해야 합니다.이번 포스팅에서는 실무에서 가장 많이 쓰이는 세 가지 UI 패턴을 정리해보겠습니다.🪟 1. 모달(Dialog)문제점모달 열렸을 때 배경 요소까지 포커스가 이동스크린리더가 모달임을 인식하지 못함✅ 접근성 패턴 회원가입 정보를 입력해주세요. X 📌 포인트role="dialog" + aria-modal="true"모달 열릴 때 첫 번째 포커스 이동닫을 때 원래 버튼으로 포커스 복귀배경에는 aria-hidden="true" 적용⬇️ 2. 드롭다운 메뉴문제점div만으로 메뉴 구성 → 스크린리더 인식 불가키보드 화살표로 메뉴 이동 불가능✅ 접근성..
