KWCAG 2.2 · 8.2.1

웹 애플리케이션 접근성 준수 검사 방법

KWCAG 2.2 「웹 애플리케이션 접근성 준수」 항목을 점검하는 방법입니다. 자동 검사가 일부를 잡아내지만, 나머지는 사람이 직접 확인해야 합니다.

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2): 8.2.1 웹 애플리케이션 접근성 준수; 견고성
국제 기준 (WCAG 2.2): 4.1.2 네임·역할·값 (A) ↗4.1.3 상태 메시지 (AA) ↗

어떻게 검사하나요

ARIA 속성 오용은 자동 검사되지만, 커스텀 위젯(탭, 아코디언, 모달 등)이 스크린 리더에서 역할·상태·값을 올바르게 안내하고 키보드 패턴(WAI-ARIA APG)대로 동작하는지는 보조기기로 직접 확인하세요.

자동 검사로 잡히는 부분

이 항목은 26개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

인터랙티브 요소가 중첩되어 있습니다 nested-interactive
버튼 안의 링크처럼 조작 요소가 중첩되면 스크린 리더와 키보드 동작이 예측 불가능해집니다. 하나의 요소로 합치거나 형제 요소로 분리하세요.
```

<button><a href="/detail">자세히</a></button>

<a class="button-style" href="/detail">자세히</a>
```
해당 role에 허용되지 않는 ARIA 속성이 있습니다 aria-allowed-attr
요소의 role이 지원하지 않는 aria-* 속성은 무시되거나 오동작합니다. WAI-ARIA 명세에서 해당 role이 지원하는 속성인지 확인하고 제거·수정하세요.
role에 필수인 ARIA 속성이 누락되었습니다 aria-required-attr
예: role="checkbox"에는 aria-checked가 필수입니다. 해당 role의 필수 속성을 추가하세요.
```
<div role="checkbox" aria-checked="false" tabindex="0">약관 동의</div>
```
role에 필수인 자식 요소가 없습니다 aria-required-children
예: role="list"는 role="listitem" 자식이, role="tablist"는 role="tab" 자식이 필요합니다. 구조를 명세대로 맞추세요.
role에 필수인 부모 요소가 없습니다 aria-required-parent
예: role="tab"은 role="tablist" 안에, role="option"은 role="listbox" 안에 있어야 합니다.
존재하지 않는 role 값을 사용하고 있습니다 aria-roles
오타이거나 폐기된 role은 무시됩니다. WAI-ARIA 명세의 유효한 role 이름인지 확인하세요.
존재하지 않는 ARIA 속성을 사용하고 있습니다 aria-valid-attr
aria-lable처럼 오타가 난 속성은 조용히 무시되어 접근성이 제공되지 않습니다. 속성 이름을 확인하세요.
ARIA 속성 값이 올바르지 않습니다 aria-valid-attr-value
예: aria-hidden="yes"(잘못) → aria-hidden="true", 존재하지 않는 id를 참조하는 aria-labelledby 등. 명세에 맞는 값·실존하는 id인지 확인하세요.
body에 aria-hidden이 지정되어 있습니다 aria-hidden-body
<body aria-hidden="true">는 페이지 전체를 보조기기에서 숨깁니다. 제거하세요.
aria-hidden 요소 안에 초점 가능한 요소가 있습니다 aria-hidden-focus
보조기기에는 숨겨졌지만 Tab으로는 도달 가능한 '유령 초점'이 생깁니다. 내부 초점 요소에 tabindex="-1"을 주거나 inert 속성을 사용하세요.
```
<div aria-hidden="true" inert>…</div>
```
ARIA 입력 필드에 접근 가능한 이름이 없습니다 aria-input-field-name
role="textbox", role="combobox" 등 커스텀 입력 위젯에 aria-label 또는 aria-labelledby로 이름을 제공하세요.
ARIA 토글 필드에 접근 가능한 이름이 없습니다 aria-toggle-field-name
role="checkbox", role="switch" 등 토글 위젯에 이름을 제공하세요.
ARIA 버튼·링크·메뉴항목에 이름이 없습니다 aria-command-name
role="button|link|menuitem" 요소에 텍스트 또는 aria-label을 제공하세요.
meter 요소에 접근 가능한 이름이 없습니다 aria-meter-name
role="meter"가 무엇을 측정하는지 aria-label로 알려주세요 (예: "저장 공간 사용량").
진행 표시줄에 접근 가능한 이름이 없습니다 aria-progressbar-name
role="progressbar"가 어떤 작업의 진행률인지 aria-label로 알려주세요 (예: "파일 업로드 진행률").
툴팁 요소에 접근 가능한 이름이 없습니다 aria-tooltip-name
role="tooltip" 요소에 내용 텍스트를 제공하세요.
탭에 접근 가능한 이름이 없습니다 aria-tab-name
role="tab" 요소는 어떤 탭인지 이름이 있어야 스크린 리더가 "공지사항 탭, 1/3"처럼 읽어 줍니다. 탭 안에 텍스트를 넣거나 aria-label로 이름을 지정하세요.
```
<div role="tablist">
  <button role="tab" aria-selected="true" aria-controls="panel-notice">공지사항</button>
  <button role="tab" aria-selected="false" aria-controls="panel-faq">자주 묻는 질문</button>
</div>
```
다이얼로그에 접근 가능한 이름이 없습니다 aria-dialog-name
모달이 열릴 때 스크린 리더가 무슨 창인지 알 수 있도록 aria-labelledby로 제목과 연결하세요.
```
<div role="dialog" aria-modal="true" aria-labelledby="dlg-title">
  <h2 id="dlg-title">회원 탈퇴 확인</h2>
</div>
```
role=text 안에 초점 가능한 요소가 있습니다 aria-text
role="text"는 자식의 의미를 모두 제거합니다. 내부에 링크·버튼이 있다면 role을 제거하세요.
트리 항목에 접근 가능한 이름이 없습니다 aria-treeitem-name
role="treeitem" 요소에 텍스트 또는 aria-label을 제공하세요.
요소 상태와 맞지 않는 ARIA 속성이 있습니다 aria-conditional-attr
예: 네이티브 <input type="checkbox">에 aria-checked를 중복 지정하면 실제 상태와 어긋날 수 있습니다. 네이티브 상태를 그대로 쓰고 중복 ARIA를 제거하세요.
폐기된 ARIA role을 사용하고 있습니다 aria-deprecated-role
directory 등 폐기된 role은 최신 명세의 대체 role로 교체하세요.
해당 요소에 금지된 ARIA 속성이 있습니다 aria-prohibited-attr
예: 일반 <div>(role 없음)에는 aria-label이 효과가 없습니다. 적절한 role을 부여하거나 다른 방식으로 이름을 제공하세요.
점자 레이블에 대응하는 일반 레이블이 없습니다 aria-braille-equivalent
aria-braillelabel을 쓰려면 일반 aria-label(또는 접근 가능한 이름)이 먼저 있어야 합니다.
presentation role이 다른 속성과 충돌합니다 presentation-role-conflict
role="presentation"(또는 none) 요소에 tabindex나 aria 속성이 있으면 role이 무시됩니다. 장식용이면 다른 속성을 제거하고, 의미가 있다면 presentation role을 제거하세요.
요소에 허용되지 않는 role이 지정되었습니다 aria-allowed-role
예: <li role="button">처럼 요소 의미와 어긋나는 role은 혼란을 만듭니다. 가능하면 시맨틱 요소(<button>)를 직접 사용하세요.

