HTML 접근성 감사기
원시 HTML을 붙여 넣으면 실제 WCAG 접근성 감사를 받을 수 있습니다. 직접 구현한 DOM 순회기가 이미지, 폼 레이블, 제목 순서, 링크 텍스트를 확인하고, 진짜 상대 휘도 명암비 계산기를 통해 실제 AA/AAA 임계값을 기준으로 점수를 매깁니다. 외부 라이브러리 없이, 아무것도 전송하지 않습니다.
🔒 전적으로 귀하의 브라우저에서 처리됩니다. 여기에 입력하는 어떤 것도 업로드되지 않습니다.
결과
대부분의 빠른 접근성 검사는 피상적인 키워드 스캔이거나 신뢰해야 하는 블랙박스 무거운 라이브러리 둘 중 하나입니다. 이 도구는 제3의 길을 택합니다. 붙여 넣은 HTML을 브라우저 자체 내장 DOMParser로 파싱하고(axe-core도, 외부 접근성 라이브러리도, 다운로드되는 것도 없음), 그렇게 만들어진 DOM 트리를 일반적인 실제 WCAG 2.1 실패 패턴을 반영한 수작업 검사 코드로 순회합니다. 즉, 로직을 완전히 들여다볼 수 있고 감사가 완전히 여러분의 브라우저 안에서 실행되며, 붙여 넣은 마크업이나 테스트한 색상 쌍은 절대 업로드되거나 어디로도 전송되지 않습니다.
실제 페이지에서 가장 자주 나타나는 실패를 다룹니다. alt 속성이 전혀 없는 <img>(진짜 WCAG 실패로, 장식용 이미지에 쓰는 의도적으로 빈 alt=""와는 구분하며 적절하게 플래그를 달지 않습니다), 보조 기술이 용도를 파악할 수 없는 폼 컨트롤(모든 실제 레이블 경로를 확인 — 일치하는 <label for>, <label>로 감싸인 경우, aria-label/aria-labelledby 속성), 경고 없이 건너뛰는 제목 레벨(<h1>에서 바로 <h3>으로 가거나, <h1>이 아예 없거나, 하나보다 많은 경우), href가 없거나 '여기를 클릭' 혹은 '더 읽기' 같은 문맥 없는 모호한 텍스트를 가진 링크, 그리고 전체 HTML 문서(단편이 아님)를 붙여 넣었을 때 lang 속성이 빠진 경우까지 확인합니다.
가장 돋보이는 부분은 진짜 명암비 계산입니다. 피상적인 '읽기 좋아 보이는' 휴리스틱이 아닙니다. 인라인 color와 background-color를 가진 모든 요소에 대해 두 값을 읽어 브라우저의 CSS 엔진을 통해 실제 RGB 숫자로 변환한 다음(따라서 16진수, rgb(), hsl(), 'tomato' 같은 색상 이름이 모두 동일하게 작동), 각 색상의 실제 WCAG 상대 휘도를 계산합니다. L = 0.2126×R + 0.7152×G + 0.0722×B이며, 각 채널은 먼저 실제 sRGB 전달 곡선으로 감마 보정을 거칩니다. 그다음 공식 명암비 공식 (더 밝은 L + 0.05) / (더 어두운 L + 0.05)으로 결합합니다. 요소 자신의 font-size와 font-weight에 따라 더 엄격한 '일반 텍스트' 임계값이 적용될지, 더 관대한 '큰 텍스트' 임계값(18pt+ 또는 14pt+ 볼드)이 적용될지 결정되며, 결과는 네 가지 실제 WCAG 수치인 AA 기준 4.5:1과 3:1, AAA 기준 7:1과 4.5:1에 대해 한꺼번에 점검되어, 하나의 가짜 합격/불합격 판정으로 축소되지 않습니다.
이 도구는 인증 도구가 아닌, 전체 접근성 감사 중 고의로 정직하고 실용적인 부분 집합입니다. JavaScript 기반 상호작용, 기본 레이블링을 넘어서는 ARIA 위젯 패턴, 키보드 포커스 순서, 또는 페이지를 실제로 렌더링하고 실행해야 하는 모든 것을 평가하지 않습니다. 페이지를 출시하기 전, 가장 흔하고 가장 중대한 WCAG 실패(누락된 대체 텍스트, 레이블 없는 필드, 깨진 제목 계층 구조, 낮은 명암비 텍스트, 모호한 링크)를 잡아내는 빠른 첫 번째 단계로 사용하고, 실제 프로덕션에 반영되는 모든 것에는 전체 수동 검토나 전용 감사 도구를 병행하세요(대신이 아니라).