---
type: snippet
tags: ['accessibility', 'aria']
status: release
ctime: 2024-12-31
mtime: 2024-12-31
---

ARIA 속성 적용 패턴

```tsx
// region + labelledby
<div role="region" aria-labelledby={titleId}>
  <h2 id={titleId}>제목</h2>
</div>

// list + listitem
<div role="list" aria-labelledby="list-title">
  <div role="listitem" aria-labelledby={`${label}-label ${label}-value`}>
    <span id={`${label}-label`}>{label}</span>
    <span id={`${label}-value`}>{value}</span>
  </div>
</div>
```

- `aria-labelledby` - 연결된 요소의 텍스트를 레이블로
- `aria-describedby` - 추가 설명이 필요할 때
- 중복 제거: aria-label과 화면 텍스트 중복 시 aria-labelledby 사용