단체 홈페이지에서 정보를 더하지 않는 꾸밈용 이미지는 빈 대체 텍스트를 넣어 화면 낭독기가 건너뛰게 하라는 것이 W3C 이미지 안내의 권장입니다. 대체 텍스트 속성을 아예 빼면 파일 이름이 읽힐 수 있습니다. 활동 사진과 아이콘을 구분하는 순서를 정리했습니다.
단체 홈페이지에서 정보를 더하지 않는 꾸밈용 이미지는 빈 대체 텍스트를 넣어 화면 낭독기가 건너뛰게 하라는 것이 W3C 이미지 안내의 권장입니다. 모든 이미지에 설명을 길게 붙이는 것이 친절해 보일 수 있지만, 페이지 장식이나 바로 옆 글과 같은 내용을 담은 이미지까지 설명을 읽어 주면 화면 낭독기 사용자는 필요 없는 말을 계속 들어야 합니다.
꾸밈용 이미지는 빈 대체 텍스트로 둡니다
W3C 웹 접근성 이니셔티브(WAI)의 장식 이미지 안내는 장식 이미지를 페이지 내용에 정보를 더하지 않는 이미지로 설명합니다. 이미지가 주는 정보가 이미 옆 글에 있거나, 홈페이지를 보기 좋게 하려고 넣은 경우입니다. 이때는 비어 있는 대체 텍스트(alt="")를 넣어 화면 낭독기 같은 보조기술이 이미지를 무시하게 하라고 안내합니다.
같은 안내는 이런 이미지에 글을 적으면 화면 낭독기의 출력에 소리 잡음을 더하거나, 옆 글과 주제가 다를 때 사용자의 주의를 흩뜨릴 수 있다고 설명합니다. 그렇다고 alt 속성 자체를 빼는 것도 답이 아닙니다. 속성이 없으면 일부 화면 낭독기가 이미지 파일 이름을 대신 읽기 때문입니다.
안내가 장식 이미지일 수 있다고 드는 경우는 다음과 같습니다.
- 테두리, 여백, 모서리처럼 화면을 꾸미는 요소
- 링크 글자를 돋보이게 하거나 누르는 영역을 넓히려고 함께 넣은 이미지
- 옆 글을 꾸며 줄 뿐 정보를 더하지 않는 분위기용 이미지
- 주변 글이 이미 무엇인지 밝히고 설명하는 이미지
가능하면 장식 이미지는 CSS 배경 이미지로 넣는 편이 좋다는 안내도 있습니다. 또한 어떤 이미지를 장식으로 볼지 정보로 볼지는 그 이미지를 페이지에 넣은 이유에 따라 작성자만 판단할 수 있다고 강조합니다.
AI로 생성한 개념 이미지. 실제 단체 활동 사진이 아닙니다.
헷갈릴 때는 질문 순서대로 따라갑니다
W3C의 대체 텍스트 결정 트리는 이미지마다 다음 질문을 차례로 던지라고 안내합니다.
- 이미지에 글자가 들어 있나요? 같은 글이 근처에 실제 글자로 있거나 시각 효과용이면 빈 대체 텍스트를, 아이콘처럼 특정 기능이 있으면 그 기능을, 다른 곳에 없는 글이면 그 글을 대체 텍스트로 넣습니다.
- 링크나 버튼 안에 있고 이미지가 없으면 무엇을 하는지 알기 어렵나요? 그렇다면 이동할 곳이나 실행되는 동작을 대체 텍스트로 알립니다.
- 이미지가 현재 페이지에 의미를 더하나요? 단순한 그림이나 사진이면 그 의미를 전하는 짧은 설명을 넣고, 그래프처럼 복잡한 정보라면 그 내용을 페이지의 다른 곳에도 담습니다. 근처 글과 같은 내용이면 빈 대체 텍스트를 씁니다.
- 순전히 장식이거나 사용자를 위한 것이 아닌가요? 그렇다면 빈 대체 텍스트를 넣습니다.
AI로 생성한 개념 이미지. 실제 단체 활동 사진이 아닙니다.
단체 홈페이지에 대입해 봅니다
다음은 W3C 안내를 단체 홈페이지에 적용한 나누지오의 운영 권장입니다.
- 첫 화면 위쪽의 꾸밈 배경, 소제목 사이 구분선 그림, 모서리 무늬는 빈 대체 텍스트로 두거나 CSS 배경으로 옮깁니다.
- '후원하기' 글자와 함께 링크 안에 들어 있는 하트 그림처럼 글자를 돋보이게 하는 아이콘은 빈 대체 텍스트로 둡니다. 글자 없이 아이콘만 있는 버튼이라면 그 버튼이 하는 일을 대체 텍스트로 적습니다.
- 활동 소식 본문의 사진이 글에 없는 장면을 보여 준다면 그 장면이 전하는 의미를 짧게 적습니다. 바로 아래 설명 글이 사진을 이미 충분히 설명한다면 빈 대체 텍스트도 선택할 수 있습니다.
- 홈페이지 관리 화면에서 대체 텍스트 칸을 비워 두었을 때 실제 페이지에
alt=""가 들어가는지, 아니면 속성 자체가 빠지는지 제작자에게 확인합니다.
이 글은 청주·충북 지역 단체를 포함한 일반적인 홈페이지 운영 방법을 W3C 안내에 따라 정리한 것이며 특정 단체 홈페이지를 진단한 결과가 아닙니다.