IR (Image Replacement) 기법 / 요소 숨김 처리

IR (Image Replacement) 기법은 이미지를 볼 수 없는 사용자에게 적절한 대체 텍스트를 제공하는 것을 의미한다.

<img> 태그 alt 속성 내에 작성하기에 텍스트가 너무 길 경우에, 텍스트 태그를 따로 분리하고, visually_hidden 클래스를 css로 숨김 처리한다.

.visually_hidden1 {  
   /* 스크린 리더가 읽을 수 있도록 */  
   height: 1px;  
   width: 1px;    
   /* 레이아웃에 영향을 끼치지 않도록 */  
   position: absolute;    
   /* 이하 눈에 보이는 부분을 제거 */  
   overflow: hidden;  
   margin: -1px;
   /* 네개의 좌표로 지정한 직사각형 모양대로 요소를 잘라내는 속성.  
   포토샵의 mask 효과와 같다고 한다.  
   position 속성 값이 absolute 혹은 fixed인 요소여야하고,  
   만약 overflow 속성 값이 visible일 경우에는 적용이 되지 않는다. */  
   clip: rect(0 0 0 0);
}

 

📌 스크린 리더가 인식하지 못하는 속성값 

/* 투명도를 0으로 주는 것과 동일하게 화면에서 사라지지만,
스크린 리더 인식 안함 */
visibility: hidden;

/* 요소가 아예 없는 것으로 인식 */
display: none; 

/* 요소의 사이즈를 0으로 만들면 스크린 리더 인식 안함 */
width: 0;
height: 0;
font-size: 0;
line-height: 0;

 

 

참고 사이트

https://velog.io/@sklove96/%EC%9B%B9-%EC%A0%91%EA%B7%BC%EC%84%B1%EC%9D%84-%EA%B3%A0%EB%A0%A4%ED%95%98%EC%97%AC-%ED%85%8D%EC%8A%A4%ED%8A%B8-%EC%88%A8%EA%B8%B0%EA%B8%B0

웹 접근성을 고려하여 텍스트 숨기기

https://snupi.tistory.com/109

[실습][CSS] IR 기법 / 요소 숨김 처리 overflow:hidden