접근 가능한 이름이 없는 버튼
상호작용 요소가 DOM에 존재하지만 스크린 리더가 명확한 동작 이름을 받지 못합니다.
button.product-card__favoriteWCAG AA 웹사이트 접근성 검사
불분명한 버튼, 라벨 없는 입력란, 읽기 어려운 텍스트 등 사이트 이용을 방해하는 요소를 찾으세요. 자동 접근성 검사와 문제 설명을 확인하세요.
검사 결과
팀 작업으로 바로 이어지는 보고서
보고서는 브라우저의 요소 트리인 DOM에서 영향을 받은 요소를 선택자와 HTML 조각으로 표시합니다. 해당 컴포넌트를 찾아 문제를 수정하고 키보드와 스크린 리더 동작을 다시 테스트하세요.
위반통과검토 필요WCAG 태그
accessibility-report3개 문제 · 42개 규칙 통과
폼 필드가 레이블과 연결되지 않음
사용자는 레이블을 볼 수 있지만 레이블과 입력 간의 기술적 관계가 누락되었습니다.
#checkout-email텍스트 대비가 WCAG AA 미만
버튼 상태가 시각적으로 약해 어두운 인터페이스 배경에서 사라질 수 있습니다.
.promo-banner .btn-secondary영향도 검토
가장 눈에 띄는 접근성 장벽을 빠르게 제거하려면 심각 및 중대 문제부터 시작하세요.
선택자 공유
개발자에게 정확한 대상, HTML 조각, 위반 사유를 간단히 전달하세요.
릴리스 재확인
수정 후 검사를 다시 실행하고 어떤 위반이 보고서에서 사라졌는지 확인하세요.
확인 항목
시맨틱, ARIA, 폼, 대비를 한 번의 접근성 검사로
자동 웹 접근성 검사는 렌더링된 인터페이스에서 탐지 가능한 문제를 찾습니다. 발견 사항은 WCAG 규칙과 관련되지만, 보고서를 통과했다고 해서 WCAG AA의 완전한 준수가 인증되는 것은 아닙니다.
페이지 구조
문서 제목, 페이지 언어, 제목 계층, 랜드마크 영역, 목록, 이미지 대체 텍스트를 검사합니다.
개발자를 위한 상세 정보
- h1-h6 및 랜드마크
- 대체 텍스트 및 숨겨진 SVG
- lang, title, 기본 시맨틱
ARIA 및 접근 가능한 이름
ARIA 속성은 컨트롤의 역할, 상태와 관계를 보조 기술에 설명합니다. 잘못된 관계와 명확한 이름이 없는 컨트롤을 검사합니다. ARIA를 추가하는 것만으로 상호작용의 접근성이 확보되지는 않습니다.
개발자를 위한 상세 정보
- button, link, input 이름
- role/state/property 문제
- combobox, dialog, menu 패턴
폼, 오류, 대비
레이블, 필수 및 유효하지 않은 상태, 도움말 텍스트 관계, 텍스트 대비, 중요한 요소의 가독성을 검사합니다.
개발자를 위한 상세 정보
- 레이블 및 도움말 텍스트
- WCAG AA 대비 비율
- 오류 및 라이브 메시지
FAQ
접근성 검사 자주 묻는 질문
WCAG, 자동 규칙, DOM 노드, ARIA, 양식, 대비, 수정 순서에 대한 간단한 답변입니다.
자동 검사는 무엇을 잡아내나요?
렌더링된 HTML과 스타일에서 감지할 수 있는 문제를 찾습니다: 누락된 레이블, ARIA 오류, 잘못된 역할, 대비 문제, 빈 링크와 버튼, 대체 텍스트, 랜드마크 구조, 그리고 WCAG 규칙 세트의 일부입니다.
웹사이트에서 WCAG AA는 무엇을 의미하나요?
WCAG AA는 대부분의 상업 및 공공 인터페이스에 대한 실용적인 접근성 목표 수준입니다. 보고서 규칙에는 WCAG 태그가 표시되어 각 위반이 어떤 요구사항과 관련되는지 확인할 수 있습니다.
이것이 수동 감사를 대체하나요?
아니요. 이 검사는 DOM과 CSS의 기술적 위반을 잘 다루지만, 복잡한 시나리오, 실제 키보드 탐색 순서, 스크린 리더 동작은 별도의 수동 단계에서 확인해야 합니다.
한 페이지부터 시작할 수 있나요?
네. 첫 번째 검사는 보통 홈페이지, 리드 양식, 제품 카드, 결제, 또는 계정 영역을 확인합니다. 템플릿 사이트의 경우 각 유형의 페이지 하나씩 확인하고 반복되는 위반을 비교하는 것이 유용합니다.
오류가 많을 때 무엇을 먼저 수정해야 하나요?
심각 및 중대 문제부터 시작하세요: 접근 가능한 이름이 없는 요소, 레이블이 없는 필드, ARIA 오류, 불충분한 대비, DOM에서 잘못 표현된 대화형 요소입니다. 보통 및 경미한 문제는 주변 디자인이나 레이아웃 변경과 함께 그룹화할 수 있습니다.
관련 서비스