99%의 개발자가 모르는 ARIA 속성

기본 HTML 요소가 있으면 그게 정답. ARIA 는 그 표준 요소로 표현 불가능할 때만 등장한다.

<!-- ❌ 키보드/포커스/Enter/Space 모두 직접 처리해야 함 -->
<div role="button" tabindex="0" onclick="submit()">Submit</div>

<!-- ✅ 모든 게 무료 — 키보드, AT, 포커스 링, 비활성, 폼 제출 -->
<button onclick="submit()">Submit</button>

ARIA 위젯 패턴 은 키보드 인터랙션을 모두 직접 구현 해야 동작한다. 가능하면 표준 요소로 가는 것이 접근성·유지보수·버그 모두 이익.

aria-expanded, aria-pressed, aria-checked, aria-selected 는 상태가 변할 때 함께 업데이트 되어야 한다. 그렇지 않으면 처음 값 만 영원히 보고된다.

// ❌ 시각만 바뀌고 a11y 트리는 그대로
const [open, setOpen] = useState(false);
<button onClick={() => setOpen(!open)} aria-expanded="false">메뉴</button>

// ✅ 상태 변화에 따라 ARIA 도 동기화
<button onClick={() => setOpen(!open)} aria-expanded={open}>메뉴</button>

자동화 도구(axe, Lighthouse) 는 초기 렌더만 검사하므로 이 버그는 수동 테스트나 단위 테스트 로만 잡힌다.

폼 에러, 검색 결과 갱신, 토스트 알림 같은 DOM 변화 는 보조 기술에 자동으로 전달되지 않는다. aria-live 또는 그에 해당하는 role 이 필요.

<!-- 폼 검증: 즉시 알림 -->
<span id="email-error" role="alert">올바른 이메일을 입력하세요</span>

<!-- 검색 결과: 적절한 시점에 알림 -->
<div id="results" aria-live="polite" aria-atomic="false">
  <span>12개 결과</span>
</div>

<!-- 로딩 표시 -->
<div role="status" aria-busy="true">불러오는 중...</div>

polite 는 사용자가 한가할 때, assertive 는 즉시 끼어든다. 남용하면 알림이 산만해 도리어 사용성을 해친다.

[감점 답변] 'aria-label 만 붙이면 된다'. [좋은 답변] (1) <button role="switch" aria-checked={on}> 또는 <input type="checkbox" role="switch"> — 키보드 포커스/Space 키 가 동작하는 표준 요소 위에. (2) aria-checked 를 상태 변화에 따라 동기화. (3) 라벨은 <label> 또는 aria-labelledby. (4) 시각적 상태 외에 aria 라벨이 상태를 분명히 전달 — "on"/"off" 같은 텍스트.

[감점 답변] '역할만 dialog'. [좋은 답변] (1) role="dialog" + aria-modal="true". (2) 제목과 본문을 aria-labelledby/aria-describedby 로 연결. (3) 열릴 때 포커스를 다이얼로그 내부 첫 인터랙티브 요소로 이동. (4) 포커스 트랩 — 닫힐 때까지 외부로 못 나가도록 Tab 순환. (5) ESC 키 닫기 + 닫힐 때 원래 트리거 버튼 으로 포커스 복귀.