접근성과 SEO를 위한 효과적인 대체 텍스트 작성의 궁극 가이드

이미지가 보여주는 내용과 사람들이 왜 중요한지 설명하는 간결하고 설명적인 문장으로 alt 텍스트를 작성하세요. 각 이미지에 대해 명확한 설명은 화면 판독기 사용자에게 맥락을 전달하는 데 도움을 주는 보조 기술을 돕습니다.

Alt 텍스트는 검색 가시성을 지원합니다. 이는 검색 엔진이 사이트의 콘텐츠를 이해하고 주변 설명과 연결된 이미지를 인덱싱할 수 있게 합니다. 잘 작성된 설명은 수천 개의 검색을 가능하게 하고 사용자들을 올바른 제품이나 기능과 연결할 수 있습니다. 좋은 alt 텍스트는 접근성을 기여하고 사용자 경험을 강화하며 검색 신호가 페이지 맥락과 일치하도록 돕습니다. 언어를 간단하게 유지하고, 혼란을 피하며, 페이지 맥락 내에서 이미지가 스스로를 설명하도록 하세요.

지침: 각 이미지에 대해 주제, 행동, 맥락을 언급하는 구체적인 설명을 작성하세요. 제품의 경우 제품 이름, 색상, 주요 기능을 명명하세요. 일반적인 레이블 대신 정확한 용어를 사용하고, 사이트의 콘텐츠 전략과 일관성을 유지하기 위해 문서를 확인하세요. 가장 효과적인 alt 텍스트는 주변 텍스트에 이미 명시된 것을 반복하는 대신 페이지를 풍부하게 합니다.

야생 동물 이미지 예시: 급수기 근처 가지에 앉아 있는 총앙새. Alt 텍스트는 다음과 같이 될 수 있습니다: "정원에서 새 급수기 근처 가지에 앉아 있는 두 마리 총앙새." 이는 장면을 명확하게 전달하고 사용자가 이미지를 보지 않고도 이해할 수 있게 돕습니다. 일부 이미지는 작은 기능만 보여줄 수 있습니다; 맥락에서 그 기능을 설명하세요. 예: "사이트 헤더에 가지에 앉아 있는 총앙새 아이콘."

마지막으로, 빠른 검토를 실행하세요: 초안을 작성한 후, 정확성과 문서와의 일치성을 확인하기 위해 팀원에게 alt 텍스트를 승인받고 사이트에 게시하세요.

접근성과 SEO를 위한 Alt 텍스트 작성의 궁극적인 가이드; alt 텍스트를 사용할 때

화면 판독기를 위해 페이지에서 이미지의 올바른 역할을 전달하는 이미지가 전달하는 것을 설명하는 간결하고 유익한 alt 텍스트로 시작하세요. 이 접근 방식은 작은 아이콘부터 복잡한 다이어그램까지 모든 것에 작동하며, 이미지를 볼 수 없을 때 사용자가 주변 콘텐츠를 이해할 수 있게 돕습니다.

설명할 내용에 대해, 콘텐츠와 기능에 중점을 두세요. 이미지가 장식적이고 의미를 추가하지 않으면 alt 텍스트를 생략하거나 빈 alt 속성을 설정하여 화면 흐름을 방해하지 않도록 하세요.

정보를 전달하는 이미지에 alt 텍스트를 사용하세요: 차트, 다이어그램, 사진, 로고 또는 메시지에 기여하는 모든 시각 자료. Excel 차트에서 추세를 보여주는 다이어그램의 경우 축과 추세 선을 설명하세요; 사막 장면이나 새 사진이 초점이라면 주제와 설정을 언급하세요. 색상이 의미를 전달할 때 이를 언급하세요 (예: 흰색 배경에 굵은 선). 이미지에 총앙새와 같은 야생 동물이 나타나면 동물과 그 행동을 설명하세요. 선을 간단하게 유지하고 모든 픽셀을 설명하지 마세요. 큰 다이어그램의 경우 짧은 설명을 제공하고 아래에 긴 노트나 가이드를 링크하세요.

두 가지 실용적인 예시가 이 기술을 설명하는 데 도움이 됩니다: "사막 풍경 위에 흰색 테두리가 있는 창에 앉아 있는 새"와 "Excel에서 가져온 차트가 Q2 매출이 14% 상승을 보여줍니다." 이미지가 텍스트를 포함하는 경우, 정확한 단어를 따옴표로 포함하세요 (말하는 텍스트 주위에 따옴표를 사용하여 의도를 명확히 하세요). 장식적인 아이콘이나 버튼의 경우 "검색 아이콘"이나 "워드 문서 아이콘"과 같은 짧은 레이블을 사용하여 탐색을 원활하게 유지하세요.

