Image 요소의 alt 속성

이미지의 alt 속성은 단순 부가 설명이 아니라 여러 중요한 기능을 가지는 속성.

 

-  이미지를 로드할 수 없는 상황에서 대체 텍스트를 제공

ex) 네트워크 문제로 이미지가 로드되지 않는 경우, alt 속성의 텍스트가 대신 표시되어 이미지의 의도를 전달할 수 있다.

 

-  접근성 측면에서 큰 도움을 준다. 

ex)스크린 리더를 사용하는 시각 장애 사용자는 이미지를 직접 볼 수 없기 때문에, alt 속성을 통해 이미지의 내용을 음성으로 듣게 되어 웹 페이지 내 이미지 컨텐츠에 시각 장애 여부와 상관 없이 누구나 접근가능.

 

- SEO 측면에서도 중요한 요소로 작용

ex)검색 엔진은 이미지를 시각적으로 분석할 수 없기 때문에, alt 속성에 포함된 텍스트를 기반으로 이미지의 콘텐츠를 이해하고 이를 검색 결과에 반영함. 따라서 적절한 키워드가 포함된 alt 속성은 이미지 검색에서 상위 노출을 시킴.

 

 

모든 이미지에 alt 속성을 꼭 작성해야 하는가 ?

- 반드시 사용하지는 않는다. 장식적인 용도로만 사용되는 이미지에는 alt 속성을 비워두는 것이 더 좋다.

ex) 배경으로 사용되는 이미지나 레이아웃 디자인을 위한 이미지는 의미를 전달하지 않아도 되므로 alt=""로 빈 값을 설정하는 것이 좋다. 빈값으로 설정하면 스크린 리더가 이를 건너뛰도록 하여 사용자가 불필요한 요소에 대한 설명을 듣지 않고 넘어갈 수 있다.

반면, 만약 중요한 정보나 컨텐츠를 담고 있는 이미지라면 항상 적절한 alt 텍스트를 제공해야 한다.

 

 

News-app 프로젝트에도 기사가 제공하는 썸네일 이미지가 없으면 위와 같이 표시가 된다.

 

import styles from './NewsItem.module.css';

const NewsItem = (params) => {
  //console.log(params.items);
  const url = params.items.url;
  const urlToImage = params.items.urlToImage;
  
  return (
    <div className={styles.block} >
      <div className={styles.thumbnail}>
        <a href={url} target="_blank">
          <img src={urlToImage} 
               alt="noImage" />
        </a>
      </div>
      <div className={styles.contents}>
        <h2>
          <a href={url} target="_blank">{params.items.title}</a>
        </h2>
        <p>{params.items.description}</p>
      </div>
    </div>
  );
};

export default NewsItem;