작성 이유

웹 접근성을 처음 접한 것은 프론트 엔드 개발을 시작하면서였다. 그러다보니 항상 개발자의 입장에서 웹 접근성을 고려해왔다. 하지만 사용자의 입장에서도 웹 접근성에 대해 고려해야할 점이 있다고는 생각하지 못했었다.
Instagram 게시 시, 대체 텍스트가 그 예이다. 지금까지 Instagram을 자주 사용했지만 사진에 대체 텍스트를 넣은 적은 없었다.
Imgar 프로젝트를 하면서 대체 텍스트에 대해 여러 가지 고민을 할 기회가 있었고, 그 과정에서 Instagram의 사진에 대체 텍스트를 넣을 수 있다는 사실을 알게 되어 정리해둔다.

Instagram 대체 텍스트

인스타그램에서 대체 텍스트는 아래와 같은 상황에서 필요하다.
1. 네트워크 오류로 사진을 불러올 수 없을 때 동일한 정보를 주기 위해
2. 스크린 리더 사용자에게 동일한 정보를 주기 위해

Instagram 자동 대체 텍스트

Instagram에서는 게시글 등록 시 자동으로 대체 텍스트를 생성해 제공한다.
하지만 이는 정확하지 않을 수 있다.
가장 좋은 방법은 사진을 게시하는 사용자가 사진에 대한 자세한 설명을 제공하는 것이다.

이미지를 업로드 또는 게시한 사람이 대체 텍스트를 포함하지 않을 경우 Facebook의 자동 대체 텍스트(AAT) 기술을 통해 컴퓨터 비전과 인공 지능이 사용되어 이미지에 대한 설명이 자동으로 생성됩니다. 자동 대체 텍스트는 완전하지 않을 수도 있습니다. 하지만 직접 업로드 또는 게시하는 이미지에 대한 대체 텍스트를 수정할 수 있습니다.
출처 - Facebook에서 자동 대체 텍스트는 어떻게 작동하나요?

Instagram에 적용된 대체 텍스트 확인

Instagram 웹 버전에서 확인해보면, img 요소의 alt속성에 대체 텍스트가 들어가 있는 것을 확인할 수 있다.

게시글 등록 시 대체 텍스트 추가

게시글 등록 시, 고급 설정 > 대체 텍스트 입력 > 사진에 대한 자세한 설명 추가

이미 등록된 게시글에 대체 텍스트 추가

게시글 수정 시, 수정 > 사진 우측 아래 대체 텍스트 수정 > 사진에 대한 자세한 설명 추가