キーボードとフォーカス順序の確認

페이지 가운데 있는 버튼 하나에만 tabindex="3" 을 붙였습니다. Tab 을 처음 눌렀을 때 초점은 어디로 갑니까?

• 문서의 첫 초점 요소로 간다 — 양수 값은 3번째 자리만 예약한다
• 그 버튼으로 간다 — 양수가 붙은 것들이 먼저 전부 돌기 때문이다
• 브라우저마다 달라서 정해진 답이 없다
• 아무 데도 가지 않는다 — 양수 tabindex 는 무시된다

건너뛰기 링크가 <main id="main"> 을 가리키는데, 눌러도 다음 Tab 이 다시 맨 위 메뉴로 갑니다. 무엇이 빠졌습니까?

• main 에 role="main" 을 함께 붙여야 한다
• 링크의 href 를 절대 주소로 바꿔야 한다
• main 에 tabindex="-1" 이 있어야 초점이 따라간다
• 링크를 header 안으로 옮겨야 한다

접은 패널을 aria-hidden="true" 로만 감췄습니다. 무슨 일이 일어납니까?

• 초점도 함께 빠져서 Tab 으로는 갈 수 없게 된다
• 그 안의 링크만 빠지고 버튼은 그대로 초점을 받는다
• 브라우저가 자동으로 display: none 을 적용한다
• 초점은 그대로 가는데 스크린리더는 아무것도 읽지 않는다

div 에 role="button" 을 붙였습니다. 무엇이 따라옵니까?

• Tab 초점과 Enter·Space 처리가 함께 생긴다
• 보조기기에 '버튼' 이라고 알려지지만 동작은 하나도 생기지 않는다
• Enter 만 동작하고 Space 는 스크립트로 붙여야 한다
• 브라우저가 자동으로 tabindex="0" 을 넣어 준다

:focus 대신 :focus-visible 을 쓰는 이유는?

• 마우스 클릭에는 걸리지 않고 키보드로 왔을 때만 걸리기 때문이다
• 구형 브라우저에서도 동작하는 표준 선택자이기 때문이다
• outline 대신 box-shadow 를 쓸 수 있는 유일한 방법이라서
• 초점 순서를 바꾸지 않고 스타일만 바꿀 수 있어서

닫힌 확인 창의 단추가 탭 순서에 남아 있으면 어떤 증상이 납니까?

• Tab 을 누를 때 페이지가 자동으로 아래로 스크롤된다
• 확인 창이 저절로 열리고 초점이 그 안에 갇힌다
• 초점이 화면에 안 보이는 곳으로 가서 사라진 것처럼 보인다
• 단추를 눌러도 아무 일이 없고 콘솔에 오류가 찍힌다