창작자를 위한 노트: 다양한 시각 자료로 연습하고 일관된 스타일을 유지하세요. 이 가이드는 유익한 설명을 지원하고 화면 판독기에 의존하는 시청자를 돕고 프로젝트에 대한 명확한 기준을 제공합니다–웹사이트, 블로그 또는 제품 페이지에서 작업하든 상관없이. 실제 예시를 사용하고, 동료와 검토하며, 변경 사항을 추적하고 자산 전반에 안정적인 기능을 반영하기 위해 간단한 엑셀 시트를 만드세요.

HTML에서 alt 텍스트는 img 요소의 alt 속성에 나타납니다. 자동 alt 텍스트가 도움이 될 수 있지만, 맥락이 중요하므로 정확성을 검토해야 합니다. 이미지가 장식적인 경우 alt 텍스트를 생략하여 보조 기술이 의미 있는 콘텐츠에 집중할 수 있게 하세요. 복잡한 시각 자료, 차트 또는 다이어그램을 다루기 위해 필요할 때 alt 텍스트를 링크된 페이지의 긴 설명과 쌍으로 하세요.

Alt 텍스트 추가 시기: 범위, 트리거 및 실용적인 지침

의미가 있는 모든 이미지에 게시 시간이나 콘텐츠 새로 고침 중에 간결한 alt 텍스트를 추가하세요; 이는 보조 기술에 의존하는 사용자에게 도움이 되고 사이트의 SEO를 개선하며 기사 내 이미지의 역할을 설명합니다.

범위: 정보를 전달하는 이미지는 객체, 다이어그램, 아이콘, 차트를 포함합니다; 헤더나 테두리에 있는 앉아 있는 요소, 예를 들어 주황색 배지 같은 것은 기사에 추가하는 역할과 무엇을 더하는지를 설명하는 alt 텍스트를 가져야 합니다. 일부 이미지는 텍스트와 쌍으로 할 때만 의미를 보이므로, 어떤 것이 alt 텍스트를 필요로 하고 어떤 것이 덜 설명적일 수 있는지 알아야 합니다.

트리거: 새 이미지를 작성하거나 미디어를 교체하거나 사이트 전반에 자산을 재사용할 때 alt 텍스트를 추가하거나 업데이트하세요; 다이어그램과 차트의 경우 특히 보여지는 것과 일치하는지 확인하고, 주변 콘텐츠 흐름과 일치하도록 하세요.

실용적인 지침: alt 텍스트를 간결하게 유지하세요; 기본 객체의 경우 1-2개의 짧은 구문으로 기능이나 목적을 설명하세요; 다이어그램의 경우 기능과 주요 흐름을 설명하세요; 차트의 경우 추세나 주요 값을 요약하세요; 가시적 텍스트를 포함하는 이미지의 경우 alt 설명에 그 텍스트를 표시하세요; 일반적인 설명이 충분하지 않은 경우가 있습니다–그곳에서 의미를 포착하는 구체적인 alt를 제공하세요; 장식적인 이미지나 불분명한 시각 자료의 경우 빈 alt나 정보 역할이 반영된 간단한 노트를 사용하세요.

검토와 협업: 창작자는 편집자와 디자이너와 확인하고, 실제 사용자와 alt 텍스트를 테스트하며, 장치 전반에 의미가 보존되는지 확인하세요. 기사에 대한 커버리지를 확인하고 접근성이 강력하게 유지되도록 기본 체크리스트를 사용하세요.

Alt 텍스트 정의: 설명할 내용과 제외할 내용

이미지의 목적을 전달하는 한 문장의 간결한 문장으로 이미지를 설명한 후, 주요 주제와 맥락을 다루는 유익한 설명을 추가하세요. 누가 또는 무엇이 나타나는지, 행동, 설정을 포함하여 사용자가 보여지는 모든 것을 이해할 수 있게 하세요.

