Redundant alt attribute.

이미지 alt 속성의 중복 표현 경고와 스크린 리더를 고려한 대체 텍스트 작성.

React, JavaScript

img의 alt?
img의 alt?

평소처럼 CRA 패키지를 이용한 React.js 프로젝트를 하던 중에, alt 속성에 관한 처음보는 경고가 발생했다.

보통 html에서 img 태그를 사용할 때, alt 속성으로 이미지에 대한 대체 내용을 기술해놓을 것을 권장한다. 하지만 이런 경고는 처음 봤는데, 직역하면 다음과 같다.

Redundant alt attribute. Screen-readers already announce `img` tags as an image. You don’t need to use the words `image`, `photo,` or `picture` (or any specified custom words) in the alt prop. 중복된 alt 속성: 스크린 리더는 이미 img 태그를 공지하고 있고, 당신은 alt 속성 안에 image, photo, picture와 같은 단어를 사용할 필요가 없습니다.
문제가 발생한 코드
문제가 발생한 코드

아마 alt 속성에 ‘Attached Image’ 라고 쓴 부분에서 문제가 발생한 것으로 보인다. ‘Image’ 단어를 지워내자마자 콘솔이 깔끔해졌다. 이런 부분에서 에러 경고를 만날 줄은 몰랐는데 분명 꽤 친절한 부분이라는 생각이 든다.


원문: Medium