대체 텍스트 및 설명 텍스트 사용하기

학습 목표

이 유닛을 완료하면 다음을 수행할 수 있습니다.

• 설명 텍스트의 사용 시기를 이해할 수 있습니다.
  
• 대체(Alt) 텍스트를 설명 텍스트와 결합하여 사용하는 방법을 요약할 수 있습니다.
  

주제 제목(H2)

몇 가지 유형의 이미지를 검토한 다음 이에 대한 대체 및 설명 텍스트를 작성해 보겠습니다. 추천 텍스트가 가장 좋은 옵션이라고 생각되는 텍스트가 아니라고 걱정하지 마세요. 효과적인 대체 및 설명 텍스트를 만드는 방법을 배우는 데 시간이 걸리며 정답은 없습니다. 스크린 리더 사용자에게 가장 적합하다고 생각하는 단어로 이미지의 의미를 명확하고 간결하게 요약하는 데 중점을 두세요.

예 1: 장식 이미지: 바닥글

장식 이미지에는 콘텐츠에 더해지는 의미가 없기 때문에 대체 텍스트를 빈 문자열(대체 텍스트="")로 설정하고 설명 텍스트를 포함하지 않습니다.

예 2: 정보가 있는 이미지: 아이콘

아이콘은 콘텐츠에서 상당히 흔하게 사용되며 거의 항상 정보를 전달합니다.

콘텐츠에서 아이콘을 설명할 경우 아이콘과 해당 기능을 설명하는 설명 텍스트를 포함하고 중복을 방지하기 위해 빈 대체 속성을 포함하세요. 설명 텍스트 없이 대체 텍스트를 제공하는 경우 스크린 리더 사용자는 다른 사용자보다 더 나은 경험을 할 수 있습니다. 설명 텍스트를 추가할 수 없는 경우 아이콘이 명확하고 이해하기 쉽고, 간편하게 볼 수 있도록 크게 만들어야 하며, 아이콘 이름과 기능을 제공하는 대체 텍스트를 제공해야 합니다.

다음 예는 바닥글의 선택 가능한 소셜 미디어 아이콘과 같이 페이지의 활성 요소가 아닌 페이지 콘텐츠의 일부인 검색 아이콘과 관련이 있습니다. 다음은 다양한 수준의 의미를 제공하는 몇 가지 설명 및 대체 텍스트 변형입니다.

검색 아이콘에 대한 대체 텍스트 변형

예 3: 정보를 전달하는 이미지: 복잡한 이미지

Agentforce, Salesforce 360, Data 360 및 Salesforce Platform의 연관성을 보여주는 이 이미지는 매우 상세합니다. 해당 이미지의 의미를 권장되는 대체 텍스트 제한인 125자로 적절히 요약할 수 없을 가능성이 높습니다. 따라서 스크린 리더 사용자에게 충분한 정보를 제공하기 위해서는 설명 텍스트와 대체 텍스트가 모두 필요합니다.

다음은 이 이미지에 대한 대체 텍스트의 몇 가지 예입니다.

Salesforce 플랫폼 이미지용 대체 텍스트 변형

예 4: 정보를 전달하는 이미지: 강조 표시된 영역이 있는 사용자 인터페이스 스크린샷

이제 예제 스크린샷을 보고 대체 및 설명 텍스트에 포함할 정보를 알아보겠습니다. 이미지를 둘러싼 정보의 컨텍스트와 관련된 세부 사항에 집중해야 합니다.

특징, 기능 또는 작업에 대한 정보를 설명 텍스트에 포함하세요. 그런 다음 대체 텍스트를 사용하여 특별히 작업과 관련되지는 않지만 스크린 리더 사용자가 필요로 하는 그래픽에 대한 다른 중요한 세부 사항을 설명합니다.

Studio 도움말 문서의 Private Cloud Edition 구성하기에서 캡쳐한 스크린샷인 이 예제에서는 설명 텍스트로 설명해야 하는 호출이 포함되어 있습니다. 번호가 지정된 호출이 있는 경우 설명 텍스트에는 해당 번호로 모든 호출을 설명하는 목록이 포함됩니다.

다음 단계를 수행하여 PCE(Private Cloud Edition) 배포의 Anypoint 플랫폼 구성 요소와 Studio 설치를 통합합니다.

• Anypoint Studio 디스플레이 시작 부분의 작업 표시줄에서 Anypoint Studio > Preferences(환경설정)를 선택합니다.
  
• Anypoint Studio > Anypoint Platform을 선택합니다.
  
• Use a Private Cloud Edition (PCE) Instance(PCE(Private Cloud Edition) 인스턴스 사용) 확인란을 선택합니다.
  
