ARIA 접근성 가이드

역할 · 문서 구조

role="deletion"

삭제되었거나 삭제 제안된 내용을 나타냅니다. HTML <del>에 대응합니다.

중급HTML 요소 우선

한눈에 보기

분류
문서 구조
대응 HTML
<del>
이름 정하는 방법
금지 (prohibited)
이름 필수
아니요
필수 상위 요소
없음
필수 하위 요소
없음

설명

deletion은 두 판의 차이를 보여 주거나 공동 편집에서 삭제를 제안할 때 지워진 내용을 표시합니다. 짝이 되는 역할은 insertion입니다.

이 역할은 WAI-ARIA 1.2에서 HTML 텍스트 수준 요소와 짝을 맞추기 위해 추가되었습니다. 이름(aria-label, aria-labelledby)을 붙일 수 없고, 화면낭독기가 기본 설정에서 따로 알려 주지 않는 경우가 많습니다. 대응 HTML 요소를 쓰는 것이 가장 간단하고 확실합니다.

NVDA 등 일부 화면낭독기는 설정에 따라 “삭제됨” 같은 안내를 하지만, 기본값에서 알리지 않는 경우도 많습니다. 가격 변경처럼 의미가 중요하다면 화면에 숨긴 텍스트(class="sr-only")로 “이전 가격” 같은 설명을 덧붙이는 방법이 더 확실합니다. 취소선 CSS(text-decoration: line-through)만으로는 아무 의미도 전달되지 않습니다.

함께 쓰는 속성

전역 속성(이름·설명 등)은 모든 역할에 쓸 수 있어 생략했습니다.

사용 예

가격 변경

권장HTML
<p>
  <del><span class="sr-only">이전 가격 </span>20,000원</del>
  <ins><span class="sr-only">할인 가격 </span>15,000원</ins>
</p>

CSS 취소선만 사용 (비권장)

비권장HTML
<span style="text-decoration: line-through">20,000원</span> 15,000원

화면낭독기 사용자에게는 “20,000원 15,000원”으로만 들립니다.

화면낭독기에서는

화면낭독기 안내 예시 (표현은 화면낭독기·브라우저·버전에 따라 조금씩 다릅니다)
상황들리는 안내 (예)
가격 문장 읽기삭제됨 이전 가격 20,000원 삭제됨 끝, 삽입됨 할인 가격 15,000원

사용 지침

이렇게 쓰세요

  • 삭제된 내용은 <del>로 표시하고, 의미가 중요하면 숨긴 설명 텍스트를 덧붙입니다.

이렇게 쓰지 마세요

  • 취소선 스타일만으로 삭제 의미를 전달하지 않습니다.
insertionemphasisstrong

참고 자료