대체 텍스트 도우미이란?
이미지 유형을 선택하고, 유형별 안내에 따라 대체 텍스트를 작성한 뒤, 접근성 체크리스트로 확인하세요. 스크린 리더에 적합한 설명을 위한 팁과 예시가 포함되어 있습니다.
사진, 아이콘, 차트, 장식용, 정보 전달, 이미지 링크 등 여섯 가지 이미지 유형 중 하나를 고르면, 입력란이 해당 유형에 맞는 안내문으로 바뀌어 스크린리더 사용자가 실제로 필요로 하는 정보로 이끌어 줍니다. 글자 수 카운터가 125자를 넘으면 경고하고, 여섯 가지 항목 체크리스트가 설명이 구체적인지, 간결한지, 맥락을 고려했는지, 'image of' 같은 군더더기를 피했는지, 가장 중요한 정보를 앞에 두었는지, 쉼표 나열이나 키워드 반복으로 채워지지 않았는지 확인해 줍니다. 장식 이미지에는 alt="" 사용 안내가 떠 보조 기술이 자연스럽게 건너뛰게 합니다.
사용 방법
- 설명할 이미지 유형을 선택하세요: 사진, 아이콘, 차트, 장식용, 정보성 또는 이미지 링크.
- 이미지 유형에 맞는 안내를 참고하여 간결한 설명을 작성하세요.
- 접근성 체크리스트를 기준으로 대체 텍스트를 검토한 다음 HTML이나 CMS에 사용할 수 있도록 복사하세요.
사용 시기
- Shopify 나 WordPress 상품 갤러리를 공개하기 전 alt 속성 채우기.
- 분기 보고서 차트에 alt 를 적어 스크린리더 사용자도 숫자에 접근하게 하기.
- 접근성 점검 전 WCAG 1.1.1 기준으로 기존 사이트 감사하기.
결과
Q1 매출을 보여주는 막대 차트의 경우: "chart.png" 대신 "Q1 2024 지역별 매출 막대 차트: 북미 210만 달러, 유럽 180만 달러, 아시아 140만 달러"라고 작성하세요.
자주 묻는 질문
- alt 텍스트가 가장 중요한 접근성 속성으로 꼽히는 이유는?
- WCAG 첫 번째 조항(1.1.1 비텍스트 콘텐츠, Level A) 의 핵심이며, 시각장애가 있는 스크린리더 사용자가 모든 페이지에서 가장 먼저 마주치는 유일한 필수 항목입니다. 빠지면 접근성뿐 아니라 검색엔진과 링크 미리보기 크롤러도 캡션으로 활용하지 못합니다.
- alt 텍스트는 얼마나 짧아야 하나요? 125자는 절대적인 한계인가요?
- 기술적으로는 한계가 아닙니다. 브라우저와 스크린리더는 더 긴 문자열도 잘 다룹니다. 125자라는 기준은 옛 JAWS 가 긴 글을 어색하게 잘라내던 시절에서 비롯됐고 지금은 개선됐지만, 짧은 설명이 듣기에 덜 피곤한 건 여전합니다.
- 구분선, 장식 패턴 같은 순수 장식 이미지는 어떻게 처리해야 하나요?
- alt=""(빈 문자열)를 쓰세요. 속성을 아예 빼면 안 됩니다. 빈 alt 는 스크린리더에게 이미지를 건너뛰라는 신호입니다. alt 를 통째로 생략하면 일부 스크린리더가 파일 이름을 읽어 더 나쁜 경험이 됩니다.
- 복잡한 차트를 125자 안에 어떻게 설명하나요?
- 데이터 하나하나가 아니라 차트 유형과 핵심 결론을 먼저 적습니다. '꺾은선그래프, 2024년 3분기에 모바일이 데스크톱을 추월' 이 월별 수치 나열보다 효과적입니다. 상세 데이터는 같은 페이지의 별도 긴 설명에 두세요.
- '사진:', '이미지:' 같은 표현을 맨 앞에 붙이는 게 좋을까요?
- 붙이지 않습니다. 스크린리더가 이미 '이미지' 라고 안내하기 때문에 '이미지: 고양이' 는 '이미지, 이미지: 고양이' 가 됩니다. '회색 고양이가 파란 소파 위에 있다' 처럼 주체부터 시작하세요. 본 도구의 체크리스트도 이 패턴을 자동으로 잡아 줍니다.