CSS로 대체 텍스트를 화면에서 숨기는 방법은 여러가지가 있다. 몇가지 방법들을 살펴보고 사용하지 말아야 할 속성들과 주의해야할 점들을 알아보도록 하겠다. 대체 텍스트는 그 의미가 잘 전달이 되도록 시멘틱하게 마크업 해야 하고, 화면에서 보이지 않도록 CSS로 숨긴다. 이때 중요한 것은 스크린 리더기가 읽을 수 있도록 처리해야 한다는 점이다.
요소를 화면에서 숨기는 방법
(1) 좋지 않은 수준
- 스크린 리더가 인식하지 못하기 때문에, 다음 중 어느 속성이라도 사용하지 말아야 한다.
/* 투명도를 0으로 주는 것과 동일하게 화면에서 사라지지만, 스크린 리더 인식 안함 */
visibility: hidden;
/* 요소가 아예 없는 것으로 인식 */
display: none;
/* 요소의 사이즈를 0으로 만들면 스크린 리더 인식 안함 */
width: 0;
height: 0;
font-size: 0;
line-height: 0;
(2) 그저 그런 수준
- 스크린 리더가 인식하지만 레이아웃이나 성능 등에 이슈가 발생할 수 있기 때문에, 상황에 맞게 사용하여야 한다.
- 참고로 text-indent 값을 100%로 처리함으로서 성능 이슈는 피할 수 있다.
/* 투명해진 것 뿐, 위치를 그대로 잡고 있기 때문에 단독으로 사용 불가능 */
opacity: 0;
/* 전체 레이어의 크기가 지나치게 크게 잡힘: 성능 이슈 */
text-indent: -9999px;
/* position 속성 추가해야 함: 성능 이슈 */
z-index: -1;
(3) 좋은 수준
- 스크린 리더가 인식하면서 레이아웃이나 성능 등에 영향을 미치지 않는 방법으로, 아래 속성들을 조합해서 사용한다.
- HTML 전체적으로 많이 쓰이기 때문에 클래스로 처리하는 것이 효율적이다.
<span class="blind">숨김 텍스트</span>.blind {
/* 레이아웃에 영향을 끼치지 않도록 */
position: absolute;
/* 스크린 리더가 읽을 수 있도록 */
width: 1px;
height: 1px;
/* 눈에 보이는 부분을 제거 */
clip: rect(0 0 0 0);
margin: -1px;
overflow: hidden;
}
clip: rect(top right bottom left);
- 네개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성이다.
- position 속성 값이 absolute 혹은 fixed인 요소여야 한다.
- 만약 overflow 속성 값이 visible일 경우에는 적용이 되지 않는다.
[ 출처 ]
BoostCourse 웹 UI 개발 : https://www.boostcourse.org/web344/lecture/47663
728x90