[CSS] 숨김 컨텐츠와 접근성

 

📌 숨김 컨텐츠

• 마크업은 숨기되 스크린 리더가 접근하고 읽을 수 있어야 함

속성	화면	스크린 리더	기타 사항
display: none;	❌	❌	사용 지양 👎
aria-hidden	⭕	❌
overflow: hidden;	❌	⭕
visibility: hidden;	❌	❌
width / height / font-size : 0px;	❌	스크린 리더에 읽히긴 하나 ⭕  빈 객체에 초점이 갈 수도 있음  (사용자에게 혼돈을 줌) 👎	black hat의 원인 👎
text-indent: -9999px;	❌	스크린 리더에 읽히긴 하나 ⭕  요소와 초점이 맞지 않음 ⚠	검색 엔진 최적화에  좋지 않음(black hat) 👎
opacity: 0;	❌	스크린 리더 활동에 문제가 많음 👎	사용 지양 👎
clip: rect(0, 0, 0, 0);	❌	⭕	더 이상 권장되지 않는 속성 👎
clip-path: polygon(0 0, 0 0, 0 0);	❌	⭕

 

 

 

 

display: none;

• 화면에 안보임 ❌
• 스크린 리더로 읽지 않음 ❌
• 사용 지양 👎

.hidden {
  display: none;
}

 

 

 

aria-hidden 

• 화면에는 보임 ⭕
• 스크린 리더로는 읽지 않음 ❌

 

 

 

overflow: hidden;

• 넘치는 면적을 어떻게 처리할지 선택하는 속성
• 화면에 안보임 ❌
• 스크린 리더로 읽을 수 있음 ⭕

 

 

visibility: hidden;

• 화면에 안보임 ❌
• 스크린 리더에서 그 요소를 인식하지 못하고 접근을 못함 ❌

.hidden {
  visibility: hidden;
}

 

 

 

width / height / font-size : 0px;

• 스크린 리더에 읽히긴 하나 ⭕ 빈 객체에 초점을 일으키는 일이 있을 수 있음 (사용자에게 혼돈을 줌) 👎
• 스크린 리더의 가상 커서의 포커스를 받기 위해서는 최소한의 크기가 있어야 함
• font-size를 0으로 만드는 경우에는 VoiceOver로 접근 시 콘텐츠를 읽지 않고 스킵
• Google의 웹마스터 가이드라인을 위반하는 것이기 때문에 결국 black hat까지도 유발하는 원인이 될 수 있다.

 

 

text-indent: -9999px;

• 화면에 안보임 ❌
• 스크린 리더에 읽히긴 하나 ⭕ 해당 요소와 초점이 맞지 않음 ⚠
  - phark method: CSS의 들여쓰기 기능을 이용해서 텍스트를 아주 저 멀리로 보내버리는 방법
• 검색 엔진 최적화에 좋지 않음 (black hat) 👎

.hidden {
  text-indent: -9999px;
}

.hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

 

 

 

opacity: 0;

• 화면에 보이지 않음 ❌
• 스크린 리더의 활동에 문제가 많음 👎
  (포커스 문제가 발생함, VoiceOver는 읽어주지 않음)
• 사용 지양 👎

 

 

sr-only

: 컨텐츠를 시각적으로는 숨기지만 스크린 리더를 통해서는 접근 가능하도록 하는 클래스(명)

• 스크린 리더를 사용하는 사람들을 위해 웹 페이지의 시각적인 콘텐츠를 화면에서 숨기는 데 사용
• 웹 페이지에서 시각적으로 표시되지만 스크린 리더 사용자에게는 필요하지 않은 콘텐츠가 있을 때, 
  해당 요소에 "sr-only" 클래스를 적용하여 시각적으로는 표시되지 않지만 스크린 리더에는 읽힐 수 있도록 만들 수 있다.
• (ex. <label>, 아이콘, 장식용 태그 등)

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	clip: rect(0 0 0 0);
}

 

 

 

clip: rect(0, 0, 0, 0);

• 반드시 position: absolute 되어야 함
• clip은 더 이상 권장되지 않는 속성 👎

.sr-only {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  overflow: hidden;
}

 

 

 

clip-path: polygon(0 0, 0 0, 0 0);

•  화면에 안보임 ❌
• 스크린 리더로 읽을 수 있음 ⭕
• 요소를 시각적으로 숨기면서도 요소를 인식하고 접근하게 하기 위해 사용자에게 영향을 주지 않는 최소 크기 1px를 임의로 설정 - - 가상 커서(cursor)가 화면을 돌아다니며 탐색하기 때문에 가상 커서의 포커스를 받기 위해 최소 크기를 할당함 => 최소 크기마저 숨기려고 margin: -1px을 줌

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

 

 

* 스크린 리더에게 충분한 정보를 주기 위한 또 다른 방법

<figure class="isonline">
  <img src="" alt="" />
  <figcaption>
    <span class="sr-only">이수혁</span>
    <span class="sr-only">오프라인</span>
    <span class="state"></span>
    <!-- 상태 -->
  </figcaption>
</figure>

 

 

---

 

tailwind CSS의 sr-only

Screen Readers - Tailwind CSS

 

 

bootstrap의 sr-only

Screen readers

 

 

---

참고

 

접근 가능한 숨김 텍스트 - The Tracks of mulder21c