속성 · 라이브 리전 · 전역
aria-relevant
라이브 리전에서 어떤 종류의 변경(추가, 삭제, 텍스트 변경)을 알릴지 정합니다.
한눈에 보기
- 구분
- 속성 (Property)
- 분류
- 라이브 리전
- 값 형식
- 토큰 목록 (token list): additions / removals / text / all
- 기본값
additions text- 적용 범위
- 모든 요소 (전역 속성)
- HTML 대체
- 없음
설명
aria-relevant는 라이브 리전의 변경 가운데 알릴 가치가 있는 종류를 공백으로 구분한 값으로 지정합니다. additions(요소 추가), removals(요소·텍스트 삭제), text(텍스트 추가·변경)를 조합하거나 all(세 가지 모두)을 씁니다. 기본값은 additions text입니다.
기본값으로 대부분의 경우가 충분합니다. 기본값에서는 삭제를 알리지 않으므로, 예를 들어 "foo"가 "bar"로 바뀌면 "bar"만 읽힙니다. 오래된 로그 줄이 지워지는 것처럼 삭제는 대개 의미가 없는 변경이기 때문입니다.
삭제가 의미 있는 경우는 드뭅니다. 명세 예시처럼 대화 상대 목록에서 이름이 사라지는 것이 "그 사람이 접속을 끊었다"는 뜻이라면 all이나 additions removals를 고려합니다. 명세는 removals와 all을 아껴 쓰라고 명시합니다.
이 값은 보조기술에 대한 제안일 뿐이며, 보조기술이 모든 종류를 반드시 알려야 하는 것은 아닙니다. 실제로 removals 알림은 화면낭독기 지원이 일정하지 않습니다. 또한 조상에서 상속되지만 값이 합쳐지지 않고 덮어써집니다. 중요한 삭제는 "민수 님이 나갔습니다" 같은 텍스트를 추가하는 방식으로 알리는 편이 확실합니다.
검수할 때는 기본값을 바꾼 이유가 분명한지, removals에 기대지 않고도 정보가 전달되는지, 불필요한 변경까지 읽혀 소음이 되지 않는지 확인합니다.
값
| 값 | 의미 |
|---|---|
additions | 라이브 리전 안에 요소가 추가되면 알립니다. |
removals | 라이브 리전 안의 텍스트나 요소가 삭제되면 알립니다. |
text | 텍스트 내용이나 대체 텍스트가 추가·변경되면 알립니다. |
all | additions removals text와 같습니다. |
additions text 기본값 | 추가와 텍스트 변경을 알리고 삭제는 알리지 않습니다. |
사용 예
대부분은 기본값 그대로
<div role="log" aria-label="채팅">
<!-- aria-relevant를 생략하면 additions text -->
</div>삭제가 의미 있는 접속자 목록
<ul aria-live="polite" aria-relevant="additions removals" aria-label="접속 중인 사람">
<li>민수</li>
<li>지영</li>
</ul>지원이 일정하지 않으므로 "민수 님이 나갔습니다" 같은 텍스트 알림을 함께 제공하는 편이 확실합니다.
이유 없이 all 사용
<!-- 비권장: 로그의 오래된 줄이 지워질 때마다 불필요하게 읽힐 수 있음 -->
<div role="log" aria-relevant="all">...</div>화면낭독기에서는
| 상황 | 들리는 안내 (예) |
|---|---|
| 기본값 영역에서 "foo"가 "bar"로 바뀜 | bar |
| removals를 지원하는 환경에서 목록 항목이 삭제됨 | 민수 (삭제 안내는 화면낭독기마다 다름) |
사용 지침
이렇게 쓰세요
- 대부분은 기본값(
additions text)을 그대로 둡니다. - 삭제가 의미 있는 경우에만
removals를 추가합니다. - 중요한 삭제는 텍스트 메시지 추가로도 알립니다.
이렇게 쓰지 마세요
all을 습관적으로 넣지 않습니다.removals알림이 모든 화면낭독기에서 동작한다고 가정하지 않습니다.- 조상 값과 합쳐질 것이라고 기대하지 않습니다. 하위 요소의 값이 조상 값을 완전히 덮어씁니다.
사용할 수 있는 역할
전역 속성이므로 모든 역할과 HTML 요소에 쓸 수 있습니다. 특히 다음 역할과 자주 함께 씁니다.
관련 속성·패턴
이 속성을 쓰는 패턴