메인 콘텐츠로 건너뛰기
모든 콜렉션모범 사례
이미지에 대체 텍스트 추가: 모범 사례
이미지에 대체 텍스트 추가: 모범 사례
Emily van der Harten avatar
작성자: Emily van der Harten
1주 전에 업데이트함

이 기사는 기계 번역을 사용하여 영어에서 번역되었습니다.

화면 판독기와 같은 보조 기술은 시각 장애인이나 시력이 약한 사람들에게 이미지를 설명하기 위해 대체 텍스트라고도 하는 대체 텍스트를 사용합니다. 대체 텍스트는 또한 인터넷 대역폭이 낮아서 이미지가 제대로 로드되지 않을 때나 누군가가 인지 부하를 줄이기 위해 웹사이트에서 이미지를 숨길 때 이미지 대신 나타납니다.

Webex Events 사용하면 플랫폼 전체의 이미지에 대체 텍스트를 추가하여 모든 사람이 모든 이벤트 경험에 공평하게 참여할 수 있습니다. 이 문서에서는 이미지에 대체 텍스트를 추가하는 방법을 보여주고 효과적인 대체 텍스트를 작성하기 위한 팁과 리소스를 제공합니다.

이미지에 대체 텍스트를 추가하는 이유는 무엇입니까?

효과적인 대체 텍스트를 쓰는 것은 배울 만한 가치 있는 기술입니다. 하지만 연습하면 완벽해지고, 아무것도 하지 않는 것보다 시도하는 것이 훨씬 낫습니다. 모든 이미지에 대체 텍스트를 추가하거나, 적절한 경우 이미지를 장식으로 표시하는 것을 적극 권장합니다. 아무것도 하지 않으면 다양한 사용자가 콘텐츠에 액세스할 수 없게 됩니다. 마찬가지로 화면 판독기는 대신 이미지 파일 이름을 읽게 되어 실망스럽고 불쾌한 사용자 경험을 초래할 수 있습니다.

대체 텍스트 팁

Webex Events 플랫폼에 대체 텍스트를 추가하는 방법을 알아보기 전에, 이 섹션에서는 몇 가지 유형의 이미지를 살펴보고, 대체 텍스트 작성에 대한 팁을 설명하며, 자세한 내용을 알아보는 데 도움이 되는 WAI(Web Accessibility Initiative)의 리소스를 제공합니다.

이미지의 종류

다양한 종류의 대체 텍스트가 필요한 다양한 종류의 이미지가 있습니다. 다음은 플랫폼의 다양한 부분에 추가할 수 있는 일반적인 유형의 이미지입니다.

  • 정보적 이미지 - 페이지에서 전달되는 개념을 이해하는 데 도움이 되는 정보가 있는 이미지. 사람이 이미지를 볼 수 없다면 핵심 정보를 놓치게 됩니다. 이러한 이미지에는 대체 텍스트가 필요합니다.

  • 장식 이미지 - 배경 이미지처럼 페이지에 전달되는 내용에 추가 정보를 추가하지 않는 이미지. 이러한 이미지는 장식으로 표시될 수 있습니다.

  • 기능적 이미지 - 다른 목적지로 연결되는 이미지. 이러한 이미지에는 링크의 목적을 포함하는 대체 텍스트가 필요합니다. 예를 들어, 스폰서 기능에 내부적으로 연결되는 배너 이미지가 있는 경우, 사람들이 무엇을 기대해야 할지 알 수 있도록 대체 텍스트에 이 정보를 포함하세요.

  • 텍스트 이미지 - 정보성 텍스트가 포함된 이미지. 이와 같은 이미지에서 전달되는 메시지는 텍스트와 동등한 것이 있어야 하며, 일반적으로 alt 텍스트로 작성됩니다.

