이미지에 대체 텍스트를 삽입하면 좋은 점이 있나요?

이렇게 사진에 텍스트를 삽입하면 좋은 점이 있나요? 전혀 모르는 내용 이어서요. ㅜㅜ 알트 속성을 입력하면 어떤 면에서 좋을까요?

이미지에 대체 텍스트를 삽입하면 좋은 점

Goolge이 개발한 웹 페이지 품질 개선 도구인 lighthouse에서 보고서를 생성하면 "접근성" 항목에서 alt 속성을 작성하지 않았을 때, 작성했을 때의 차이를 점수로 알 수 있습니다.

크게 신경 쓰지 않는 분들도 많고 스스로 확인하지 않으면 잘 모르고 넘어가는 부분 중에 하나라 lighthouse에서 티스토리 블로그의 점수를 확인하는 방법과 alt 속성을 작성하지 않았을 때, 작성했을 때의 차이를 직접 보여드려 볼까 해서 글을 작성해봅니다.

Lighthouse 점수 보고서 생성

1. [F12] 키 또는 [Ctrl + Shift + I] 단축키를 눌러 개발자 모드를 방문합니다.

2. 오른쪽 상단 [Lighthouse] 메뉴를 클릭합니다.

3. 데스크톱, 모바일을 선택하세요. 기본값은 [데스크톱]입니다.

4. [보고서 생성]을 클릭합니다.

5. 각 항목 별로 점수가 측정됩니다. [Accessibility] 항목을 클릭합니다.

6. [Accessibility]는 가능한 많은 사용자가 불편 없이 이용할 수 있도록 서비스를 제공하는지 평가하는데요. 평가 항목 중에 시각 장애인이 이미지에서 정보를 얻을 수 있도록 하거나, 이미지가 로드되지 않으면 대체 텍스트가 자리 표시자로 사용되어 사용자가 이미지가 전달하려는 내용을 알 수 있도록 alt 태그 삽입을 권장하는 항목이 있습니다.

그렇다면 alt 속성을 작성하지 않았을 때, 작성했을 때 점수 차이는 얼마나 날까요? 이미지에 대체 텍스트 삽입하고 다시 lighthouse 보고서의 결과를 보여드리겠습니다. 보시다시피 점수는 Accessibility와 SEO에서 각각 86/92의 수치입니다. 이는 대체 텍스트를 삽입하지 않은 것에 비해 각각 약 7%, 9%로 상승한 수치입니다.

	대체 텍스트 사용 안 함	대체 텍스트 사용
Performance	83	83
Accessibility	79	86
Best Practice	73	73
SEO	83	92

대체 텍스트가 없어도 이미지 출력에는 문제가 없지만 접근성 및 SEO 측면에서 높은 점수를 받을 수 있기 때문에 사람들이 alt 속성을 작성해야 된다고 말하는 것 같습니다.

이상으로 이미지에 대체 텍스트를 삽입하면 좋은 점이 있는지에 대해 살펴보았습니다.

즐거운 하루 보내세요. 감사합니다.