• 설명할 내용
  • 주제와 행동: 사람, 동물 (예: 가지에 앉아 있는 총앙새), 또는 브랜드, 제품, 도구와 같은 객체를 식별하세요.
  • 이미지 내 텍스트: 숫자나 날짜를 포함하여 나타나는 대로 인용문이나 짧은 구문을 정확히 전사하세요.
  • 맥락과 목적: 이 항목에서 이미지가 왜 존재하는지와 주변 콘텐츠에 대해 무엇을 전달하는지 설명하세요.
  • 브랜드와 스타일링: 의미를 명확히 하는 경우 브랜드를 명명하고 시각 스타일이나 아이콘을 언급하세요.
  • 그래픽 콘텐츠: 그래프나 차트의 경우 추세, 레이블, 축, 주요 데이터 포인트를 요약하세요.
  • 제품과 제안: 제품, 모델, 색상, 가시적인 제안이나 할인을 설명하세요.
  • 색상, 레이아웃, 구성: 이해에 영향을 미치는 주요 색상을 언급하고, 가시적인 레이아웃 단서를 포함하세요.
  • 위치와 타이밍: 관련이 있는 경우 장면이 발생하는 장소와 시간을 포함하세요.
  • 길이와 톤: 유익하고 중립적으로 유지하며, 사용자 기대에 맞는 언어를 선택하세요.
  • 흐름과 가독성: 화면 판독기가 자연스럽게 따를 수 있도록 설명을 구조화하고, 분리된 구문을 피하세요.
• 제외할 내용
  • 장식 전용 이미지: 이미지가 유익한 콘텐츠를 제공하지 않으면 빈 alt 속성 (빈) 을 사용하거나 장식으로 표시하세요.
  • 불필요한 세부 사항: 이해를 돕지 않는 화려하거나 중복된 언어를 건너뛰세요.
  • 비유익한 시각 자료: 해석을 변경하지 않는 한 배경 소음이나 관련 없는 분위기를 설명하지 마세요.
  • 无关 맥락: 이미지에 보이지 않는 주변 주제를 제외하세요.
  • 중복 설명: 주변 텍스트에 이미 전달된 정보를 재진술하지 마세요.
• 실용적인 지침
  • 지침: WCAG 친화적인 관행을 따르고 접근성 및 SEO 목표에 대해 검토하세요.
  • 길이: 표준 이미지에 대해 125–160자 정도를 목표로 하세요; 복잡한 다이어그램이나 흐름이 많은 장면에 긴 설명이 필요할 수 있습니다.
  • 용어 선택: 브랜드 목소리와 소비자 기대에 맞는 언어를 선택하고, 가시적인 경우 제품 이름과 제안을 포함하세요.
  • 일관성: 항목 전반에 안정적인 스타일을 유지하고, 적절한 곳에 브랜드, 제품, 색상과 같은 관련 세부 사항을 태그하세요.
  • 검토: 불필요한 것을 추가하지 않고 모든 필수 요소를 설명하는지 빠른 검토로 alt 텍스트를 테스트하세요.
• 예시와 접근 방식
  • 항목 예시: "황혼에 소나무 가지에 앉아 있는 총앙새; 주변에 부드러운 푸른 하늘과 소나무 바늘; 급수기에 보이는 브랜드 스티커."
  • 그래프 예시: "Q3까지 월별 매출을 보여주는 선 그래프, 축은 수익 (USD)와 월로 라벨링됨, 제품 카테고리별 색상 코딩."
  • 인용 예시: "이미지가 빨간 배지와 함께 '제한된 시간 제안' 인용을 보여줌; 사용자 행동을 안내하는 경우 정확한 단어를 포함하세요.
  • 설명적 접근: 시각 사용자에게 눈에 띄는 모든 것을 설명한 후, 주변 가이드나 검토 노트와 확인하세요.
• 실행 가능하게 유지
  • 항목과 설명 일치: 각 이미지 항목은 보이는 콘텐츠와 목적에 맞는 설명적인 alt 텍스트를 가져야 합니다.
  • 흐름과 간결함: 혼란을 피하고 설명을 유익하게 유지하면서 부드럽게 읽히는 문장을 작성하세요.
  • 장문 경우: 복잡한 시각 자료의 경우 관계와 결과를 설명하는 긴 설명을 제공한 후, 간결한 alt 문장으로 요약하세요.
• 빠른 체크리스트
  • 이미지의 목적을 설명하나요? 예/아니오
  • 모든 필수 요소(인용이나 제안을 포함)가 설명되었나요? 예/아니오
  • 장식 콘텐츠가 빈으로 표시되었나요? 예/아니오
  • 톤이 중립적이고 유익한가요? 예/아니오

화면 판독기를 위한 시각 콘텐츠 설명: 구체적인 구문 패턴

객체와 그 행동으로 시작한 후, 간결한 선으로 맥락을 추가하세요. 이는 독자가 장면을 한눈에 이해할 수 있게 하고, 그래프나 차트처럼 복잡한 콘텐츠일 때도 읽기 리듬을 안정적으로 유지합니다.

