대체 텍스트 alt
alt 특성은 이미지의 텍스트 설명이며 필수는 아니지만, 스크린 리더가 alt의 값을 읽어 사용자에게 이미지를 설명하므로, 접근성 차원에서 매우 유용하다. 또한 네트워크 오류, 콘텐츠 차단, 죽은 링크 등 이미지를 표시할 수 없는 경우에도 이 속성의 값을 대신 보여준다.
기존에도 img 태그를 사용할 때 alt 속성을 작성했지만 다음과 같은 상태였다.
<div className="img__wrapper">
<Image
src={process.env.NEXT_PUBLIC_IMAGE_600 + postData.thumbnail}
alt="post-thumbnail"
/>이것은 alt 태그를 잘못 사용하고 있는 방식이었다.
ALT속성은 HTML 형식중 META의 한 종류로 이미지에 값을 부여하는데 웹사이트 운영단계에서 이를 무시하고 삽입하지 않거나 모두 똑같은 내용만을 반복해서 사용한다면 검색엔진이 이를 스팸으로 볼 수 있습니다. 따라서 이미지마다 개별적인 내용을 작성하는것이 중요합니다.
위의 방식대로라면 각 이미지가 가지는 대체 텍스트는 무의미한 'post-thumbnail'의 반복이다. alt 속성을 쓰는 의미가 없는 것이다.
그렇기 때문에 각 이미지가 중복되지 않고 적절한 대체 텍스트를 가질 수 있도록 수정해야 한다.
<div className="img__wrapper">
<Image
src={process.env.NEXT_PUBLIC_IMAGE_600 + postData.thumbnail}
alt={post.title}
/>
</div>
다만 썸네일 이미지와 제목이 묶여있는 경우에는 포스트 제목이 이미 썸네일 이미지를 설명하고 있으므로 중복 정보를 제공하지 않도록 alt=""로 사용했다.
조금 헷갈리는 부분이 있긴 하지만 확실한 건 alt 속성은 검색엔진을 위한 것만이 아니라 시각적으로 내용인식이 불가능한 사용자를 위한 용도이고, 의미있는 정보를 전달할 수 있게 사용되어야 한다는 것이다.
