접근성 및 SEO를 위해 이미지에 대한 대체 텍스트를 만드는 방법

어떤 종류의 디지털 콘텐츠를 만들거나 게시하는 경우 장애가 있는 사람들이 액세스할 수 있는 콘텐츠를 만드는 것의 중요성에 대해 적어도 어느 정도는 들었을 것입니다. 대체 텍스트("대체 텍스트"라고도 함)는 맹인 또는 시각 장애가 있는 사람 또는 기타 신체 또는 인지 장애가 있는 사람들이 이미지, 차트 및 그래프와 같은 시각적 콘텐츠에 액세스하고 이해할 수 있도록 도와줍니다.

미국에서는 ADA(American With Disabilities Act)에 따라 장애가 있는 사람들이 모든 디지털 콘텐츠에 액세스할 수 있어야 합니다. 다른 국가에는 자체 요구 사항이 있습니다. 화면 판독기 또는 기타 보조 기술을 사용하여 디지털 콘텐츠에 액세스하는 사람들의 경우, 도움이 필요하지 않은 사람과 동일한 방식으로 콘텐츠에 액세스하고 이해할 수 있도록 하려면 액세스 가능한 콘텐츠가 필수적입니다.

대체 텍스트란 무엇입니까?

가장 단순한 형태의 대체 텍스트는 화면 판독기 또는 기타 보조 기술이 이미지를 볼 수 없거나 이미지를 처리할 수 없는 사람들에게 이미지의 내용과 의미를 설명할 수 있도록 하는 디지털 이미지에 추가된 배경 코드입니다. 인지 장애.

여러 가지 방법으로 사용됩니다.

• 화면 판독기 및 기타 보조 기술은 사용자가 콘텐츠에 액세스하고 이해할 수 있도록 사용자에게 이미지를 설명하는 데 사용합니다.
• 이미지가 차단된 브라우저에서는 이미지 대신 대체 텍스트가 표시됩니다.
• 검색 엔진은 이를 사용하여 이미지의 내용과 컨텍스트를 결정합니다.

스크린 리더는 이미지가 있는 시점을 알 수 있지만 내용을 분석할 수는 없습니다. 사용자가 이미지의 의미와 컨텍스트를 이해할 수 있도록 이미지 대신 대체 텍스트를 읽습니다.

이미지에 대체 텍스트를 추가하는 방법

불행히도 대체 텍스트를 추가하는 방법은 없습니다. 다른 소프트웨어 플랫폼은 다른 방식으로 이를 수행합니다. 해당 플랫폼 내에서 이미지에 대체 텍스트를 추가하는 방법에 대한 정보는 소프트웨어 설명서 또는 도움말 파일을 확인하십시오.

예를 들어 Microsoft Word에서 이미지를 마우스 오른쪽 버튼으로 클릭하고 대체 텍스트 추가를 선택합니다. 그런 다음 열리는 사이드바의 대체 텍스트 창에 텍스트를 추가합니다. 작업이 끝나면 사이드바를 닫기만 하면 대체 텍스트가 이미지와 함께 저장됩니다.

대체 텍스트 대 캡션

대체 텍스트와 캡션은 여러 면에서 유사합니다. 둘 다 이미지에 대한 설명과 이미지가 콘텐츠의 나머지 부분과 잘 어울리는지에 대한 컨텍스트를 제공합니다. 그러나 대체 텍스트는 일반적으로 "비하인드"인 반면 캡션은 페이지에 액세스하는 모든 사람에게 표시됩니다. 또한 캡션은 일반적으로 가시적 이미지를 향상시키거나 컨텍스트를 제공하는 데 사용되기 때문에 이미지와 그 내용에 대한 전체 설명을 항상 포함하지 않을 수 있습니다.

그러나 캡션은 접근성을 위해 더 유용할 수 있습니다. 캡션은 정확하게 설명하기 위해 많은 대체 텍스트가 필요할 수 있는 이미지에 특히 유용합니다. 길고 덜 유용한 대체 텍스트를 만드는 대신 캡션을 사용하여 더 긴 설명을 만들 수 있습니다. 그런 다음 대체 텍스트는 이미지에 대한 간략한 설명을 제공하고 사용자가 캡션에서 보다 완전한 설명 및/또는 컨텍스트를 보도록 제안할 수 있습니다.

대체 텍스트 모범 사례

