키보드로 이동하는 순서는 웹 페이지의 구조를 드러낸다. [[마우스 없는 전시]]뿐 아니라 포트폴리오와 신청서에서도 지금 어디에 있는지, 다음에 무엇을 할 수 있는지 알아볼 수 있어야 한다. - **기본 순서:** 하이퍼링크와 버튼 같은 기본 요소를 문서 순서에 맞게 놓는다. 화면의 순서만 바꾸면 키보드 이동과 어긋날 수 있다. - **현재 위치:** `:focus-visible`로 초점을 표시한다. 기본 윤곽선을 지우기만 하면 키보드 사용자는 위치를 놓칠 수 있다. - **건너뛰기:** 반복되는 이동 메뉴 앞에 본문 바로가기를 둔다. 본문에 준 `tabindex="-1"`은 이동 대상으로 삼되 평소 Tab 순서에는 끼워 넣지 않는 선택이다. - **되돌아가기:** `Tab`뿐 아니라 `Shift+Tab`으로 돌아오는 길과 `Enter`·스페이스로 조작하는 기본 동작도 확인한다. ## 한 파일로 확인하기 아래 전체 코드를 UTF-8 형식의 `example-08.html` 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다. ```html 마우스 없이 읽는 순서: 제작 예제

천천히 넘기는 방

전시 소개

키보드 이동을 위한 가상의 전시입니다.

관람 안내

예제의 이용 안내

실제 행사나 예약은 없습니다.

전시 소개로 돌아가기
``` 파일을 다시 연 뒤 첫 `Tab`으로 본문 바로가기를 드러내고 `Enter`로 이동한다. Mac의 사파리에서는 설정에 따라 하이퍼링크를 포함한 이동에 `Option+Tab`이 필요하다. ``에도 키보드로 도달해 열고 닫아본다. [[시맨틱 HTML]]의 기본 동작을 쓰면 별도 키보드 코드를 줄일 수 있다. [[초점이 사라진 자리]]를 찾는 확인은 화면을 눈으로 훑는 것과 다른 정보를 준다. ## 참고 - [셰이 하우: 의미와 접근성 확장하기](https://learn.shayhowe.com/advanced-html-css/semantics-accessibility/) - [MDN: tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/tabindex) - [MDN: focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Selectors/:focus-visible) - [W3C: 반복되는 내용 건너뛰기](https://www.w3.org/WAI/tutorials/page-structure/bypass-blocks/) - [애플: 사파리 키보드 단축키](https://support.apple.com/guide/safari/cpsh003/mac) #HTML #접근성 #웹