내 사이트는 어떤지 확인해 보세요

주소만 넣으면 이 항목을 포함한 KWCAG 33항목을 한 번에 점검해 드립니다. 로그인 없이 한 페이지를 바로 검사해 볼 수 있습니다.

무료로 검사하기

웹 애플리케이션 접근성 준수 검사 방법

어떤 기준에 해당하나요

어떻게 검사하나요

자동 검사로 잡히는 부분

인터랙티브 요소가 중첩되어 있습니다 `nested-interactive`

해당 role에 허용되지 않는 ARIA 속성이 있습니다 `aria-allowed-attr`

role에 필수인 ARIA 속성이 누락되었습니다 `aria-required-attr`

role에 필수인 자식 요소가 없습니다 `aria-required-children`

role에 필수인 부모 요소가 없습니다 `aria-required-parent`

존재하지 않는 role 값을 사용하고 있습니다 `aria-roles`

존재하지 않는 ARIA 속성을 사용하고 있습니다 `aria-valid-attr`

ARIA 속성 값이 올바르지 않습니다 `aria-valid-attr-value`

body에 aria-hidden이 지정되어 있습니다 `aria-hidden-body`

aria-hidden 요소 안에 초점 가능한 요소가 있습니다 `aria-hidden-focus`

ARIA 입력 필드에 접근 가능한 이름이 없습니다 `aria-input-field-name`

ARIA 토글 필드에 접근 가능한 이름이 없습니다 `aria-toggle-field-name`

ARIA 버튼·링크·메뉴항목에 이름이 없습니다 `aria-command-name`

meter 요소에 접근 가능한 이름이 없습니다 `aria-meter-name`

진행 표시줄에 접근 가능한 이름이 없습니다 `aria-progressbar-name`

툴팁 요소에 접근 가능한 이름이 없습니다 `aria-tooltip-name`

탭에 접근 가능한 이름이 없습니다 `aria-tab-name`

다이얼로그에 접근 가능한 이름이 없습니다 `aria-dialog-name`

role=text 안에 초점 가능한 요소가 있습니다 `aria-text`

트리 항목에 접근 가능한 이름이 없습니다 `aria-treeitem-name`

요소 상태와 맞지 않는 ARIA 속성이 있습니다 `aria-conditional-attr`

폐기된 ARIA role을 사용하고 있습니다 `aria-deprecated-role`

해당 요소에 금지된 ARIA 속성이 있습니다 `aria-prohibited-attr`