좋은 대체 텍스트를 만드는 것은 과학이 아니라 예술에 가깝습니다. 너무 짧고 세부 정보가 충분하지 않을 수 있습니다. 너무 길고 지루할 수 있습니다. 그러나 대체 텍스트를 만들 때 염두에 두어야 할 몇 가지 사항이 있습니다.

1. 이미지의 내용과 기능을 정확하게 설명

보조 기술을 사용하는 사람들은 이미지에 포함된 내용뿐 아니라 쉽게 사용할 수 없는 경우 이미지에 대한 컨텍스트를 제공하기 위해 대체 텍스트의 내용에 의존합니다. 이미지의 복잡성에 따라 너무 긴 대체 텍스트를 피하기 위해 콘텐츠 텍스트에 컨텍스트를 제공하는 것이 더 나을 수 있습니다.

2. 짧을수록 좋지만 너무 짧지는 않습니다.

대체 텍스트의 주요 관심사 중 하나는 길이입니다. 많은 화면 판독기*는 대체 텍스트를 모두 읽거나 전혀 읽지 않습니다. 다시 말해, 보조 기술을 사용하는 사람이 더 관련성 높은 콘텐츠를 찾기 위해 건너뛰거나 이해하지 못한 내용으로 일시 중지하고 되돌아갈 수 있는 방법이 없는 경우가 많습니다. 가장 관련성이 높은 콘텐츠가 대체 텍스트의 끝에 있는 경우 사용자는 이미지가 포함된 이유를 발견하기 전에 관련 없는 모든 정보를 들어야 합니다.

이미지를 정확하게 설명할 수 있을 만큼 충분한 세부 정보를 제공하되 이미지가 포함된 이유의 의미를 반드시 향상시키지 않는 미세한 세부 정보는 피하세요.

예를 들어 위의 이미지에는 주변 콘텐츠의 맥락에서 전달하려는 내용에 따라 여러 가지 방법으로 설명할 수 있습니다.

그냥 컴퓨터 화면으로 설명하고 싶을 것입니다. 그리고 어떤 경우에는 그것으로 충분할 수도 있습니다. 그러나 민감한 정보를 숨기기 위해 화면 흐림 효과를 사용하는 방법에 대한 기사에서 이미지를 개인 정보 보호를 위해 흐릿한 파일 트리가 있는 컴퓨터 화면으로 설명해야 할 수도 있습니다.

기사가 특정 유형의 코딩에 관한 것이고 이미지가 해당 코드의 예를 보여주려고 했다면 표시되는 코드에 대해 더 자세히 설명해야 할 수도 있습니다.

또는 기사가 컴퓨터 화면의 경사 너비에 관한 것일 수 있으므로 대신 이에 대한 세부 정보가 필요합니다.

그런 의미에서 좋은 대안 텍스트를 만드는 것은 과학이라기보다는 예술 형식에 가깝습니다. 대체 텍스트는 이미지를 정확하게 설명할 수 있을 만큼 충분히 길어야 하지만 너무 길면 안 됩니다.

3. 적절한 구두점과 맞춤법 사용

대부분의 스크린 리더*는 맞춤법 및 구두점 오류가 포함된 대체 텍스트를 표시되는 그대로 정확하게 읽습니다. Microsoft Word와 같은 프로그램에서는 대체 텍스트의 맞춤법이나 문법을 검사할 방법이 없으므로 각별히 주의해야 합니다.

마찬가지로 적절한 구두점을 사용해야 합니다. 그렇지 않으면 대체 텍스트가 정말 성가신 연속 문장처럼 들릴 수 있으며 더 나쁜 것은 전혀 이해가 되지 않을 수 있습니다.

사실, Word의 기본 제공 맞춤법 및 문법 검사기를 사용하여 대체 텍스트를 작성할 수 있는 새 문서를 만든 다음, 만족하고 실수가 없을 때 복사하여 alt에 붙여넣는 것은 나쁜 생각이 아닙니다. 사용 중인 소프트웨어의 텍스트 창.

대부분의 최신 브라우저는 자동으로 맞춤법을 검사하므로 콘텐츠 관리 시스템(CMS)이나 Google 문서도구에 글을 작성하는 경우 맞춤법과 문법이 검사될 가능성이 높지만 관계없이 교정하는 것이 좋습니다.

전문가 팁: 콘텐츠 검토자가 대체 텍스트가 이미지에 대한 올바른 설명인지, 적절한 철자와 문법을 사용하는지, 나머지 콘텐츠를 검토할 때 명확하고 간결한지 확인하세요.

4. 접근성에 대한 제목은 필요하지 않지만 다른 이유로 도움이 될 수 있습니다.

