ARIA 속성 검사기

ARIA 속성 검사기 사용 가이드

ARIA는 잘못 쓰면 쓰지 않는 것보다 나쁘다는 말이 있습니다. role="buton" 같은 오타나 aria-expanded="maybe" 같은 잘못된 값은 화면 낭독기가 무시하거나 엉뚱하게 읽습니다. 이 검사기는 붙여 넣은 HTML의 모든 role과 aria-* 속성을 WAI-ARIA 1.2의 역할·속성 목록과 비교합니다.

없는 역할과 추상 역할(widget, landmark 등), 없는 aria 속성(aria-labeledby 같은 오타), true·false만 되는 속성의 잘못된 값, aria-current·aria-live 같은 정해진 값 목록, 숫자여야 하는 속성, 없는 id를 가리키는 aria-labelledby·aria-controls를 ✕로 표시합니다. role="checkbox"에 aria-checked가 없는 것처럼 역할별 필수 상태가 빠진 경우도 찾습니다.

구조 문제도 짚습니다. aria-hidden="true" 안에 키보드로 갈 수 있는 요소가 있는 경우, 포커스되는 요소에 role="presentation"을 준 경우, 버튼·링크 안에 다른 대화형 요소가 들어간 중첩, 기본 역할과 같은 불필요한 role, 역할 없는 div·span의 aria-label을 알려 줍니다.

사용 방법

1. 1'검사할 HTML' 칸에 ARIA를 쓴 HTML을 붙여 넣습니다.
2. 2'실행'을 누르면 검사한 role·aria 속성 수와 오류·확인할 점이 나옵니다.
3. 3✕ 오류부터 철자, 값, 필수 상태를 고칩니다.
4. 4△ 항목(불필요한 role 등)을 정리한 뒤 다시 실행해 확인합니다.

<button role="button" aria-expanded="maybe" aria-controls="menu">메뉴</button>
<div id="menu" role="dialog" aria-modal="true"></div>
<div role="checkbox">약관 동의</div><span aria-labeledby="x">도움말</span>

role 속성 3개 · aria-* 속성 4개 검사 · 오류 3개 · 확인할 점 1개

△ button[role=button]: 기본 역할과 같은 role="button" 지정은 필요 없습니다
✕ button[role=button]: aria-expanded="maybe" — true 또는 false만 됩니다
✕ div[role=checkbox]: role="checkbox" 요소에 필수 속성 aria-checked 없음
✕ span: 없는 ARIA 속성 aria-labeledby

이럴 때 쓰면 좋아요

• 직접 만든 드롭다운·탭·모달의 ARIA를 점검할 때
• 코드 리뷰에서 ARIA 오타를 빠르게 찾을 때
• aria-hidden을 잘못 써서 키보드가 숨은 요소로 가는지 볼 때
• 디자인 시스템 컴포넌트의 마크업을 검수할 때

문제가 생겼을 때

활용 팁

• 네이티브 요소(<button>, <input>)로 해결되는 경우 ARIA를 쓰지 않는 것이 가장 안전합니다.
• 역할별로 허용되지 않는 속성 조합 같은 세부 규칙은 일부만 다루니 복잡한 위젯은 실제 보조기술로 시험하세요.
• 이름 문제는 접근 가능한 이름 계산기로 이어서 보세요.

자주 묻는 질문