접근성 구조 검사기
붙여 넣은 정적 HTML에서 의미 역할·접근 가능한 이름의 단서·폼 라벨·헤딩·예상 탭 순서를 함께 검토합니다. 문제 위치를 확인하고 실제 브라우저와 보조 기술에서 다시 시험할 항목을 정리합니다.
주요 기능
- aria-labelledby·aria-label·label for·감싼 label·alt·내용의 이름 단서 분석
- 중복 ID·끊긴 라벨 참조·이름 없는 버튼·폼 컨트롤·이미지 alt 누락 표시
- 숨김 요소와 aria-hidden 안의 포커스 요소를 분리하여 검토
- 양수 tabindex와 기본 DOM 순서에 따른 예상 키보드 이동 목록
- 헤딩 단계 건너뛰기와 의미 역할 개요를 행·열과 함께 표시
- 원본 전체 HTML을 제외한 JSON 보고서 로컬 저장
사용 방법
- 페이지의 HTML 소스를 붙여 넣거나 수정 가능한 예제를 불러옵니다.
- 검사를 실행하고 발견 사항의 행·열과 근거를 확인합니다.
- 의미 구조와 예상 탭 순서를 전환하며 이름·역할·계층을 살펴봅니다.
- 필요하면 JSON을 저장하고 실제 브라우저·키보드·스크린 리더에서 수동 확인합니다.
활용 예시
- placeholder만 있는 입력란에 실제 label 연결이 빠졌는지 확인합니다.
- 중복 ID 때문에 aria-labelledby 대상이 모호해졌는지 찾습니다.
- aria-hidden으로 가렸지만 키보드 초점을 받는 버튼을 찾아 수정합니다.
- 양수 tabindex가 DOM 순서를 바꾸는 위치를 검토합니다.
자주 묻는 질문
이 결과가 브라우저의 실제 접근성 트리인가요?
아닙니다. 제공한 정적 소스를 parse5로 해석해 일부 HTML·ARIA 규칙의 단서를 계산한 개요입니다. 브라우저의 계산된 CSS, JavaScript, Shadow DOM, 플랫폼 접근성 API, 스크린 리더 출력은 검사하지 않습니다.
경고가 없으면 WCAG를 통과한 건가요?
아닙니다. 자동 점검은 일부 구조 문제의 단서만 찾습니다. 실제 키보드 동작, 포커스 표시, 콘텐츠 이해도, 대비, 보조 기술 사용성은 직접 시험해야 하며 이 도구는 WCAG 적합 판정을 하지 않습니다.
접근 가능한 이름은 어떻게 추정하나요?
aria-labelledby, aria-label, 명시적·감싼 label, alt, 버튼·링크 내용, title 순으로 지원 범위 안에서 읽습니다. 이것은 전체 Accessible Name 표준 알고리즘이 아니며 브라우저 계산 결과가 다를 수 있습니다.
탭 순서는 실제 키보드 동작과 같나요?
양수 tabindex를 작은 값부터, 그다음 기본 포커스 요소를 소스 순서로 정렬합니다. CSS 배치·닫힌 details·스크립트의 포커스 이동·브라우저별 상호 작용은 반영하지 못하므로 실제 페이지에서 Tab 키로 확인하세요.
빈 alt와 aria-hidden은 언제 문제인가요?
장식 이미지는 빈 alt가 적절할 수 있으므로 누락 속성과 구분합니다. aria-hidden 영역에 포커스 가능한 요소가 있으면 경고하지만 상황에 따라 DOM·스크립트가 달라질 수 있어 실제 상태를 확인해야 합니다.
내 HTML이 서버로 전송되나요?
아닙니다. 붙여 넣은 소스를 브라우저 메모리에서 처리하며 HTML을 렌더링하거나 외부 URL을 방문하지 않습니다. 선택해 저장한 JSON에는 추출된 이름·ID·위치가 포함될 수 있으므로 공유 전 확인하세요.
개인정보 안내
HTML 소스는 이 페이지의 브라우저 메모리에서 처리합니다. 자동 업로드·URL 접속·영구 저장을 하지 않습니다. 선택한 JSON 보고서에는 전체 원본 HTML은 없지만 추출된 이름과 ID가 들어갈 수 있습니다.
댓글과 질문