[FE] img 태그 alt 속성 내용

아래의 Item 컴포넌트(Vue)는 상품 목록 페이지(ItemList)에서 하나의 상품 카드를 렌더링하는 컴포넌트이다. 과제를 완료하고 pull request를 통하여 피어리뷰를 진행하면서 다른 분께 받은 리뷰 내용이다.

 

평소 alt 속성의 내용이 중요하다는 점을 인지하고 있지 않았기 때문에 "image not found", "404 not found"와 같은 텍스트를 사용하고 있었다. 그런데 만약 이미지를 불러오는 과정에서 오류가 생기거나, 시각장애인이 서비스를 이용한다면 이 페이지를 통해서 얻어가는 정보는 "image not found" 밖에 없는 것이다ㅠㅠ

 

클라이언트를 개발하는데, 사용자가 필요한 정보를 얻지 못한다면 큰 문제라고 생각했다.

 

따라서 이미지가 로딩에 실패하거나, 스크린 리더를 사용하는 사용자에게도 정보를 잘 전달하기 위해 적절한 alt 속성값을 사용해야겠다고 생각하게 되었다.

 

결론

img 태그에서 alt 속성을 지정할 때, 사용자 입장에서 좀 더 고민하고 결정하자!