접근성 기본 항목 점검
화면 낭독기 사용자가 막히는 대체 텍스트·레이블 누락을 배포 전에 걸러 냅니다.
HTML CHECKER · ACCESSIBILITY BASICS
HTML 구조 검사기
배포 전에 놓친 기본기는 없을까?
<img src="photo.png"> 처럼 alt 가 빠진 HTML 을 붙여 넣고 실행을 누르면 대체 텍스트 누락, 중복 ID, 레이블 없는 입력 요소, 문서 언어와 제목 누락을 번호 목록으로 알려 줍니다. 입력한 코드는 실행하지 않고 구조만 읽습니다.
- 중복 ID 검사
- alt·레이블 검사
- 코드 실행 안 함
- 브라우저에서만 처리
MADE FOR YOUR WORK
이럴 때 쓰세요
템플릿 조각 리뷰
반복문으로 찍는 목록에서 같은 id 가 여러 번 나오지 않는지 렌더링된 HTML 로 확인합니다.
검색 노출 기본기
페이지 제목(title)이 비었거나 문서 언어(lang)가 빠져 검색 결과에 불리하지 않은지 봅니다.
폼 입력 요소 확인
input, select, textarea 마다 label 이나 aria-label 이 연결됐는지 한 번에 훑습니다.
STEP BY STEP
HTML 구조 검사기 사용 방법
이렇게 쓰세요
HTML 붙여 넣기
검사할 HTML 칸에 페이지 전체나 일부를 넣습니다. 브라우저의 페이지 소스 보기에서 복사해도 됩니다.
실행 누르기
결과 칸에 발견한 문제가 '1. 중복 ID: …' 처럼 번호 목록으로 나옵니다.
문제 없으면 한 줄
모두 통과하면 '검사 대상 항목에서 문제를 찾지 못했습니다.'가 나옵니다.
결과 복사
결과 복사 버튼으로 목록을 가져가 이슈나 리뷰 코멘트에 붙입니다.
UNDERSTAND THE BASICS
기계가 확실히 잡을 수 있는 접근성 기본기
웹 접근성은 시각 장애인이 쓰는 화면 낭독기, 키보드만 쓰는 사용자도 페이지를 이용할 수 있게 하는 일입니다. 국내 웹 접근성 지침(KWCAG)과 국제 지침(WCAG) 모두 대체 텍스트, 입력 요소의 레이블, 기본 언어 표시, 페이지 제목을 기본 항목으로 둡니다.
이 도구는 그중 코드만 보고 틀림없이 판정할 수 있는 여섯 가지를 검사합니다. 대체 텍스트가 '적절한지', 제목이 '내용을 잘 설명하는지'처럼 사람이 판단해야 하는 부분은 검사하지 않습니다.
또 이 도구는 전체 HTML 표준 검증기가 아닙니다. 브라우저 파서는 닫히지 않은 태그를 스스로 고쳐 읽기 때문에 그런 문법 오류는 드러나지 않습니다. 태그 문법까지 확인하려면 W3C 의 Nu HTML Checker 같은 검증기를 함께 쓰세요.
| 검사 항목 | 왜 필요한가 | 고치는 법 |
|---|---|---|
| 중복 ID | label for, 앵커 링크, 스크립트가 엉뚱한 요소를 가리킴 | id 를 페이지 안에서 하나로 |
| img 의 alt 누락 | 화면 낭독기가 파일명을 읽거나 그냥 건너뜀 | 의미 있는 설명, 장식 이미지는 alt="" |
| 입력 요소 레이블 | 무엇을 입력하는 칸인지 알 수 없음 | label for, label 로 감싸기, aria-label |
| doctype | 없으면 브라우저가 호환 모드로 그림 | 첫 줄에 <!doctype html> |
| html lang | 낭독기가 발음 언어를 정하지 못함 | <html lang="ko"> |
| 비어 있지 않은 title | 탭·검색 결과에 페이지 이름이 없음 | <title>페이지 이름</title> |
HTML 구조 검사기 사용 안내
HTML의 중복 ID, 이미지 대체 텍스트, 문서 언어와 제목 등 주요 구조 문제를 검사합니다. 전체 HTML 표준 검증기는 아닙니다.
HTML을 붙여 넣고 실행하면 중복 ID, 이미지 alt, 입력 레이블, doctype, 문서 언어와 제목을 확인합니다. 브라우저가 태그를 자동 복구하므로 닫히지 않은 태그 등 전체 문법 오류를 검출하지는 않습니다.
QUICK EXAMPLE
HTML 구조 검사기 사용 예제
입력 · 시작
<img src="photo.png">
결과 · 확인
alt 속성이 없는 이미지 확인
구조 점검만으로 전체 접근성이나 브라우저 호환성을 보장하지 않습니다.
어떻게 구현했나
브라우저의 파서로 읽되 template 요소 안에서 파싱합니다. 문서에 붙지 않으므로 입력한 코드가 실행되지 않고 구조만 읽힙니다.
검사하는 것은 정해진 항목들입니다 — 중복 id, alt 없는 img, 레이블이 연결되지 않은 입력 요소, doctype, html lang, 비어 있지 않은 title. 접근성에서 실제로 자주 빠지고 기계가 확실히 판정할 수 있는 것만 골랐습니다.
전체 문법 적합성 검사가 아닙니다. 브라우저 HTML 파서는 닫히지 않은 태그를 스스로 고쳐서 읽기 때문에, 원본이 틀렸어도 파싱 단계에서는 드러나지 않습니다. 그래서 이 도구는 '기본 항목 검사'라고 이름을 붙였습니다.
BEFORE YOU FINISH
자주 하는 실수
장식 이미지의 alt 를 아예 뺀다
꾸밈용 이미지라도 alt 속성 자체를 빼면 낭독기가 파일명을 읽을 수 있습니다. alt="" 로 비워 두면 건너뛰며, 이 도구도 빈 alt 는 문제로 보지 않습니다.
placeholder 를 레이블로 쓴다
placeholder 는 입력을 시작하면 사라지고 레이블로 인정되지 않습니다. 이 도구도 placeholder 만 있는 입력 요소는 레이블 없음으로 표시합니다.
조각만 넣고 doctype 경고에 놀란다
doctype, lang, title 검사는 문서 전체를 기준으로 합니다. 컴포넌트 조각만 검사할 때는 이 세 줄의 경고는 무시해도 됩니다.
자주 묻는 질문
웹 접근성 검사 무료로 할 수 있나요?
기본 항목은 이 도구로 바로 확인할 수 있습니다. 다만 대체 텍스트의 적절성, 키보드 초점 이동, 색 대비처럼 사람이 봐야 하는 항목은 인증 심사나 전문 도구 점검이 따로 필요합니다.
img alt 는 꼭 넣어야 하나요?
넣어야 합니다. 의미 있는 이미지는 내용을 설명하는 글을, 꾸밈용 이미지는 alt="" 를 넣습니다. alt 속성이 아예 없는 img 는 이 도구가 문제로 표시합니다.
닫히지 않은 태그도 찾아 주나요?
찾지 못합니다. 브라우저가 자동으로 고쳐 읽은 뒤 검사하므로 태그 짝 오류는 보이지 않습니다. 태그 문법은 W3C 검증기로 확인하세요.
hidden 입력이나 버튼도 레이블이 필요한가요?
type="hidden" 입력은 검사에서 빼습니다. 그 밖의 input 은 submit·button 형식도 레이블 검사 대상이라, 버튼이라면 <button> 요소를 쓰면 이 경고를 피할 수 있습니다.
붙여 넣은 HTML 의 스크립트가 실행되나요?
실행되지 않습니다. 문서에 붙지 않는 template 요소 안에서 구조만 읽기 때문에 script 나 이벤트 속성이 동작하지 않습니다.
입력한 데이터는 어디에서 처리하나요?
이 도구의 입력 데이터는 브라우저에서 처리하며 도구 기능을 위해 서버로 업로드하지 않습니다. 결과를 공유하기 전 민감한 정보가 없는지 확인하세요.