HTML 접근성 감사자

대부분의 빠른 접근성 검사는 피상적인 키워드 스캔이거나 블랙박스로 신뢰해야 하는 무거운 라이브러리입니다. 이 도구는 세 번째 경로를 사용합니다. 즉, 브라우저에 내장된 DOMParser를 사용하여 붙여넣은 모든 HTML을 구문 분석합니다(axe-core 없음, 외부 접근성 라이브러리 없음, 다운로드 없음). 그런 다음 일반적인 실제 WCAG 2.1 오류 패턴을 반영하는 일련의 손으로 작성한 검사를 통해 결과 DOM 트리를 살펴봅니다. 이는 논리가 완전히 검사 가능하고 감사가 전적으로 브라우저 내에서 실행된다는 것을 의미합니다. 붙여넣은 마크업과 테스트하는 색상 쌍은 결코 업로드되거나 어디로도 전송되지 않습니다.

검사는 실제 페이지에서 가장 자주 나타나는 오류를 다룹니다. alt 속성이 전혀 없는 <img> 요소(장식 이미지에 사용되는 고의로 비어 있는 alt=""와 구별되는 실제 WCAG 오류, 올바르게 플래그가 지정되지 않은 상태로 유지됨), 보조 기술이 해당 요소가 무엇인지 알 수 있는 방법이 없는 양식 컨트롤(레이블에 대한 모든 실제 경로에 대해 확인 - 일치하는 <label for>, <label> 또는 aria-label/aria-labelledby 속성 내에 래핑됨), 제목 경고 없이 바로 점프하는 레벨(<h1>에서 <h3>으로 바로 이동하거나 <h1>이 전혀 없거나 둘 이상인 문서), href가 없거나 "여기를 클릭하세요" 또는 "자세히 보기"와 같은 모호하고 컨텍스트를 벗어난 텍스트가 있는 링크, 전체 HTML 문서(단순한 조각이 아님)를 붙여넣을 때 누락된 lang 속성이 있습니다.

눈에 띄는 작품은 피상적인 '읽을 수 있어 보이는' 휴리스틱이 아닌 진정한 대비 수학입니다. 인라인 색상과 배경 색상을 전달하는 모든 요소에 대해 도구는 두 값을 모두 읽고 브라우저의 자체 CSS 엔진을 통해 이를 실제 RGB 숫자로 확인하고(따라서 hex, rgb(), hsl() 및 'tomato'와 같은 명명된 색상은 모두 동일하게 작동함) 각 채널에 대해 L = 0.2126×R + 0.7152×G + 0.0722×B의 정확한 WCAG 상대 휘도를 계산합니다. 먼저 실제 sRGB 전송 곡선을 사용하여 감마 보정한 후 공식 명암비 공식인 (더 밝은 L + 0.05) / (더 어두운 L + 0.05)로 결합합니다. 요소 자체의 글꼴 크기 및 글꼴 두께에 따라 더 엄격한 '일반 텍스트' 임계값 또는 더 관대한 '큰 텍스트' 임계값(18pt+ 또는 14pt+ 굵은 글씨)이 적용되는지 여부가 결정되며 결과는 4개의 실제 WCAG 숫자(AA의 경우 4.5:1 및 3:1, AAA의 경우 7:1 및 4.5:1)에 대해 한 번에 확인됩니다. 단 하나의 가짜 좋음/나쁨 판정으로 축소되지 않습니다.

이는 인증 도구가 아닌 의도적으로 정직하고 실용적인 전체 접근성 감사의 하위 집합입니다. 이는 JavaScript 기반 상호 작용, 기본 레이블 지정 이상의 ARIA 위젯 패턴, 키보드 포커스 순서 또는 실제로 페이지 렌더링 및 실행이 필요한 모든 항목을 평가하지 않습니다. 대체 텍스트 누락, 레이블이 지정되지 않은 필드, 손상된 제목 계층 구조, 낮은 대비 텍스트 및 모호한 링크와 같은 가장 일반적이고 가장 중대한 WCAG 오류 중 일부를 페이지가 배송되기 전에 (대신이 아닌) 전체 수동 검토 또는 프로덕션으로 배송되는 모든 것에 대한 전용 감사 도구와 함께 포착하는 빠른 첫 번째 단계로 간주하십시오.