예제로 비교하기
모바일 메뉴의 열림·닫힘·초점 복귀 확인
메뉴가 열리는 모습뿐 아니라 닫힌 상태의 키보드 이동도 확인하세요.
설명용으로 만든 예제입니다. 수치와 조건은 실제 판매 상품의 정보가 아닙니다.
닫힘 · aria-expanded=false
모바일 메뉴의 과업 순서 예제에서 나눈 판단
닫힌 메뉴의 링크는 Tab으로 접근되지 않습니다. 열기 버튼을 누르면 목록이 표시되고 aria-expanded가 true로 바뀝니다. Escape를 누르면 목록을 숨기고 버튼에 초점을 돌려주는 동작을 이 예제에서 확인할 수 있습니다.
한 번 열어 보는 대신 왕복합니다
- Tab으로 열기 버튼을 찾고 Enter 또는 Space로 연다.
- Tab과 Shift+Tab으로 목록의 앞뒤를 오간다.
- Escape로 닫은 뒤 초점이 버튼으로 돌아왔는지 본다.
- 다시 Tab을 눌러 숨은 목록을 지나 정상 본문으로 이어지는지 확인한다.
포인터로는 정상인데 키보드로 닫은 뒤 위치를 잃는 경우가 있습니다. 닫기 전 초점이 목록 안에 있었다면 목록을 숨긴 뒤 유효한 위치로 옮겨야 합니다. 이 예제에서는 열기 버튼을 복귀점으로 씁니다. 실제 이동으로 페이지가 바뀌었다면 새 문서의 제목과 현재 위치 안내가 이어져야 합니다.
전체 화면을 덮는 구성은 배경 처리까지 정합니다
작은 링크 목록을 본문 흐름 안에 펼치는 것과 전체 화면을 덮고 배경을 막는 메뉴는 다릅니다. 전자는 자연스러운 문서 순서로 이동할 수 있지만, 후자를 모달로 설계했다면 내부 초점과 배경 상호작용을 함께 관리해야 합니다. 배경이 어두워 보인다는 이유로 키보드까지 제한됐다고 보지 않습니다.
모달로 만들 필요가 없다면 링크 목록을 단순하게 유지하는 편이 다룰 상태가 적습니다. 별도 대화상자가 필요하다면 대화상자의 초점 복귀에서 시작 위치와 닫기 경로를 함께 정할 수 있습니다.
짧은 화면과 스크립트 실패도 남겨 둡니다
휴대전화를 가로로 돌렸을 때 마지막 정책 링크나 닫기 버튼이 화면 밖으로 나갈 수 있습니다. 메뉴 자체를 끝까지 스크롤할 수 있는지, 본문만 움직이고 패널은 고정돼 있지 않은지 봅니다. 글자를 작게 줄여 한 화면에 맞추는 것보다 이동할 공간을 확보하는 편이 내용을 보존합니다.
스크립트가 늦거나 실패했을 때 모든 탐색 경로를 없애지 않는지도 확인합니다. 서버 HTML의 기본 링크를 먼저 두고 스크립트가 준비된 뒤 접는 방식을 쓸 수 있습니다. 적어도 로고의 홈 링크와 본문·푸터 경로는 읽을 수 있게 남겨야 합니다.
작동 예제의 세 주제는 설명용 구간으로 연결됩니다. 실제 사이트에서는 링크 이름, 도착 주소, 현재 구역 표시를 함께 대조하세요. 열림 모습 한 장보다 닫힌 상태에서 시작해 다시 닫힌 상태로 돌아오는 경로가 이 글의 확인 대상입니다.