html의 img태그는 크기, 위치 조절이 번거롭다. 그래서 보통 중요도가 떨어지는 이미지의 경우에 한해서는 css background-image로 처리해주는데, 중요한 이미지까지 background-image 처리하면 웹접근성을 준수하지 못한다.
이런 경우에 이미지를 css background-image 속성으로 크기,위치 조절을 하면서 웹접근성을 위반하지 않는 트릭이 있다.
<ul class="thumb-info-list"> <li class="thumb-info-item"> <figure class="author-photo a11y-hidden-bg" style="background-image: url('images/profile_sq.png'"> <img src="images/profile_sq.png" alt="Tina Coloso" class="a11y-hidden"> </figure> <p class="thumb-info-content"> Lorem ipsum dolor sit.. </li> <li class="thumb-info-item"> <figure class="author-photo a11y-hidden-bg" style="background-image: url('images/profile_sq.png'"> <img src="images/profile_sq.png" alt="Tina Coloso" class="a11y-hidden"> </figure> <p class="thumb-info-content"> Lorem ipsum dolor sit.. </li> <li class="thumb-info-item"> <figure class="author-photo a11y-hidden-bg" style="background-image: url('images/profile_sq.png'"> <img src="images/profile_sq.png" alt="Tina Coloso" class="a11y-hidden"> </figure> <p class="thumb-info-content"> Lorem ipsum dolor sit.. </li> </ul>
- 우선, img를 담고 있는 figure 태그에 inline-style로 background-image를 불러온다.
💡
왜 inline-style인가? 썸네일 이미지 같은 경우는 보통 서버 데이터베이스에서 불러오는 이미지이고 치환될 수 있게 inline-style로 만들어야한다. (백엔드 지식이 없어서 CSS 파일에 넣게 되면 데이터를 불러오지 못한다는 것만 예상해볼 수 있었다. 다음 공부는 데이터베이스 예약..)
- .a11y-hidden-bg/ .a11y-hidden
.a11y-hidden-bg { overflow: hidden; background-repeat: no-repeat; background-position: center; background-size: cover; } // bg이미지를 숨기는 속성 .a11y-hidden { position:absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0) } // img태그 숨기는 속성
Uploaded by
N2T