불러오는 중…
KWCAG 2.2 · 8.2.1
KWCAG 2.2 「웹 애플리케이션 접근성 준수」 항목을 점검하는 방법입니다. 자동 검사가 일부를 잡아내지만, 나머지는 사람이 직접 확인해야 합니다.
ARIA 속성 오용은 자동 검사되지만, 커스텀 위젯(탭, 아코디언, 모달 등)이 스크린 리더에서 역할·상태·값을 올바르게 안내하고 키보드 패턴(WAI-ARIA APG)대로 동작하는지는 보조기기로 직접 확인하세요.
이 항목은 25개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.
nested-interactive버튼 안의 링크처럼 조작 요소가 중첩되면 스크린 리더와 키보드 동작이 예측 불가능해집니다. 하나의 요소로 합치거나 형제 요소로 분리하세요.
<!-- 잘못된 예 -->
<button><a href="/detail">자세히</a></button>
<!-- 올바른 예 -->
<a class="button-style" href="/detail">자세히</a>aria-allowed-attr요소의 role이 지원하지 않는 aria-* 속성은 무시되거나 오동작합니다. WAI-ARIA 명세에서 해당 role이 지원하는 속성인지 확인하고 제거·수정하세요.
aria-required-attr예: role="checkbox"에는 aria-checked가 필수입니다. 해당 role의 필수 속성을 추가하세요.
<div role="checkbox" aria-checked="false" tabindex="0">약관 동의</div>aria-required-children예: role="list"는 role="listitem" 자식이, role="tablist"는 role="tab" 자식이 필요합니다. 구조를 명세대로 맞추세요.
aria-required-parent예: role="tab"은 role="tablist" 안에, role="option"은 role="listbox" 안에 있어야 합니다.
aria-roles오타이거나 폐기된 role은 무시됩니다. WAI-ARIA 명세의 유효한 role 이름인지 확인하세요.
aria-valid-attraria-lable처럼 오타가 난 속성은 조용히 무시되어 접근성이 제공되지 않습니다. 속성 이름을 확인하세요.
aria-valid-attr-value예: aria-hidden="yes"(잘못) → aria-hidden="true", 존재하지 않는 id를 참조하는 aria-labelledby 등. 명세에 맞는 값·실존하는 id인지 확인하세요.
aria-hidden-body<body aria-hidden="true">는 페이지 전체를 보조기기에서 숨깁니다. 제거하세요.
aria-hidden-focus보조기기에는 숨겨졌지만 Tab으로는 도달 가능한 '유령 초점'이 생깁니다. 내부 초점 요소에 tabindex="-1"을 주거나 inert 속성을 사용하세요.
<div aria-hidden="true" inert>…</div>aria-input-field-namerole="textbox", role="combobox" 등 커스텀 입력 위젯에 aria-label 또는 aria-labelledby로 이름을 제공하세요.
aria-toggle-field-namerole="checkbox", role="switch" 등 토글 위젯에 이름을 제공하세요.
aria-command-namerole="button|link|menuitem" 요소에 텍스트 또는 aria-label을 제공하세요.
aria-meter-namerole="meter"가 무엇을 측정하는지 aria-label로 알려주세요 (예: "저장 공간 사용량").
aria-progressbar-namerole="progressbar"가 어떤 작업의 진행률인지 aria-label로 알려주세요 (예: "파일 업로드 진행률").
aria-tooltip-namerole="tooltip" 요소에 내용 텍스트를 제공하세요.
aria-dialog-name모달이 열릴 때 스크린 리더가 무슨 창인지 알 수 있도록 aria-labelledby로 제목과 연결하세요.
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title">
<h2 id="dlg-title">회원 탈퇴 확인</h2>
</div>aria-textrole="text"는 자식의 의미를 모두 제거합니다. 내부에 링크·버튼이 있다면 role을 제거하세요.
aria-treeitem-namerole="treeitem" 요소에 텍스트 또는 aria-label을 제공하세요.
aria-conditional-attr예: 네이티브 <input type="checkbox">에 aria-checked를 중복 지정하면 실제 상태와 어긋날 수 있습니다. 네이티브 상태를 그대로 쓰고 중복 ARIA를 제거하세요.
aria-deprecated-roledirectory 등 폐기된 role은 최신 명세의 대체 role로 교체하세요.
aria-prohibited-attr예: 일반 <div>(role 없음)에는 aria-label이 효과가 없습니다. 적절한 role을 부여하거나 다른 방식으로 이름을 제공하세요.
aria-braille-equivalentaria-braillelabel을 쓰려면 일반 aria-label(또는 접근 가능한 이름)이 먼저 있어야 합니다.
presentation-role-conflictrole="presentation"(또는 none) 요소에 tabindex나 aria 속성이 있으면 role이 무시됩니다. 장식용이면 다른 속성을 제거하고, 의미가 있다면 presentation role을 제거하세요.
aria-allowed-role예: <li role="button">처럼 요소 의미와 어긋나는 role은 혼란을 만듭니다. 가능하면 시맨틱 요소(<button>)를 직접 사용하세요.
주소만 넣으면 이 항목을 포함한 KWCAG 33항목을 한 번에 점검해 드립니다. 로그인 없이 한 페이지를 바로 검사해 볼 수 있습니다.
무료로 검사하기