jonbeo 님의 블로그

사용자는 마우스뿐 아니라 키보드(Tab, Enter, Space),심지어 스크린리더로도 웹사이트를 탐색합니다. 하지만 HTML 구조가 잘못되어 있거나,포커스가 사라지는 UX를 제공한다면 접근성 점수는 0점 😭 이번 포스팅에서는 실무에서 자주 쓰이는키보드 네비게이션 UX 설계 원칙과 실무 예제를 정리합니다.⌨️ 1. Tab 키 순서 제어모든 인터랙티브 요소는 기본적으로 Tab 키로 접근 가능합니다. 로그인회원가입 📌 Tab 순서는 HTML 구조 순서에 따릅니다.따라서 DOM 순서 = 시각적 순서로 유지하는 것이 중요합니다.⚙️ tabindex 속성 포커스 가능프로그램만 포커스 가능 값 설명 0Tab 순서에 포함됨-1Tab으로는 접근 불가 (스크립트로만 접근)📌 tabindex="0"은 커스텀 UI ..

웹 접근성을 고려하지 않은 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..