접근성 관점에서 이미지에 제목을 지정할 필요는 없습니다. 대부분의 스크린 리더는 신경 쓰지 않습니다. 그러나 귀하의 웹사이트를 탐색하는 사람이 이미지 위로 마우스를 가져가면 제목이 도구 설명으로 표시됩니다. 제목은 또한 검색 크롤러가 이미지의 내용과 목적을 더 잘 이해하는 데 도움이 될 수 있습니다.

즉, SEO 척도에서 추가 점수를 얻기 위해 이미지를 정확하게 설명하는 명확하고 간결한 대체 텍스트를 희생해서는 안 됩니다.

5. "~의 이미지", "~의 사진" 등을 포함하지 마세요.

스크린 리더가 이미지를 발견하면 사용자에게 이미지를 발견했음을 알려줍니다. 따라서 대체 텍스트에 "이미지"라는 문구가 포함된 경우 화면 판독기는 "이미지. 컴퓨터 화면 이미지 …”

6. 이미지에 텍스트가 포함된 경우 대체 텍스트에 포함되어야 합니다.

이미지 내의 모든 텍스트는 화면 판독기에서 읽을 수 없으므로 이미지의 의미 및 주변 콘텐츠의 컨텍스트와 관련이 있는 경우 대체 텍스트에 포함되어야 합니다.

위의 이미지를 보면 문맥과 의도에 따라 "더 질문하세요"라는 표시가 있는 대체 텍스트를 설명해야 할 수도 있습니다. 의도를 더 잘 이해하는 것이 눈에 띄는 경우 텍스트가 모두 대문자임을 설명해야 할 수도 있습니다.

그러나 표지판의 실제 텍스트가 중요하지 않은 벽에 표지판을 배치하는 방법에 대한 기사에서 이미지가 두 벽시계 사이의 중앙에 표지판을 표시한다고 설명해야 할 수도 있습니다.

위의 대체 텍스트 대 캡션 섹션에서 언급했듯이 이미지에 많은 텍스트가 포함된 경우 일반적으로 이 정보를 캡션에 포함하는 것이 좋습니다. 주변 텍스트 콘텐츠에 포함할 수도 있습니다. 이러한 경우 이미지에 대한 추가 정보가 텍스트의 캡션이나 본문에 포함되어 있다는 점을 대체 텍스트에 기록하는 것이 좋습니다.

대체 텍스트를 비교적 간략하게 유지하기 위한 지침 때문에 Snagit에서 생성할 수 있는 것과 같은 마크업 및 텍스트가 있는 이미지의 경우 캡션 또는 주변 텍스트를 사용하여 관련 마크업 및 텍스트를 설명하는 것이 좋습니다. 사용자에게 훨씬 쉽고 유용할 것입니다.

7. 접근성 검사기에 의존하지 마십시오

Microsoft Word 및 Adobe Acrobat과 같은 많은 콘텐츠 제작 도구에는 유용한 접근성 검사기가 함께 제공됩니다. 그들은 콘텐츠를 스캔하고 콘텐츠 작성자가 콘텐츠에 액세스할 수 없게 만들 수 있는 일반적인 실수를 찾습니다. 그것들은 훌륭하며 콘텐츠를 확인하는 데 확실히 사용해야 합니다.

그러나 문제가 있습니다. 접근성 검사기가 대체 텍스트가 있는지 확인할 수 있지만 해당 대체 텍스트의 품질을 결정할 수는 없습니다. 이러한 이유로 콘텐츠 검토자가 대체 텍스트 콘텐츠가 유용하고 올바른지 다시 확인하도록 하는 것이 좋습니다.

8. 링크가 있는 이미지는 대체 텍스트에 링크 대상을 포함해야 합니다.

액세스 가능한 콘텐츠의 또 다른 원칙은 모든 하이퍼링크가 사용자에게 해당 콘텐츠가 어디로 연결되는지 설명해야 한다는 것입니다. 이러한 이유로 "여기를 클릭하십시오" 또는 "방문하십시오"와 같은 링크는 일반적으로 금지되어 있습니다.

같은 방식으로 링크의 역할을 하는 이미지는 링크로 연결되는 위치를 사용자에게 설명해야 합니다. 예를 들어 페이지에 "무료 평가판 다운로드"라는 버튼이 있는 경우 대체 텍스트는 "링크: 무료 평가판 다운로드"와 같아야 합니다.

차트, 그래프 및 표의 대체 텍스트

