Image Replacement 의 약자

크게 스크린리더가 읽을 수 없는 방법과 있는 방법으로 나누어진다

1. 스크린 리더가 읽을 수 없음

1. display : none

2. visibility: hidden

3. width: 0
   height: 0
   font-size: 0
   line-height: 0
   사이즈를 0으로 지정하는 경우

이런 방법은 스크린 리더가 읽을 수 없어서 장애인 분들은 곤란한 상황이 올수있다

2. 스크린 리더가 읽을 수 있음

1. text-indent : -9999px

단점 : 컴퓨터가 위치값을 많이 계산 해야해서 성능저하 우려

2. postion
   요소에 포지션을 주고 z-index로 그림 밑으로 숨기거나
   가상요소를 움직여서 그림 밑으로 숨기는 방법

3. sr-only, a11y-hidden

.a11y-hidden {
background-color: red;
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip-path: polygon(0 0, 0 0, 0 0);
}
내가 실제로 사용한 코드이다
화면에서 크기가 방해받지 않게 앱솔을 주고 크기를 1로 준다면 음수 마진으로 밀어내고 오버플로우 히든으로 숨긴다
clip-path는 크기를 '점'으로 만든것