ARIA 속성 적용 패턴

// 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 사용
#accessibility#aria
#324