차트, 그래프 및 표는 대체 텍스트와 관련하여 특히 까다로운 문제를 나타냅니다. 상대적으로 많은 양의 정보를 제공하는 경향이 있기 때문에 모든 대체 텍스트는 결국 매우 길고 따라가기 어려울 수 있습니다. 따라서 차트 또는 그래프 콘텐츠와 나머지 콘텐츠와의 관련성을 정확하게 설명하는 캡션을 사용하는 것이 좋습니다. 그런 다음 대체 텍스트는 차트의 제목을 설명할 수 있으며 내용에 대한 전체 설명은 캡션 또는 텍스트 내용에서 사용할 수 있습니다.

위의 차트(직장 커뮤니케이션에 대한 독창적인 연구에 대한 최근 기사에서)를 볼 수 없는 사람에게 어떻게 설명하시겠습니까? 대체 텍스트(또는 콘텐츠의 캡션 또는 본문)는 모든 관련 정보를 제공해야 해당 정보를 볼 수 있는 사람과 같은 방식으로 이해할 수 있습니다.

이 블로그 기사 에서 차트의 정보가 내가 말하려는 요점과 반드시 ​​관련이 있는 것은 아니기 때문에 직장에서 시각적 도구에 대한 밀레니얼 세대의 선호도에 대한 정보의 복잡한 차트로 간단히 설명할 수 있습니다. 이 기사가 연구에 관한 것이라면 실제 내용을 대체 텍스트로 설명하거나 더 적절하게 주변 내용의 본문에 설명해야 합니다.

이미지와 달리 대부분의 테이블은 화면 판독기에서 액세스할 수 있습니다. 사용자는 선택한 경우 관련 정보를 얻기 위해 테이블을 이동할 수 있습니다. 그러나 대체 텍스트는 사용자가 테이블에 액세스할지 여부를 결정할 수 있도록 테이블에 대한 간략한 설명과 테이블에 포함된 내용에 대한 개요를 제공할 수 있습니다.

대체 텍스트 및 SEO

대체 텍스트는 액세스 가능한 콘텐츠를 만드는 데 필수적입니다. 그러나 보너스가 제공됩니다. SEO에도 도움이 될 수 있습니다!

즉, 대체 텍스트를 만드는 최고의 목적은 디지털 콘텐츠의 접근성을 향상시키는 것입니다. 부적절한 키워드나 기타 관련 없는 정보로 대체 텍스트를 채워 시스템을 게임하려는 시도는 실제로 해로울 수 있습니다.

이미지 게시에 대한 Google의 이 기사에서 그들은 이미지 대체 텍스트를 사용하여 이미지의 주제를 이해하고 이미지가 나머지 콘텐츠와 어떤 관련이 있는지 설명합니다. 그들은 또한 "키워드를 적절하게 사용하고 페이지 콘텐츠의 맥락에서 유용하고 정보가 풍부한 콘텐츠를 만드는 것"에 중점을 둔 대체 텍스트를 만들 것을 제안합니다. Google은 부적절한 키워드로 채워진 대체 텍스트 또는 이미지 또는 페이지 콘텐츠의 나머지 부분과 관련이 없는 대체 텍스트로 인해 사이트가 스팸으로 간주될 위험이 있다는 점에 주목합니다.

마찬가지로, 가장 인기 있는 SEO용 WordPress 플러그인 중 하나를 제작한 Yoast는 가능하면 적절할 때 기사 키워드를 사용할 것을 권장하지만 키워드를 모든 대체 텍스트에 넣지 말라고 명시적으로 말합니다.

이것은 이미지와 SEO를 위한 대체 텍스트를 만들기 위한 기본에 대한 좋은 개요이지만, 주제가 아닌 마지막 단어는 확실히 아닙니다. 많은 조직에는 대체 텍스트 작성에 대한 자체 지침이 있지만 다른 조직은 대체 텍스트가 필요하다는 사실조차 깨닫지 못할 수도 있습니다!

디지털 콘텐츠에 포함된 이미지에 대한 대체 텍스트를 만들고 있습니까? 귀하의 제안, 아이디어 및 어려움을 듣고 싶습니다!

*참고: 다양한 보조 기술이 이미지와 대체 텍스트를 처리하는 방식의 차이로 인해 이 문서는 모든 보조 기술이 작동하는 방식에 대한 포괄적인 개요를 제공하지 않습니다. 대신 많은 사람들이 이미지의 대체 텍스트에 액세스할 수 있도록 하기 위한 일련의 지침 제안을 고려하십시오.