• Private Cloud Instance URL 필드에 PCE 설치 URL을 입력합니다.
  
  

이 경우 이미지를 진행하는 설명 텍스트에는 사용자가 작업을 완료하기 위한 모든 관련 정보가 포함되지만 스크린샷은 스크린 리더 사용자가 볼 수 없는 예제 URL도 제공합니다.

Anypoint Studio 문서 스크린샷에 대한 대체 텍스트 변형

예 5: 정보를 전달하는 이미지: 텍스트가 있는 이미지

가능한 경우 텍스트가 있는 이미지는 지양합니다. 이미지 텍스트는 검색 엔진이나 보조 기술에서 읽을 수 없으며 확대할 경우 흐릿해질 수 있습니다. 시각적 효과 이상의 효과를 위해 텍스트가 있는 이미지를 포함해야 하는 경우 이미지 설명에 대한 모든 텍스트를 대체 텍스트 또는 설명 텍스트로 작성해야 합니다.

이미지에 텍스트만 포함된 경우 텍스트만 단독으로 대체 텍스트로 사용할 수 있습니다.

이미지의 텍스트가 설명 텍스트에 포함된 경우 대체 텍스트로 반복하지 마세요. 이 경우 대체 텍스트를 사용하여 이미지가 전달하는 의미 중에 주변 텍스트에서 설명되지 않은 의미를 작성합니다. 이미지에 추가적인 의미가 없는 경우 빈 대체 텍스트 값을 지정합니다.

다음 이미지는 하나 이상의 텍스트 스타일을 포함하고 있으므로 유용한 예시입니다. 이 경우 이미지의 전체 의미를 전달하기 위해 대체 텍스트 외에 설명 텍스트가 필요합니다.

텍스트가 있는 Salesforce Marketing 이미지에 대한 대체 텍스트 변형

예 6: 정보를 전달하는 이미지: 이미지 링크

이미지만 링크 내에 있는 경우 대체 텍스트를 사용하여 이미지의 시각적 내용이 아닌 링크가 안내하는 목적지를 제공합니다. 스크린 리더 사용자는 링크가 안내하는 목적지를 듣게 됩니다.

이미지 링크에는 설명 텍스트를 넣을 수 있으며, 반드시 넣을 필요는 없습니다.

예를 들어 Salesforce 로고는 Salesforce 제품 개요 페이지(https://www.salesforce.com/form/demo/salesforce-products/) 링크로 사용될 수 있습니다.

링크를 활성화하도록 선택할 수 있는 링크 텍스트가 없는 경우 링크가 안내하는 목적지를 제공하는 대체 텍스트를 포함해야 합니다. 링크 텍스트나 대체 텍스트가 없으면 스크린 리더가 '링크'라는 단어나 링크가 안내하는 목적지의 실제 URL을 말하기 때문에 사용자가 링크 목적지의 내용을 이해하는 데 도움이 되지 않습니다.

이 이미지 링크의 대체 텍스트는 대체 텍스트="Salesforce 제품 개요 페이지"와 같이 설정됩니다.

링크가 안내하는 목적지를 적절하게 설명하는 링크 텍스트가 제공되고 이미지 자체가 의미 있는 추가 정보를 전달하지 않는 경우, 중복 및 반복을 방지하기 위해 빈 대체 텍스트 값이 사용됩니다. 예:

Salesforce 제품 개요 페이지

대체 텍스트=""

또한 링크를 선택하면 새 브라우저 탭(target="_blank")을 열지 고려해 보세요. 이 경우 새 창에서 링크가 열릴 것임을 사용자에게 알려야 합니다. 이렇게 하려면 링크 라벨 텍스트 뒤에 새 창을 나타내는 아이콘을 사용하고 대체 텍스트="(새 창에서 열림)"를 지정합니다.

예:

Salesforce 제품 개요 페이지 대체 텍스트="(새 창에서 열림)".

정리

잘하셨습니다. 다양한 이미지에 대한 설명 텍스트와 대체 텍스트를 만들었습니다! 여러분이 마주할 수 있는 모든 이미지 유형을 다루지는 않았지만 이 유닛에서 학습한 일반적인 원리를 통해 모든 유형의 이미지에 대한 효과적인 대체 및 설명 텍스트를 만들 수 있습니다. 

리소스

• W3C: 페이지 구조 튜토리얼
• WebAIM: 대체 텍스트
• National Center for Accessible Media PDG: 디지털 토킹북의 과학 콘텐츠 설명에 대한 효과적인 방안
• ARIA6: aria-label로 개체에 레이블 제공하기