개발자

img태그에 alt는 왜 넣어야 하나요?

2023년 03월 08일조회 1,429

초보 코린이 프론트엔드 개발자 입니다. img 태그를 사용할 때 alt 속성을 넣지 않으면 아래와 같은 경고가 나오는데요 img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. 왜 alt속성을 넣어줘야 하나요? 어차피 안보이는거... 고수님들 부탁드립니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 5

인기 답변

이국범님의 프로필 사진

1. 구글 이미지 검색시에 alt 태그가 검색 순위에 영향을 줍니다 2. 윗분 말씀대로 시각장애인 분 대상으로 음성 서비스를 제공할 때 alt 태그를 사용합니다 그러므로 디스크립션이 구체적일 수록 좋은데 예를 들어 "아기" 보다는 "우는 아기"가 더 낫고 그것 보다도 "밥을 달라고 떼쓰며 우는 아기"가 더 낫습니다 링크 참조하세요 https://www.youtube.com/watch?v=dEbl5jvLKGQ (2분 부터) 그런데 db에서 임의의 이미지를 query문으로 불러와 뿌려주는 경우에는 안 넣는 경우도 있습니다 netflix, spotify 들어가셔서 devtools키고 이미지 보시면 alt태그 디스크립션 설명 거의 없습니다

profile picture

익명

작성자

2023년 03월 09일

오 그렇군요.. 설명 감사합니다 링크도 들어가볼게요!

인기 답변

이범희님의 프로필 사진

접근성 때문이에요. 시각장애자의 경우 이미지를 볼 수 없어요. 이때 스크린리더기 등으로 웹서비스를 사용할 수 있는데 img태그의 경우 스크린리더기가 alt속성에 정의된 텍스트를 읽어줘요. 만약 콘텐츠로서 의미가 없는 이미지라면 빈 스트링으로라도 alt속성을 명시해줘야해요, 두번째는 seo 때문이에요.

profile picture

익명

작성자

2023년 03월 09일

아 그런 부분을 생각 못했네요.. 서비스 만들 때 이런 부분도 더 깊이 생각해 봐야겠어요..

한구름님의 프로필 사진

1. 접근성 스크린리더 와 같은 보조기기로 탐색을 하는 사용자가 이미지 요소를 만났을 때 이미지에 포함된 정보를 제공하는 데 사용됩니다. 장식 이미지인 경우 alt=“”와 같이 설정하여 스크린리더가 읽지 않도록 설정할 수 있습니다. 정보가 담긴 경우라면 해당 정보를 대체텍스트로 작성해 주셔야해요. 2. 이미지가 올바르게 표시되지않을 때(잘못된 연결 또는 네트워크 오류 등) 해당 이미지 정보를 제공할 수 있습니다. 3. seo

항항님의 프로필 사진

이미지를 불러오지 못 했을때 어떤 이미지인지 설명하기 위함이라고 알고 있습니다.

손유승님의 프로필 사진

가장 간단한 이유는 접근성입니다. 시각장애인용 스크린 리더기는 차치하고서라도, 이미지를 못 불러왔을 때 사용자 입장에서 이것이 이미지 불러오기 오류인지, 아니면 이것이 원래 이미지인지 판단할 수 있게 하기 위해서이기도 하죠. "검색 결과가 없습니다"와 비슷한 맥락입니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!