본문 바로가기

개발 공부/HTML · CSS

안드로이드 Chrome talkback 이미지 대체텍스트 송출 안 되는 문제

접근성 대응을 위하여 이미지에 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>