콘텐츠 유형에 따라 패턴을 선택하세요: 차트와 그래프, 이미지, 컨트롤, 데이터 테이블, 장식 요소. 차트의 경우 지표, 기간, 추세를 명명하세요; 이미지의 경우 주제와 배경이나 세부 사항을 식별하세요; UI 컨트롤의 경우 레이블과 행동을 명시하세요. 의미를 모호하게 하는 긴 단락이 아닌, 독자가 스캔할 수 있는 구문을 사용하세요.

SharePoint와 브랜드 자산 내에서 작은 구체적인 패턴 세트를 재사용하여 일관성을 유지하세요. 접근성 콘텐츠의 주목할 만한 옹호자 Andrée는 이러한 구문이 짧고 정확한 캡션과 쌍으로 빠른 읽기와 쉬운 검색을 지원하는 방법을 보여줍니다. 캡션을 독자 친화적으로 유지하고, 검토 과정에서 alt 텍스트를 다듬을 때 명확성을 위해 편집하세요.

패턴	예시	노트
그래프/차트: 객체 + 지표 + 기간 + 추세	그래프는 Q2 기간 동안 1,000에서 1,500 단위로 Q2 매출이 상승하는 것을 보여줍니다	차트, 지표, 필요 시 수천 단위 범위를 명명하세요; 필러를 피하세요.
이미지/일러스트: 주제 + 배경 + 세부 사항	제품 사진은 포장 세부 사항과 함께 흰색 배경에 브랜드를 보여줍니다	주제와 맥락에 중점을 두세요; 배경은 배치를 명확히 합니다; 주요 세부 사항만 언급하세요.
UI 컨트롤: 레이블 + 행동	"편집"을 클릭하여 항목 필드를 열기	실제 레이블을 사용하세요; 대상 필드를 강조하세요; 실행 가능하게 유지하세요.
데이터 테이블: 필드 + 값 + 기간	테이블은 필드: 매출, 지역, 기간을 나열합니다; 값은 수천 단위 총계를 보여줍니다	표 형식 데이터를 선형 문장으로 번역하세요; 관련 시 기간을 포함하세요.
장식/스페이서: 장식 요소 + alt 상태	장식 스페이서 선: alt 텍스트는 빈	요소가 콘텐츠가 아닌 레이아웃을 추가할 때 빈을 사용하세요; 의미를 전달하지 않는 시각 자료를 설명하지 마세요.
서사 캡션: 사례 + 읽기 + 검색	이 사례에서 독자는 읽기 중에 요약을 스캔하고 검색을 사용하여 주요 용어를 찾을 수 있습니다	개요에 대한 빠른 앵커를 제공하고 용어 기반 검색을 허용하세요.
사람: 이름 + 역할 + 행동	Andrée는 데이터 정확성을 확인하기 위해 차트를 검토합니다	독자를 지향하기 위해 적절한 이름과 역할을 사용하세요; 이름을 적절히 대문자로 하세요.

SEO 고려사항: 키워드 스터핑 없이 균형 맞추기

권장: 명확성에 먼저 중점을 두세요; 이미지를 정확히 반영하는 하나의 주요 키워드를 포함하고, 사용자 의미를 개선할 때만 지원 용어를 추가하세요. 이 가이드는 작가들이 alt 텍스트에서 SEO와 접근성을 균형 맞추기 위한 실용적인 지침을 제공합니다.

실제로, 각 alt 텍스트는 독자들이 예상하는 위치에서 작동하고 이해에 기여해야 하며, 공간을 채우지 않아야 합니다. 잘 작성된 alt 텍스트는 기사에서 이미지의 역할을 의미 있는 요약으로 전달함으로써 장애가 있는 사용자와 검색 엔진 모두를 돕습니다.

복잡한 다이어그램의 alt 텍스트는 더 길 수 있지만, 핵심 의미를 그대로 유지하고 필러를 피하세요.

