키보드와 초점 순서 확인

문항 6개. 정답과 해설은 풀어 본 뒤에 보여 드립니다.

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

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

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

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

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

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

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

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

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

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

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

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