ARIA 속성 적용 패턴 — aria-labelledby 는 공백으로 구분한 id 목록을 받아 그 순서대로 텍스트를 이어 붙여 이름을 만든다. aria-label 보다 우선한다1

// 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 사용

Footnotes

  1. aria-labelledby - MDN: “the content from each referenced element is combined in the order that they are referenced in the aria-labelledby value.” · “If an element has both attributes set, aria-labelledby will be used.” ↩

#accessibility#aria
`#324`