대체 텍스트 작성을 위한 팁

  • 대체 텍스트를 간략하게 유지하세요. 1-2문장을 넘지 않는 것이 좋으며 Webex Events 플랫폼은 대체 텍스트를 250자로 제한합니다.

  • 주변 환경과 맥락을 맞춰 이미지를 설명합니다. "사람들이 이 이미지에 대해 알아야 할 필수 정보는 무엇인가?"라고 자문해 보세요. 목표는 이미지가 전달하는 내용과 동일한 텍스트를 제공하는 것입니다.

  • 이미지에 텍스트가 포함된 경우 해당 메시지도 텍스트 형식으로 존재해야 합니다. alt 텍스트 필드나 인접한 설명에 있어야 합니다. 예를 들어, 세션에 대한 정보가 있는 배너 이미지가 있을 수 있습니다. 화면 판독기는 이미지에 포함된 텍스트를 읽을 수 없으므로 alt 텍스트는 텍스트 대체물을 추가하기에 좋은 곳입니다.

  • 대체 텍스트를 "Image of"로 시작하지 마세요. 스크린 리더는 종종 이미지를 알리므로 "Image of"라고 쓰는 것은 불필요합니다.

  • 이미지를 장식으로 표시하면 화면 판독기에서 이미지를 무시하고 넘어가라고 합니다. 다음과 같은 경우 이미지를 장식으로 표시합니다.

    • 이미지는 추가 정보나 맥락을 제공하지 않습니다.

    • 이미지는 인접한 텍스트에 설명되어 있으며, 그렇지 않으면 대체 텍스트를 추가하는 것은 중복됩니다. 예를 들어, 바로 아래 텍스트에 'Serena Page'라는 이름이 있는 프로필 이미지는 "Serena Page의 프로필 이미지"라고 하는 대체 텍스트가 필요하지 않으며 장식으로 표시될 수 있습니다.

대체 텍스트 리소스

WAI에는 명확하고 유용한 대체 텍스트를 작성하는 데 도움이 되는 많은 리소스가 있습니다.

Webex Events 에서 대체 텍스트를 어디에 추가할 수 있나요?

Webex Events 플랫폼에 업로드하는 거의 모든 이미지에 대체 텍스트를 추가하거나 이미지를 장식으로 표시할 수 있습니다. 이에 대한 예외는 프로필 이미지로, 자동으로 장식으로 표시됩니다. 😸

💡 플랫폼 내에서 직접 수동으로 업로드할 때만 이미지에 대체 텍스트를 추가할 수 있다는 점을 명심하세요. 현재 데이터를 가져올 때는 대체 텍스트를 추가할 수 없습니다.

Event App 에서 참석자는 벽 기능에 게시하는 이미지에 대체 텍스트를 추가할 수 있습니다.

Webex Events 플랫폼에 대체 텍스트를 추가하는 방법

  1. Webex Events 플랫폼에 이미지를 업로드할 때 '미리보기' 단계에서 대체 텍스트 추가 버튼을 클릭합니다.

    미리 보기 모달의 대체 텍스트 추가 버튼.
  2. '대체 텍스트 추가' 모달에서, 최대 250자까지 이미지에 대한 간략한 설명을 대체 텍스트 필드에 입력합니다. 이미지가 장식적이고 정보적 가치를 더하지 않는 경우, 대체 텍스트를 추가하지 않고 '이미지는 장식용입니다' 상자를 체크하기만 하면 됩니다.

    1. 다음 예에서 이미지에는 "주요 연설자 Janet Watson. UN Energy의 Sustainable Energy for All 의장"이라는 텍스트가 포함되어 있으므로 이 정확한 텍스트를 alt 텍스트 필드에 추가했습니다.

      방금 대체 텍스트 모달에 설명한 예입니다.
  3. 저장을 클릭하세요.

  4. 업로드를 클릭하여 완료합니다.

💡 Webex Events 플랫폼에서 이미지의 대체 텍스트를 편집할 수 없다는 점을 명심하세요. 대체 텍스트를 변경해야 하는 경우 이미지를 다시 업로드하고 방금 설명한 대로 업로드 프로세스 중에 업데이트된 대체 텍스트를 추가해야 합니다.

참석자가 벽 게시물에 이미지 대체 텍스트를 추가하는 방법

월 게시물의 일부로 이미지를 업로드하는 참석자는 월 게시물을 작성하기 전에 대체 텍스트를 추가할 수 있습니다.

웹 앱 사용자는 '미리보기' 단계에서 대체 텍스트 추가 버튼을 클릭하고, 대체 텍스트를 추가하거나 이미지를 장식용으로 표시한 후, 저장을 클릭한 다음 업로드를 클릭합니다.

웹 앱의 추가 alt 텍스트 모달. alt 텍스트는 다음과 같습니다.

모바일 앱 사용자는 이미지 오른쪽 상단에 있는 +Alt 버튼을 탭하고, 이미지에 대한 대체 텍스트를 입력한 후 완료를 탭한 다음 게시를 탭합니다 .

방금 설명한 과정입니다.

이제 대체 텍스트에 대해 알았죠! 협업 양식 으로 시간을 절약하는 방법에 대해 자세히 알아보는 건 어떨까요?

질문이 있으신가요? 채팅이나 이메일 support@socio.events 로 문의하세요.

답변이 도움되었나요?