점자 레이블에 대응하는 일반 레이블이 없습니다 `aria-braille-equivalent`

presentation role이 다른 속성과 충돌합니다 `presentation-role-conflict`

요소에 허용되지 않는 role이 지정되었습니다 `aria-allowed-role`

내 사이트는 어떤지 확인해 보세요

웹 애플리케이션 접근성 준수 검사 방법

어떤 기준에 해당하나요

어떻게 검사하나요

자동 검사로 잡히는 부분

인터랙티브 요소가 중첩되어 있습니다 nested-interactive

해당 role에 허용되지 않는 ARIA 속성이 있습니다 aria-allowed-attr

role에 필수인 ARIA 속성이 누락되었습니다 aria-required-attr

role에 필수인 자식 요소가 없습니다 aria-required-children

role에 필수인 부모 요소가 없습니다 aria-required-parent

존재하지 않는 role 값을 사용하고 있습니다 aria-roles

존재하지 않는 ARIA 속성을 사용하고 있습니다 aria-valid-attr

ARIA 속성 값이 올바르지 않습니다 aria-valid-attr-value

body에 aria-hidden이 지정되어 있습니다 aria-hidden-body

aria-hidden 요소 안에 초점 가능한 요소가 있습니다 aria-hidden-focus

ARIA 입력 필드에 접근 가능한 이름이 없습니다 aria-input-field-name

ARIA 토글 필드에 접근 가능한 이름이 없습니다 aria-toggle-field-name

ARIA 버튼·링크·메뉴항목에 이름이 없습니다 aria-command-name

meter 요소에 접근 가능한 이름이 없습니다 aria-meter-name

진행 표시줄에 접근 가능한 이름이 없습니다 aria-progressbar-name

툴팁 요소에 접근 가능한 이름이 없습니다 aria-tooltip-name

탭에 접근 가능한 이름이 없습니다 aria-tab-name

다이얼로그에 접근 가능한 이름이 없습니다 aria-dialog-name

role=text 안에 초점 가능한 요소가 있습니다 aria-text

트리 항목에 접근 가능한 이름이 없습니다 aria-treeitem-name

요소 상태와 맞지 않는 ARIA 속성이 있습니다 aria-conditional-attr

폐기된 ARIA role을 사용하고 있습니다 aria-deprecated-role

해당 요소에 금지된 ARIA 속성이 있습니다 aria-prohibited-attr

점자 레이블에 대응하는 일반 레이블이 없습니다 aria-braille-equivalent

presentation role이 다른 속성과 충돌합니다 presentation-role-conflict

요소에 허용되지 않는 role이 지정되었습니다 aria-allowed-role

내 사이트는 어떤지 확인해 보세요

관련 검사항목

인터랙티브 요소가 중첩되어 있습니다 `nested-interactive`

해당 role에 허용되지 않는 ARIA 속성이 있습니다 `aria-allowed-attr`

role에 필수인 ARIA 속성이 누락되었습니다 `aria-required-attr`

role에 필수인 자식 요소가 없습니다 `aria-required-children`

role에 필수인 부모 요소가 없습니다 `aria-required-parent`

존재하지 않는 role 값을 사용하고 있습니다 `aria-roles`

존재하지 않는 ARIA 속성을 사용하고 있습니다 `aria-valid-attr`

ARIA 속성 값이 올바르지 않습니다 `aria-valid-attr-value`

body에 aria-hidden이 지정되어 있습니다 `aria-hidden-body`

aria-hidden 요소 안에 초점 가능한 요소가 있습니다 `aria-hidden-focus`

ARIA 입력 필드에 접근 가능한 이름이 없습니다 `aria-input-field-name`

ARIA 토글 필드에 접근 가능한 이름이 없습니다 `aria-toggle-field-name`

ARIA 버튼·링크·메뉴항목에 이름이 없습니다 `aria-command-name`

meter 요소에 접근 가능한 이름이 없습니다 `aria-meter-name`

진행 표시줄에 접근 가능한 이름이 없습니다 `aria-progressbar-name`

툴팁 요소에 접근 가능한 이름이 없습니다 `aria-tooltip-name`

탭에 접근 가능한 이름이 없습니다 `aria-tab-name`

다이얼로그에 접근 가능한 이름이 없습니다 `aria-dialog-name`

role=text 안에 초점 가능한 요소가 있습니다 `aria-text`

트리 항목에 접근 가능한 이름이 없습니다 `aria-treeitem-name`

요소 상태와 맞지 않는 ARIA 속성이 있습니다 `aria-conditional-attr`

폐기된 ARIA role을 사용하고 있습니다 `aria-deprecated-role`

해당 요소에 금지된 ARIA 속성이 있습니다 `aria-prohibited-attr`

점자 레이블에 대응하는 일반 레이블이 없습니다 `aria-braille-equivalent`

presentation role이 다른 속성과 충돌합니다 `presentation-role-conflict`

요소에 허용되지 않는 role이 지정되었습니다 `aria-allowed-role`