A11y Check

KWCAG 2.2 · 6.5.32.2 신설

레이블과 네임 검사 방법

KWCAG 2.2 「레이블과 네임」 항목을 점검하는 방법입니다. 자동 검사가 일부를 잡아내지만, 나머지는 사람이 직접 확인해야 합니다.

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)
6.5.3 레이블과 네임
운용의 용이성
국제 기준 (WCAG 2.2)
2.5.3 레이블과 네임 (A) ↗

어떻게 검사하나요

화면에 보이는 버튼·링크 텍스트가 접근 가능한 이름(aria-label 등)에 포함되는지 확인하세요. 음성 인식 사용자가 화면에 보이는 이름으로 컨트롤을 호출할 수 있어야 합니다.

자동 검사로 잡히는 부분

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

  • 화면에 보이는 레이블이 접근 가능한 이름에 포함되지 않습니다 label-content-name-mismatch

    버튼에 "검색"이 보이는데 aria-label="찾기"로 지정하면 음성 인식 사용자가 "검색 클릭"이라고 말해도 동작하지 않습니다. 접근 가능한 이름이 보이는 텍스트로 시작하도록 맞추세요.

    <!-- 잘못된 예 -->
<button aria-label="찾기">검색</button>
<!-- 올바른 예 -->
<button aria-label="검색 (전체 게시글 대상)">검색</button>

  • 버튼에 인식 가능한 텍스트가 없습니다 button-name

    아이콘만 있는 버튼은 스크린 리더가 "버튼"이라고만 읽습니다.

    <!-- 잘못된 예 -->
<button><svg>…</svg></button>
<!-- 올바른 예 -->
<button aria-label="메뉴 열기"><svg aria-hidden="true">…</svg></button>

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

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

무료로 검사하기

관련 검사항목