웹 접근성을 한번이라도 한 사람이라면 모두 알듯한 sr-only
사용하는 이유는 모두 다르겠지만, 저같은 경우에는 이미지에 너무 많은 정보를 담을 때에 alt대신 div 혹은 p태그를 만들어 해당 태그에 이미지에 대한 설명을 담고 class="sr-only" 를 하는 방식으로 웹 접근성을 지키고 있습니다
sr-only를 만드는 css가 있는데 저는 주로 아래와 같은 스타일로 사용하고 있었지만
position: absolute;
left: -9999%;
width: 1px;
height: 1px;
overflow: hidden;
font-size: 0px;
color: transparent;
padding: 0;
border: 0;공통으로 사용하고 있는 css 규칙은 아래 스타일로 적용하는거 같습니다
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
padding: 0;
margin: -1px;
border: 0;
clip: rect(0,0,0,0); → 보여지게 하는 부분을 설정하는 것인데, 모든 값이 0 이므로 결국 보여지는 부분이 없음나머지 부분에 대한건 css를 쓰는 사람이라면 다 알듯한 내용이라 생각해 설명글을 따로 작성하지 않았지만 'clip: rect(0,0,0,0);'에 대한 내용은 처음 접해보는 거라 해당 내용에 대한 설명은 추가하였다
더 자세한 작성 규칙에 대한 내용을 알고 싶다면 출처를 확인하기!
그래도 공통으로 sr-only를 하는게 좋으니 앞으로는 공통 규칙에 따라 쓰도록 해야겠다
출처:
https://rgy0409.tistory.com/3079
https://min-kyung.tistory.com/78
