🧪 이렇게 확인해보세요
- 마우스를 치워두고 Tab만으로 각 시연을 통과해보세요.
- 포커스가 어디로 가는지, 갇히는지 빠져나가는지 눈으로 따라가세요.
- 각 시연 아래 상태 표시줄이 지금 무슨 일이 일어났는지 알려줍니다.
- 여유가 있다면 스크린 리더(윈도우 NVDA, 맥 VoiceOver)로도 한 번 들어보세요.
1. popover — 모달이 아니다
Baseline 새로 사용 가능 (2025-01)팝오버가 열려도 포커스는 갇히지 않습니다. 배경도 그대로 살아 있고요. 툴팁·드롭다운에는 맞는 동작이지만, 반드시 처리해야 하는 UI에 쓰면 문제가 됩니다.
그냥 popover — 열고 Tab을 계속 눌러보세요
팝오버를 열면 여기에 상태가 표시됩니다.
role + autofocus를 붙인 popover — 열자마자 안으로 들어갑니다
열어보면 포커스가 어디로 갔는지 여기에 표시됩니다.
aria-expanded는 브라우저가 붙여줍니다. popovertarget으로 묶기만 하면
버튼의 펼침/접힘 상태가 접근성 트리에 자동으로 반영돼요 — 손으로 적어두면 오히려 값이 갱신되지 않아 손해입니다.
2. 앵커 포지셔닝 — 눈과 손이 따로 논다
Baseline 제한적CSS로 위치는 옮겨도 DOM 순서는 그대로입니다. 아래 두 무대는 화면상 똑같아 보이지만, 버튼에서 Tab을 눌렀을 때 가는 곳이 다릅니다.
❌ 메뉴가 DOM 맨 끝에 있는 경우
위 계정 메뉴 버튼에 포커스를 두고 Tab을 눌러보세요.
✅ 메뉴가 버튼 바로 다음에 있는 경우
페이지의 다른 내용
알림 이 브라우저는 앵커 포지셔닝을 지원하지 않아 메뉴가 일반 흐름으로 표시됩니다. 탭 순서 차이는 그대로 확인할 수 있습니다.
3. dialog — 브라우저가 일을 덜어준다
Baseline 널리 사용 가능 (2024-09)showModal()로 열면 포커스 트랩·Esc 닫기·배경 비활성화를 브라우저가 해줍니다. 닫을 때 포커스를 되돌리는 것까지요. 문제는 돌아갈 버튼이 사라졌을 때뿐입니다.
열고 Tab을 돌려본 뒤 Esc로 닫아보세요 — 닫힌 다음 포커스가 어디로 가는지 보세요
대화상자를 닫으면 포커스가 어디로 돌아갔는지 여기에 표시됩니다.
⚠️ 열었던 버튼이 사라지는 경우 — 이때만 손이 필요합니다
삭제를 확정하면 이 버튼이 사라집니다. 그때 포커스가 어디로 떨어지는지 확인해보세요.
4. 뷰 트랜지션 — 예뻐지는 만큼 조심할 것
같은 문서: Baseline 새로 사용 가능 (2025-10)움직임은 전정기관에 문제가 있는 사용자에게 어지럼증을 유발할 수 있습니다. 운영체제의 "동작 줄이기"를 켜두면 이 시연의 애니메이션도 즉시 전환으로 바뀝니다.
전환해보기
화면 A
이 브라우저의 지원 여부와 동작 줄이기 설정을 확인하는 중…