키보드로 이동하는 순서는 웹 페이지의 구조를 드러낸다. 마우스 없는 전시뿐 아니라 포트폴리오와 신청서에서도 지금 어디에 있는지, 다음에 무엇을 할 수 있는지 알아볼 수 있어야 한다.
- 기본 순서: 하이퍼링크와 버튼 같은 기본 요소를 문서 순서에 맞게 놓는다. 화면의 순서만 바꾸면 키보드 이동과 어긋날 수 있다.
- 현재 위치:
:focus-visible로 초점을 표시한다. 기본 윤곽선을 지우기만 하면 키보드 사용자는 위치를 놓칠 수 있다. - 건너뛰기: 반복되는 이동 메뉴 앞에 본문 바로가기를 둔다. 본문에 준
tabindex="-1"은 이동 대상으로 삼되 평소 Tab 순서에는 끼워 넣지 않는 선택이다. - 되돌아가기:
Tab뿐 아니라Shift+Tab으로 돌아오는 길과Enter·스페이스로 조작하는 기본 동작도 확인한다.
한 파일로 확인하기
아래 전체 코드를 UTF-8 형식의 example-08.html 파일로 저장해 웹 브라우저에서 연다. 예제의 전시와 행사는 가상이다.
<!doctype html>
<html lang="ko">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>마우스 없이 읽는 순서: 제작 예제</title>
<style>
* { box-sizing: border-box; }
body { margin: 0; padding: 1rem; color: #202020;
background: #fff; font-family: sans-serif; line-height: 1.7; }
main { max-inline-size: 44rem; margin-inline: auto; }
h1 { font-size: 1.75rem; line-height: 1.3; }
a { color: #164d91; }
:focus-visible { outline: 3px solid #164d91; outline-offset: 4px; }
.skip { position: absolute; inset-block-start: .5rem; inset-inline-start: 1rem;
padding: .5rem; background: #fff; transform: translateY(-200%); }
.skip:focus { transform: none; }
nav { display: flex; flex-wrap: wrap; gap: 1rem; margin-block: 1rem; }
details { margin-block: 1rem; }
summary { cursor: pointer; }
</style>
<a class="skip" href="#content">본문으로 바로가기</a>
<nav aria-label="전시 안내">
<a href="#about">전시 소개</a>
<a href="#visit">관람 안내</a>
</nav>
<main id="content" tabindex="-1">
<h1>천천히 넘기는 방</h1>
<section id="about"><h2>전시 소개</h2><p>키보드 이동을 위한 가상의 전시입니다.</p></section>
<section id="visit">
<h2>관람 안내</h2>
<details><summary>예제의 이용 안내</summary><p>실제 행사나 예약은 없습니다.</p></details>
<a href="#about">전시 소개로 돌아가기</a>
</section>
</main>
</html>파일을 다시 연 뒤 첫 Tab으로 본문 바로가기를 드러내고 Enter로 이동한다. Mac의 사파리에서는 설정에 따라 하이퍼링크를 포함한 이동에 Option+Tab이 필요하다. <summary>에도 키보드로 도달해 열고 닫아본다. 시맨틱 HTML의 기본 동작을 쓰면 별도 키보드 코드를 줄일 수 있다. 초점이 사라진 자리를 찾는 확인은 화면을 눈으로 훑는 것과 다른 정보를 준다.