접근성 심화: 키보드 포커스와 동적 알림

마우스를 전혀 사용할 수 없는 환경이거나, 화면을 보지 못해 낭독기(스크린 리더)를 사용하는 분들에게는 웹의 키보드 이동과 소리 알림이 생명선과 같습니다.

⌨️ 탭(Tab) 키의 마법과 긴급 방송 시스템

tabindex="0"을 주면 클릭 불가능했던 박스가 마치 버튼처럼 탭 키로 도달할 수 있게 됩니다.
또한, 쇼핑몰에서 "결제 성공!" 같은 알림이 떴을 때 눈으로 볼 수 없는 분들을 위해 aria-live가 대신 라디오 방송처럼 그 사실을 귀에다 낭독해줍니다.

속성명	값 예시	설명
`tabindex`	`0`, `-1`	`0`은 탭 이동 순서에 포함시킵니다. `-1`은 탭으로는 못 가지만 JS의 focus()로 이동시킬 때 씁니다.
`aria-live`	`polite`, `assertive`	화면 내용이 바뀌었을 때 스크린 리더가 이를 알아채고 즉시 방송(assertive)할지, 덜 바쁠 때 말해줄지(polite) 정합니다.

<!-- 1. 키보드 접근성 (포커스 관리) -->
<div tabindex="0" class="custom-card">
    마우스가 없어도 탭(Tab) 키로 도달할 수 있는 카드입니다.
</div>

<div tabindex="-1" id="modal-content">
    JS로 강제로 포커스를 보낼 순 있지만 탭 키로는 갈 수 없습니다.
</div>

<!-- 2. 동적 화면 알림 (aria-live) -->
<div aria-live="polite">
    장바구니에 상품이 추가되었습니다. (현재 하던 말이 끝나면 조용히 알려줌)
</div>

<div aria-live="assertive">
    결제 시간이 초과되었습니다! (다 무시하고 즉각 경고함)
</div>

실행 결과