[TypeScrip.js] alt 속성에 대하여

이전에 react.js로 작성했던 코드들을 typescript.js로 바꾸는 작업에서 아래와 같은 에러가 발생

 

WARNING in [eslint] 
src/components/EmotionItem.tsx
  Line 22:7:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images  jsx-a11y/alt-text

 

기존에는 alt를 따로 설정하지 않았어서 아래와 같이 추가해주었다. 

 <img
        className="emotion_img"
        src={getEmotionImage(emotionId)}
        // alt을 추가해서 에러해결
        alt={`Emotion ${emotionId}`}
      />

 

 

alt이란?

alt 속성은 HTML의 img 요소에 사용되며, 이미지의 대체 텍스트를 제공하는 역할을 합니다. alt 속성의 주요 목적과 역할은 다음과 같습니다:

 

 

• 접근성:
  • 시각 장애인이나 저시력 사용자가 화면 읽기 소프트웨어(스크린 리더)를 사용하여 웹 페이지를 탐색할 때, alt 속성에 지정된 텍스트를 읽어줍니다. 이를 통해 이미지의 내용이나 목적을 이해할 수 있게 됩니다.
  • 예를 들어, alt="A happy person smiling"와 같은 설명이 있으면 스크린 리더는 "A happy person smiling"이라고 읽어줍니다.
• 이미지 로드 실패 대비:
  • 인터넷 연결 문제나 파일 경로 오류로 인해 이미지가 로드되지 않을 때, alt 속성에 지정된 텍스트가 대신 표시됩니다. 이로써 사용자는 이미지를 보지 못하더라도 해당 이미지의 의미나 목적을 알 수 있습니다.
  • 예를 들어, <img src="image.png" alt="Description of image">에서 이미지가 로드되지 않으면 "Description of image"가 텍스트로 표시됩니다.
• SEO (검색 엔진 최적화):
  • 검색 엔진은 웹 페이지의 이미지를 인덱싱할 때 alt 속성의 텍스트를 참고하여 이미지의 내용을 이해합니다. 따라서 적절한 alt 텍스트를 제공하면 웹 페이지의 검색 엔진 최적화(SEO)에도 도움이 됩니다.
  • 검색 엔진이 이미지를 더 잘 이해하고 관련 검색 결과에 노출할 가능성이 높아집니다.