웹 이미지 접근성 가이드

이미지를 보지 못하거나 느린 환경에서도 내용을 이해할 수 있게 만드는 간단한 원칙입니다.

이미지가 전달하는 정보를 먼저 글로 정리합니다

이미지가 단순 장식인지, 수치·절차·비교 결과를 전달하는지 구분하세요. 핵심 정보가 이미지 안에만 있으면 화면을 읽어 주는 도구를 사용하는 사람이나 이미지 로딩이 실패한 사람은 내용을 알 수 없습니다. 중요한 결론과 수치는 본문에도 텍스트로 함께 제공하는 것이 가장 안전합니다.

대체 텍스트는 이미지의 역할을 설명합니다

대체 텍스트는 파일 이름을 읽는 자리가 아닙니다. 예를 들어 그래프라면 그래프라는 말보다 추세와 핵심 수치를 간결하게 설명하는 편이 유용합니다. 링크 안의 이미지라면 사용자가 선택했을 때 어떤 행동으로 이어지는지도 알려야 합니다. 장식용 이미지는 불필요한 설명을 반복하지 않도록 처리합니다.

글자와 배경의 대비를 확인합니다

이미지 위에 얹은 흰색 문구는 밝은 사진에서 읽기 어려울 수 있습니다. 반투명 배경, 그림자, 충분한 여백을 활용하고 다양한 화면 밝기에서 확인하세요. 색만으로 상태를 구분하지 말고 아이콘이나 텍스트를 함께 사용하면 색각 차이가 있는 사용자도 이해하기 쉽습니다.

이미지 안의 작은 글자를 줄입니다

모바일 화면에서 작은 글자는 확대하지 않으면 읽기 어렵습니다. 긴 안내문이나 표는 가능한 한 HTML 텍스트로 제공하고, 이미지에는 핵심만 담으세요. 캡처 이미지가 꼭 필요하다면 필요한 구역만 잘라 충분한 크기로 표시합니다.

FAQ

대체 텍스트를 길게 써야 하나요?

이미지의 목적과 핵심 정보를 빠뜨리지 않는 범위에서 간결하게 씁니다. 복잡한 표나 그래프는 짧은 대체 텍스트와 함께 본문에 자세한 설명을 추가하세요.