• 주요 키워드 지침: 단일 관련 키워드를 결정하고 이미지 콘텐츠가 허용할 때 alt 텍스트 시작에 배치하세요.
• 자연스러운 언어: 사용자가 말할 수 있는 문장이나 간결한 구문으로 alt 텍스트를 작성하세요; 이 쓰기 스타일은 장애가 있는 사용자에게 가독성을 개선하고 검색 엔진이 맥락을 해석할 수 있게 돕습니다.
• 단어 제한: 125자 이하를 목표로 하세요; 이는 키워드 스터핑을 방지하고 텍스트를 가독성 있게 유지하면서 검색 의도를 지원합니다.
• 맥락 인식 선택: 섹션과 상황을 고려하세요; 다이어그램의 경우 데이터나 흐름을 설명하세요; 사진의 경우 주제와 행동을 식별하세요; 아이콘의 경우 행동이나 의미를 설명하세요.
• 링크와 클릭 함의: 이미지가 링크인 경우, 목적지와 클릭 시 발생하는 것을 설명하여 사용자가 진행 여부를 결정할 수 있게 하세요.
• 장식 이미지: 정보를 기여하지 않는 시각 자료에 빈 alt 속성 (alt="") 을 사용하세요; 이는 화면 판독기에게 무의미한 소음을 최소화합니다.
• 체크리스트 접근: 각 alt 텍스트를 워크플로의 체크박스 기반 프로세스의 일부로 취급하세요; 이는 팀이 변경을 승인하고 추적하는 데 도움이 됩니다.
• 테스트와 피드백: 화면 판독기로 테스트하고, 개발자와 사용자에게 입력을 수집하며, 이해를 개선하는 변경을 승인하세요.
• 의도는 무엇인가: 항상 주변 콘텐츠에서 이미지의 의도를 묻고, alt 텍스트가 중복 없이 그 목표를 반영하도록 하세요.
• 단어 선택과 공백: 필러 대신 정확한 용어를 선호하세요; 스캐닝을 돕기 위해 텍스트 주위에 충분한 공백을 사용하고 차분한 리듬을 유지하세요.

작가를 돕기 위해, 간결한 참조: alt 텍스트를 콘텐츠 맥락과 맞추고, 이 가이드를 사용하여 기사의 접근성과 SEO 균형을 개선하세요.

체크리스트를 보려면 여기를 클릭하세요.

요약: 이 접근 방식은 기사 가독성을 개선하고, 장애가 있는 사용자를 지원하며, alt 텍스트와 페이지 관련성을 보존하고 성능을 희생하지 않습니다.

다양한 이미지 유형에 대한 Alt 텍스트: 사진, 다이어그램, 로고, 인포그래픽

페이지에서 누가 또는 무엇이 프레임에 있는지와 왜 중요한지를 설명하는 주제 중심의 간결한 alt 텍스트로 사진을 라벨링하세요. 보조 기술 사용자에게 작성하고, 독자가 이미지의 목적을 알 수 있도록 인근 복사본과 설명을 맞추세요.

사진: 주요 주제로 시작한 후 설정과 행동 같은 맥락을 추가하세요. 길이를 타이트하게 유지하고 90–120자를 목표로 하세요. 소음 발생기나 다른 오디오 신호가 나타나면 괄호에 표시하세요. 이미지가 연설을 포함하는 경우 짧은 인용 스니펫을 포함하고 따옴표로 감싸세요. 예: "학생들이 듣는 동안 선생님이 화이트보드에 씁니다." 이 접근 방식은 사용자에게 전체 순간을 알리고 검색과 탐색을 지원합니다. 장면을 명확히 설명하는 것은 페이지 전반에 레이블 일관성을 돕습니다.

다이어그램: 모든 레이블이 아닌 다이어그램의 목적과 정보 흐름을 설명하세요. 목표, 주요 단계, 연결 방식을 명시하세요. 축이나 카테고리가 나타나면 간단히 언급하세요 (예: "x-축: 시간; y-축: 수익"). 이미지의 긴 텍스트를 중복하지 마세요. 예: "입력에서 출력으로의 프로세스 흐름, 네 단계: 입력, 분석, 결정, 행동." 다이어그램의 경우 관계와 결과에 초점을 맞추세요.

로고: 브랜드를 식별하고, 의미가 있는 경우 로고의 상징성을 언급하세요. "BrandName 로고" 또는 "BrandName 워드마크"를 선호하세요. 로고가 장식적인 경우 alt 속성을 비워두고 창이 사용자에게 장식을 발표하게 하세요. 사용자가 예상할 수 있고 검색 결과에서 브랜드를 표면화할 수 있도록 페이지 전반에 일관된 패턴을 사용하세요.

인포그래픽: 주요 발견의 간결한 요약을 제공하고, 주요 숫자를 평이한 언어로 명시하세요. 그래픽의 긴 텍스트를 중복하지 말고; 필요한 수치를 alt 텍스트로 끌어오세요. 인용이 영향을 전달하는 경우 따옴표로 포함하세요. 예: "채택률 42% 증가." UI 창에서 체크박스가 짧은 alt 텍스트와 긴 버전을 토글할 수 있으므로, 다양한 요구의 사용자와 마음이 필요로 하는 것을 모두 얻습니다. 다양한 상황에서 이 접근 방식은 독자 관심을 높게 유지하고 모든 사용자에게 접근성을 보장합니다; 빠른 alt 텍스트는 필수 숫자와 간단한 요점을 포함합니다.