Accessibility Inspector는 웹 페이지에 대해 WCAG 2.1 Level AA 자동 검사를 실행하고 접근성 문제를 카테고리별로 정리된 보고서로 제공합니다. 색상 대비 부족, 이미지 alt 텍스트 누락, 부적절한 ARIA 역할 및 속성, 폼 레이블 누락, 키보드 탐색 문제, 랜드마크 영역 누락 등을 감지하며, 발견된 모든 문제에 대해 원클릭 요소 강조 기능을 제공합니다.
웹 접근성은 선택 사항이 아닙니다 — 많은 국가에서 법적 요구사항이며, 전 세계 장애인 인구 15%에게 필수적입니다. 그러나 접근성 문제는 일반적인 개발과 테스트 중에는 보이지 않습니다. 버튼이 시각적으로는 괜찮아 보이지만 role 속성이 없는 styled div라면 스크린 리더에서 완전히 접근 불가능합니다. 텍스트가 당신에게는 읽기 쉽지만 저시력 사용자에게는 대비 요구사항을 통과하지 못할 수 있습니다. Accessibility Inspector는 이러한 보이지 않는 문제를 자동으로 드러냅니다. WCAG 2.1 Level AA 기준 중 수십 가지를 검사합니다: 색상 대비 비율(일반 텍스트 최소 4.5:1, 큰 텍스트 3:1), 이미지의 누락된 alt 텍스트, 폼 입력의 누락된 레이블, 부적절한 ARIA 역할 및 속성, 문서 랜드마크 누락(nav, main, footer), 키보드 포커스 표시 등입니다. 각 문제에는 영향을 받는 요소, 위반된 구체적인 WCAG 기준, 수정 방법에 대한 추천이 포함됩니다. 문제를 클릭하면 페이지에서 해당 요소가 강조 표시됩니다.
인지 가능성, 조작 가능성, 이해 가능성, 견고성 카테고리를 포함한 WCAG 2.1 Level AA 성공 기준에 대한 자동 검사를 실행합니다. 각 검사에 구체적인 기준(예: 1.4.3 Contrast, 1.1.1 Non-text Content)과 통과/실패 상태가 표시됩니다.
페이지의 모든 텍스트 요소에 대해 텍스트와 배경 색상의 대비 비율을 계산합니다. 일반 텍스트는 4.5:1 미만, 큰 텍스트(18px 이상 또는 14px 이상 볼드)는 3:1 미만인 요소를 플래그합니다. 실제 대비 비율과 최소 요구값을 함께 보여줍니다.
모든 img, svg, image role 요소를 스캔합니다. alt 속성 누락, 장식용이 아닌 이미지의 빈 alt, 너무 일반적인 alt 텍스트("image", "photo")를 플래그합니다. 각 이미지에 설명적인 alt가 필요한지, 빈 alt(장식용)인지, role="presentation"이 필요한지 제안합니다.
잘못된 ARIA 역할 사용(잘못된 요소에 역할 부여), 필요한 ARIA 속성 누락(아이콘 버튼의 aria-label 등), aria-labelledby로 참조된 중복 ID, 랜드마크 영역 누락( main이나 nav 없음)을 검사합니다. 시맨틱 HTML 대안을 추천합니다.
모든 폼 입력(text, email, password, checkbox, select)에 연결된 레이블이 있는지 확인합니다 — label 요소와 for/id 일치, aria-label, 또는 aria-labelledby를 통해. 레이블이 없는 입력은 스크린 리더에서 접근할 수 없습니다.
문제를 오류(반드시 수정 — 접근 장벽), 경고(수정 권장 — 잠재적 장벽), 통과(접근성 확인)로 분류합니다. 오류 개수가 눈에 띄게 표시됩니다. 문제를 클릭하면 페이지에서 해당 요소가 강조 표시됩니다.
새 페이지나 기능을 출시하기 전에 Accessibility Inspector를 실행하여 문제를 조기에 발견하세요. 누락된 alt 텍스트, 레이블 없는 폼 필드, 대비 위반은 개발 단계에서 쉽게 수정할 수 있지만 프로덕션에서 발견하면 비용이 많이 듭니다.
많은 관할 구역에서 WCAG 2.1 Level AA 준수가 요구됩니다(미국 ADA, EU EAA). 공개 페이지에서 인스펙터를 실행하여 법적 위험으로 이어질 수 있는 준수 격차를 식별하세요.
시각적 QA와 기능 테스트 후 Accessibility Inspector를 실행하여 구현 과정에서 접근성 회귀가 발생하지 않았는지 확인하세요.
팀 미팅 중 현재 사이트에서 인스펙터를 실행하여 실제 접근성 문제를 보여주세요. 시각적 강조와 명확한 설명으로 개발자들이 접근 가능한 마크업이 무엇인지, 왜 중요한지 이해하는 데 도움이 됩니다.
서드파티 위젯, 임베드 콘텐츠, 사용자 생성 HTML이 포함된 페이지를 감사하세요. 이러한 소스는 종종 alt 텍스트 누락이나 대비 위반 같은 접근성 문제를 도입하며, 페이지 소유자로서 당신이 여전히 책임져야 합니다.
DevSuite Pro 플로팅 독을 열고 Accessibility Inspector 아이콘을 클릭하세요. 도구가 페이지 DOM을 스캔하여 접근성 문제를 찾습니다.
오류(빨강), 경고(노랑), 통과(녹색)로 분류된 보고서가 나타납니다. 각 섹션에 영향을 받는 요소와 WCAG 기준 참조가 포함된 구체적인 문제가 나열됩니다.
문제를 클릭하면 페이지에서 해당 요소가 색상 테두리로 강조 표시되고 자동으로 스크롤됩니다. 보고서와 DOM 요소 간 연결이 즉각적입니다.
각 문제에 구체적인 추천이 포함됩니다: "이미지 내용을 설명하는 alt 텍스트 추가", "글자 색상 대비를 최소 4.5:1로 높이기", "for='email'인 label 요소 추가" 등.
코드에서 변경한 후 페이지를 새로고침하고 감사를 다시 실행하세요. 오류 개수가 줄어야 합니다. 목표는 오류 0개입니다.
DevSuite Pro를 무료로 설치하고 브라우저용 39개 이상의 개발자 도구를 사용해보세요.
