스크린 리더용 텍스트

클래스

보조 기술이 계속 읽을 수 있어야 하는 텍스트에 이 클래스를 사용하세요. 요소를 비활성화하거나 키보드 탐색에서 제외하는 방법이 아닙니다.

시각적 잘라 내기와 접근 가능한 이름은 별개입니다

sr-only는 요소를 일반 흐름에서 빼고 1px 상자를 지정한 다음 그리기 영역을 잘라 냅니다. display: none, visibility: hidden, aria-hidden은 적용하지 않습니다. 따라서 텍스트는 접근 가능한 이름을 구성하는 데 계속 사용될 수 있습니다.

화살표에는 aria-hidden="true"가 있습니다. 레이블 텍스트는 sr-only로 시각적으로 잘리지만 링크의 접근 가능한 이름을 제공합니다. 링크 자체는 보이고 포커스를 받을 수 있습니다.

텍스트 설명

1. 링크는 접근 가능한 이름 계산에서 제외된 화살표와 Read the utility definition이 들어 있는 span을 포함합니다.
2. span은 실제 sr-only 프리셋인 절대 위치, 1px 상자, 넘친 내용 숨기기, 잘라 내기를 사용합니다. aria-hidden 없이 DOM에 남아 있습니다.
3. 보이는 링크는 여전히 40px 정사각형 영역을 차지하고 화살표를 표시합니다. 접근성 역할은 link이며 이름은 Read the utility definition입니다.
4. 두 갈래는 같은 컨트롤의 표현 방식이며 순차적으로 실행되는 작업이 아닙니다. 상위 요소를 접근성 트리에서 숨기면 하위 요소도 숨겨집니다.

클래스는 컨트롤 안의 레이블 텍스트에 지정하세요. 컨트롤 자체는 보이고 포커스를 받을 수 있어야 합니다. 아이콘에 aria-hidden="true"를 지정하면 이름 계산에서 제외되므로 텍스트가 동작을 설명하게 됩니다.

항상 잘리는 영역 안에 포커스를 받을 수 있는 컨트롤을 넣지 마세요. 키보드 사용자가 보이지 않는 컨트롤에 도달할 수 있습니다. 건너뛰기 링크에는 포커스를 받으면 보이는 별도 스타일이 필요하며, 프리셋은 반대로 되돌리는 not-sr-only 유틸리티를 제공하지 않습니다.

상위 요소가 하위 트리를 접근성 트리에서 제거하면 이 텍스트도 제거됩니다. sr-only는 상위 요소의 hidden, display: none, aria-hidden="true"를 상쇄할 수 없습니다. 실제 컨트롤에서 최종 역할과 이름을 확인하세요.

관련 문서: 접근 가능한 이름.

사용 예

아래 유틸리티 정의를 여는 아이콘 전용 링크에 이름을 지정합니다.

<a href="#customize">  <span aria-hidden="true">↓</span>  <span class="sr-only">Read the utility definition</span></a>

@layer utilities {  .sr-only {    position: absolute;    width: 1px;    height: 1px;    padding: 0;    margin: -1px;    overflow: hidden;    clip: rect(0, 0, 0, 0);    white-space: nowrap;    border-width: 0  }}

사용자 정의

프리셋은 이 클래스를 @utility로 정의합니다. 스타일시트에서 같은 이름을 정의하면 기존 정의를 대체합니다.

@utility sr-only {  position: absolute;  width: 1px;  height: 1px;  padding: 0;  margin: -1px;  overflow: hidden;  clip: rect(0, 0, 0, 0);  white-space: nowrap;  border-width: 0;}

관련 문서: 유틸리티 정의.