북마클릿
즐겨찾기에 넣어두고 점검할 사이트에서 누르면, 그 페이지 위에 Tab 순서·실제 이동 기록·제목 구조·이미지 대체 텍스트를 표시합니다. 개발 중이거나 로그인이 필요한 화면도 점검할 수 있습니다.
북마클릿은 PC 브라우저용입니다. 대부분의 모바일 브라우저에서는 즐겨찾기로 스크립트를 실행할 수 없습니다.
1. 즐겨찾기 막대에 끌어다 놓기
아래 버튼을 마우스로 끌어 브라우저의 즐겨찾기(북마크) 막대에 놓으세요.
웹접근성 점검 약 29KB · 외부 파일을 불러오지 않습니다
즐겨찾기 막대가 안 보이면 Ctrl+Shift+B (Mac은 ⌘+Shift+B)를 누르세요. 이 페이지에서 버튼을 누르면 이 페이지를 대상으로 시험 실행됩니다.
끌어다 놓기가 안 될 때 (직접 추가하기)
- 아래 "코드 복사"를 누릅니다.
- 즐겨찾기 막대에서 오른쪽 클릭 → "페이지 추가"(또는 "북마크 추가")를 고릅니다.
- 이름에 "웹접근성 점검", URL(주소)에 복사한 코드를 붙여넣고 저장합니다.
2. 점검할 페이지에서 누르기
- 점검할 페이지를 열고 즐겨찾기 막대의 웹접근성 점검을 누릅니다.
- 오른쪽 아래에 점검 창이 열리고, 페이지 위에 번호와 표시가 겹쳐 나타납니다.
- Esc나 창의 ✕ 버튼, 또는 즐겨찾기를 한 번 더 누르면 닫히고 페이지가 원래 상태로 돌아갑니다.
점검 창에서 볼 수 있는 것
탭 순서 (예상)
코드로 계산한 Tab 이동 순서를 파란 번호로 표시합니다. 양수 tabindex, 키보드로 갈 수 없는 클릭 요소, 포커스 표시를 없앤 요소를 찾습니다. KWCAG 6.1.1 · 6.1.2
실제 이동 기록
직접 Tab을 누를 때마다 초점이 간 요소에 초록 번호를 붙이고, 예상 순서와 비교합니다. 도구가 스스로 키를 누르지 않습니다.
제목 구조
h1~h6를 들여쓰기 목록으로 보여주고, 단계 건너뜀과 빈 제목을 표시합니다. KWCAG 6.4.2
이미지 alt
이미지마다 대체 텍스트를 페이지 위에 표시합니다. alt 없음, 파일명 같은 alt, 장식 이미지를 구분합니다. KWCAG 5.1.1
이 도구가 하는 것
- 지금 열린 페이지를 읽고 표시만 덧씌웁니다 (읽기 전용)
- 사용자가 누른 Tab 이동을 기록합니다
- 점검 내용은 아무 데도 보내지 않습니다
이 도구가 못 하는 것
- 색 대비 등 전체 자동 검사 → 확장 프로그램 페이지 검사
- 다른 도메인 iframe 안, Shadow DOM 안
- 스스로 클릭·키 입력하며 이동 확인
- 브라우저 내부 페이지, PDF, 대부분의 모바일 브라우저
실행되지 않을 때
- 아무 반응이 없음: 브라우저 내부 페이지(새 탭, 설정), PDF, 브라우저 확장 프로그램 스토어 등에서는 즐겨찾기 스크립트가 막혀 있습니다.
- "실행하지 못했습니다" 알림: 사이트 보안 정책이나 브라우저 설정이 막은 경우입니다. 알림에 이유가 나옵니다.
- 대체 방법: 확장 프로그램 페이지 검사를 이용하거나, 페이지 HTML을 탭 포커스 점검에 붙여넣으세요.
자주 묻는 질문
북마클릿이 사이트를 바꾸거나 정보를 보내나요?
아닙니다. 읽기 전용으로, 사이트 내용·초점·스타일을 바꾸지 않고 표시만 덧씌웁니다. 점검한 내용은 어디에도 전송하지 않습니다. Esc나 닫기 버튼을 누르면 추가한 표시와 이벤트를 모두 지워 원래 상태로 돌아갑니다.
"실제 이동 기록"은 어떻게 쓰나요?
점검할 페이지의 시작 부분을 한 번 클릭한 뒤 Tab·Shift+Tab을 직접 눌러 보세요. 초점이 이동할 때마다 그 요소에 초록 번호를 붙이고, 예상 순서와 비교해 보여줍니다. 도구가 스스로 클릭하거나 키를 누르지 않습니다.
어떤 페이지에서 동작하지 않나요?
브라우저 내부 페이지(새 탭, 설정 등), PDF 보기 화면, 일부 보안 정책이 엄격한 사이트, 대부분의 모바일 브라우저에서는 실행되지 않을 수 있습니다. 실행되지 않으면 확장 프로그램의 페이지 검사 또는 탭 포커스 미리보기로 확인하세요.
로그인이 필요한 화면이나 개발 중인 화면도 점검할 수 있나요?
네. 북마클릿은 지금 브라우저에 열려 있는 페이지 위에서 실행되므로 로그인 후 화면, localhost의 개발 화면도 점검할 수 있습니다.