HTML <s>: 관련 없는 텍스트 요소

HTML <s> 요소는 더 이상 관련이 없거나 정확하지 않은 정보를 나타냅니다.

<p><s>3월 15일까지 신청하세요!</s></p>
<p>신청 마감! 성원에 감사드립니다.</p>

특성

전역 특성만 포함합니다.

접근성 고려사항

대부분의 스크린 리더는 기본 설정에서 <s> 요소의 존재를 표현하지 않습니다. 사용자가 반드시 <s>가 있다는 것을 알아야 한다면 CSS ::before과 ::after 의사 선택자의 content 속성을 사용하세요.

s::before,
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: ' [취소선 시작] ';
}

s::after {
  content: ' [취소선 끝] ';
}

그러나 일부 스크린 리더 사용자는 필요한 정보만 들을 수 있도록 상세한 표현을 의도적으로 끄는 경우가 있습니다. 따라서 이렇게 임의로 표현을 강제하는 방법을 남용해서는 안되고, <s>의 유무가 콘텐츠의 이해에 직접 영향을 줄 때만 적용하세요.

명세

HTML Living Standard

브라우저 호환성

같이 보기

• 반대로, 관련 있는 부분을 강조하는 <mark>