jonbeo 님의 블로그

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

웹 접근성은 단순히 alt 속성 넣고, 시맨틱 태그를 쓰는 수준에서 끝나지 않습니다.실제 프로젝트에서는 모달, 드롭다운, 탭, 다크모드 등 동적 UI 컴포넌트에서 접근성 문제가 자주 발생합니다.이번 포스팅에서는 실무에서 특히 중요한 심화 접근성 주제 3가지를 다뤄봅니다.🧠 1. ARIA 속성 활용하기✅ ARIA란?Accessible Rich Internet Applications의 약자HTML 태그만으로 의미를 전달하기 어려운 경우, **보조 기술(스크린리더 등)**에 추가 정보를 제공📌 자주 쓰는 ARIA 속성속성설명aria-label스크린리더용 레이블 제공aria-hidden="true"보조 기술에서 숨김 처리aria-expanded="true/false"드롭다운, 아코디언의 열림 상태 표시ari..