웹접근성 텍스트 숨김, 텍스트 스마트스크린리더기 숨기기, sr-only설정

 

웹접근성 텍스트 숨김 방법! sr-only 설정 하는 방법!

 

v

v

 

/* 접근성 관련 CSS */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  white-space: nowrap;
  margin: -1px;
  padding: 0;
  border-width: 0;
  clip-path: inset(50%);
}

 

1. position: absolute;

• 요소를 화면 레이아웃 흐름에 빼서 보이지 않는 곳에 배치하기 위한 작업

2. width: 1px; height: 1px;

• 요소의 크기를 아주 작게(1px)  만들어서 화면에 거의 보이지 않도록 함

3. overflow: hidden;

• 요소 안의 내용이 밖으로 보이지 않도록 잘라냄

4. white-space: nowrap;

• 텍스트의 줄바꿈을 막아서, 화면에 뜻하지 않게 표시되는 걸 예방

7. padding: 0;

• 내부 여백을 없애 크기를 더 줄여버림

8. border-width: 0;

• 테두리 때문에 크기가 보이거나 자리 차지하는 걸 방지

9. clip-path: inset(50%);

• 요소를 완전히 잘라내어 화면에 보이지 않도록 함
• 옛날방식 clip: react(0,0,0,0)을 대체하는 최신 방식

---

clip-path: inset(50%); 사용 이유?

clip-path: inset(50%)가 clip-path: polygon(0 0, 0 0, 0 0)보다 더 단순하고, 더 최신 표준에 맞고, 브라우저 호환성도 안정적이라서 더 권장됨!

 

왜 inset(50%)가 더 좋을까?!

 

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

• 3개의 좌표를 0,0으로 모아 그림을 0으로 만드는 방식이라 의미가 배우 불명확함
• 요소를 삼각형 모양으로 자름! 삼각형 좌표 3개가 모두 0이므로 화면에 아무것도 안 남음 (= 0px 크기)

clip-path: inset(50%);

• 요소의 모든 방향에서 50%씩 잘라냄! 중심 1px만 남게 됨. overflow: hidden;과 결합하면 보이지 않음.
• 사실상 요소 전체를 “잘라서 보이지 않게” 만드는 의미

 

최신 css 표준에서 더 안정적으로 동작

polygon()은 좌표 기반이라! 기술적으로 의미는 있지만 요소를 완전히 0으로 만드는 trick 이었고,

inset()은 css Masking 표준에서 요소 영역을 잘라내는 공식적인 방식 이라 미래 표준에서도 유지될 가능성이 훨씬 높음

 

브라우저 성능/렌더링에서 더 효율적

polygon()은 좌표 계산이 필요함! inset(50%)는 단순한 박스 잘라내기라 브라우저가 처리하기 빠름.

---

sr-only를 쓰는 이유?

화면에서는 필요 없지만(숨기고 싶음), 스크린리더에게는 꼭 읽히게 해야 할 텍스트를 넣기 위해 사용한다.
디자인은 깔끔하게 유지하면서 웹접근성은 챙기기 위한 css 사용방법이다!

• DOM에는 존재(화면에 보이지 않지만 존재함)
• 스크린리더기에서 읽혀짐

 

그렇다면?!!

 

스크린리더란?

시각 장애인이나 저시력 사용자가 웹페이지를 이용할 때,

화면의 텍스트나 대체 텍스트를 음성으로 읽어주는 프로그램!

 

스크린리더기는 화면을 읽지 않고,

HTML 구조·레이블·대체텍스트를 기반으로 내용을 읽고 안내!