접근성 대응을 위하여 이미지에 alt 를 삽입하여, 대체텍스트를 추가 해 주면,
스크린 리더기가 읽어주게 되는데
최신 크롬 버전(chrome v137.0.7151.72)에서 일정 크기 이상의 이미지는 img 태그로 인식하지 않아 alt 에 작성 된 대체텍스트도 읽어주지 않는 문제가 발생했다.
아래와 같이 연결하면 이미지 태그 인식 및 이미지 내 텍스트까지 사용자에게 제공하여 접근성, 표준성 대응을 할 수 있다.
<img src="이미지경로" role="img" aria-labelledby="img01" alt="">
/* .blind 는 css 처리 하여 화면에 보이지 않게 함
id 맞춰주기! */
<div id="img01" class="blind">
이미지 內 대체텍스트 내용 넣어주기
</div>