[KO-572] 대체 텍스트 정리

[gustn99]

작업 내용

대체 텍스트는 스크린 리더를 통해 이미지 설명을 읽음으로써 시각장애인의 웹 접근성을 높이기 위한 용도입니다.
따라서 중복되는 정보를 제공하는 경우에는 텍스트를 제거하고, '댓글 아이콘'처럼 어색한 설명은 '댓글'과 같이 변경하는 리팩터링이 주가 되었습니다.

그 과정에서 Image 태그 대신 svgr로 변경된 내용도 다수 존재하며, 아이콘 이미지가 많은 관계로 아직 남아 있는 코드도 많이 있습니다. 해당 리팩터링 이후로 대체 텍스트 관련 표준 가이드를 정립하고, 작업하며 눈에 보이는 것들을 하나둘씩 정리하면 좋을 것 같습니다!

우선 아래 내용을 중심으로 리팩터링 진행했습니다.

1. 이미지 주변에 충분한 텍스트 설명이 있는 경우 대체 텍스트 제거(alt 공란)
   ex. 랭킹 등에서: [리버풀 로고] 리버풀 -> [(공란)] 리버풀
2. 단순 꾸밈용 이미지인 경우 대체 텍스트 제거
   ex. [골대 이미지] 아직 작성된 게시글이 없습니다. -> [(공란)] 아직 작성된 게시글이 없습니다.
3. 어색한 대체 텍스트 수정
   ex. 게시글 목록 등에서: [댓글 아이콘] 23 -> [댓글] 23
4. 버튼 아이콘의 경우 button의 aria-label 사용하는 대신 alt 공란

관련 토스 기술 문서를 발견해서 첨부하니 참고하시면 좋을 것 같습니다!
기술 문서 1
기술 문서 2