대체 텍스트 및 설명 텍스트 사용하기
학습 목표
이 유닛을 완료하면 다음을 수행할 수 있습니다.
- 설명 텍스트의 사용 시기를 이해할 수 있습니다.
- 대체(Alt) 텍스트를 설명 텍스트와 결합하여 사용하는 방법을 요약할 수 있습니다.
몇 가지 유형의 이미지를 검토한 다음 이에 대한 대체 및 설명 텍스트를 작성해 보겠습니다. 추천 텍스트가 가장 좋은 옵션이라고 생각되는 텍스트가 아니라고 걱정하지 마세요. 효과적인 대체 및 설명 텍스트를 만드는 방법을 배우는 데 시간이 걸리며 정답은 없습니다. 스크린 리더 사용자에게 가장 적합하다고 생각하는 단어로 이미지의 의미를 명확하고 간결하게 요약하는 데 중점을 두세요.
예 1: 장식 이미지: 바닥글
장식 이미지에는 콘텐츠에 더해지는 의미가 없기 때문에 대체 텍스트를 빈 문자열(대체 텍스트="")로 설정하고 설명 텍스트를 포함하지 않습니다.
예 2: 정보가 있는 이미지: 아이콘
아이콘은 콘텐츠에서 상당히 흔하게 사용되며 거의 항상 정보를 전달합니다.
콘텐츠에서 아이콘을 설명할 경우 아이콘과 해당 기능을 설명하는 설명 텍스트를 포함하고 중복을 방지하기 위해 빈 대체 속성을 포함하세요. 설명 텍스트 없이 대체 텍스트를 제공하는 경우 스크린 리더 사용자는 다른 사용자보다 더 나은 경험을 할 수 있습니다. 설명 텍스트를 추가할 수 없는 경우 아이콘이 명확하고 이해하기 쉽고, 간편하게 볼 수 있도록 크게 만들어야 하며, 아이콘 이름과 기능을 제공하는 대체 텍스트를 제공해야 합니다.
다음 예는 바닥글의 선택 가능한 소셜 미디어 아이콘과 같이 페이지의 활성 요소가 아닌 페이지 콘텐츠의 일부인 검색 아이콘과 관련이 있습니다. 다음은 다양한 수준의 의미를 제공하는 몇 가지 설명 및 대체 텍스트 변형입니다.
검색 아이콘에 대한 대체 텍스트 변형
| 설명 텍스트 | 대체 텍스트 | 사용자 경험 |
|---|---|---|
|
|
대체 텍스트="검색" |
부정적임: 스크린 리더를 사용하지 않는 사용자에게 최소한의 의미 전달 |
|
|
대체 텍스트="" |
부정적임: 화면 판독기 사용자에게 충분한 정보를 제공하지 않음 |
|
돋보기 검색 아이콘 |
대체 텍스트="검색 아이콘" |
부정적임: 중복됨 |
|
돋보기 검색 아이콘 |
대체 텍스트="" |
긍정적 |
|
|
대체 텍스트="돋보기" |
긍정적 |
를 선택합니다.
아이콘을 선택합니다.
을 선택합니다.예 3: 정보를 전달하는 이미지: 복잡한 이미지
Salesforce Customer 360 제품 시계의 이 이미지는 매우 상세합니다. 해당 이미지의 의미를 권장되는 대체 텍스트 제한인 125자로 적절히 요약할 수 없을 가능성이 높습니다. 따라서 스크린 리더 사용자에게 충분한 정보를 제공하기 위해서는 설명 텍스트와 대체 텍스트가 모두 필요합니다.
다음은 이 이미지에 대한 대체 텍스트의 몇 가지 예입니다.
Salesforce Customer 360 플랫폼 이미지용 대체 텍스트 변형
| 설명 텍스트 | 대체 텍스트 | 사용자 경험 |
|---|---|---|
|
해당 없음 |
대체 텍스트="Salesforce Customer 360 플랫폼" |
부정적 |
|
해당 없음 |
대체 텍스트="고객을 중심으로 한 Salesforce 제품 목록" |
부정적 |
|
Salesforce 360에는 영업, 서비스, 마케팅, 커머스, 앱, 분석, 통합, 직원 경험, Trailblazer 및 기술 재교육, 산업, 파트너, AI 및 고객과의 성공 등이 포함됩니다. |
대체 텍스트="Salesforce Customer 360 플랫폼" |
긍정적 |
|
Salesforce 360 플랫폼은 중앙 집중식 인공 지능과 단일 플랫폼에서 지원되는 전체 Salesforce 제품군을 나타내며 고객이 중앙에 자리 잡고 있습니다. Salesforce 제품을 연결함으로써, 기업은 영업, 서비스, 마케팅, 커머스, 앱, 분석, 앱, 데이터 및 기기 통합, 직원 경험, 교육 및 기술 재교육 전반에 걸쳐 각 고객에 대한 단일하고 통합된 보기를 만들 수 있습니다. Salesforce 제품의 장점은 산업 및 파트너 전반에 걸쳐 작용합니다. |
대체 텍스트="Einstein AI 및 고객을 외부에서 둘러싼 Salesforce 제품 로고, 산업 및 파트너를 포함한 원." |
가장 긍정적 |
예 4: 정보를 전달하는 이미지: 강조 표시된 영역이 있는 사용자 인터페이스 스크린샷
이제 예제 스크린샷을 보고 대체 및 설명 텍스트에 포함할 정보를 알아보겠습니다. 이미지를 둘러싼 정보의 컨텍스트와 관련된 세부 사항에 집중해야 합니다.
특징, 기능 또는 작업에 대한 정보를 설명 텍스트에 포함하세요. 그런 다음 대체 텍스트를 사용하여 특별히 작업과 관련되지는 않지만 스크린 리더 사용자가 필요로 하는 그래픽에 대한 다른 중요한 세부 사항을 설명합니다.
Studio에서 Private Cloud Edition 구성하기 도움말 문서에서 가져온 이 예의 경우, 7단계의 스크린샷에는 설명 텍스트로 설명해야 하는 설명선이 포함되어 있습니다. 번호가 지정된 호출이 있는 경우 설명 텍스트에는 해당 번호로 모든 호출을 설명하는 목록이 포함됩니다.
다음 단계를 수행하여 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 문서 스크린샷에 대한 대체 텍스트 변형
| 대체 텍스트 | 사용자 경험 |
|---|---|
|
대체 텍스트="Anypoint Studio UI" |
부정적임: 충분한 정보를 제공하지 않음 |
|
대체 텍스트="Studio 환경설정 페이지" |
부정적임: 충분한 정보를 제공하지 않음 |
|
대체 텍스트="Private Cloud Instance URL 필드는 https://anypoint.mulesoft.com/을 포함합니다." |
긍정적: 정보를 전달함 |
예 5: 정보를 전달하는 이미지: 텍스트가 있는 이미지
가능한 경우 텍스트가 있는 이미지는 지양합니다. 이미지 텍스트는 검색 엔진이나 보조 기술에서 읽을 수 없으며 확대할 경우 흐릿해질 수 있습니다. 시각적 효과 이상의 효과를 위해 텍스트가 있는 이미지를 포함해야 하는 경우 이미지 설명에 대한 모든 텍스트를 대체 텍스트 또는 설명 텍스트로 작성해야 합니다.
이미지에 텍스트만 포함된 경우 텍스트만 단독으로 대체 텍스트로 사용할 수 있습니다.
이미지의 텍스트가 설명 텍스트에 포함된 경우 대체 텍스트로 반복하지 마세요. 이 경우 대체 텍스트를 사용하여 이미지가 전달하는 의미 중에 주변 텍스트에서 설명되지 않은 의미를 작성합니다. 이미지에 추가적인 의미가 없는 경우 빈 대체 텍스트 값을 지정합니다.
다음 이미지는 하나 이상의 텍스트 스타일을 포함하고 있으므로 유용한 예시입니다. 이 경우 이미지의 전체 의미를 전달하기 위해 대체 텍스트 외에 설명 텍스트가 필요합니다.
텍스트가 있는 Salesforce Marketing 이미지에 대한 대체 텍스트 변형
| 설명 텍스트 | 대체 텍스트 | 사용자 경험 |
|---|---|---|
|
해당 없음 |
대체 텍스트="Salesforce 마스코트 Astro와 손을 잡고 있는 사람 2명." |
불량: 대체 텍스트는 이미지의 목적을 전달하지 않으며, 이는 Salesforce가 고객과 회사를 연결한다는 것을 보여주기 위한 것입니다. |
|
Salesforce는 사람들을 연결합니다. |
대체 텍스트="함께 서 있는 사업가, Salesforce 마스코트 Astro, 캐주얼한 옷차림의 여성." |
부정적임: 설명 텍스트나 대체 텍스트로 이미지의 텍스트를 정확하게 전달할 수 없습니다. |
|
Salesforce는 기업과 고객을 하나로 통합합니다. |
대체 텍스트="Salesforce가 비즈니스와 고객을 하나로 연결한다는 것을 나타내는 손을 잡고 함께 서 있는 사업가, Salesforce 마스코트 Astro, 고객." |
부정적임: 대체 텍스트가 복잡하고 중복됩니다. 또한 권장 길이를 초과합니다. |
|
Salesforce는 기업과 고객을 하나로 통합합니다. |
대체 텍스트="사업가와 고객 사이에 서서 각각의 손을 잡고 있는 Salesforce 마스코트 Astro." |
긍정적: 설명 텍스트와 대체 텍스트는 모두 유용하며 문맥상 이미지의 전체 의미를 전달합니다. |
예 6: 정보를 전달하는 이미지: 이미지 링크
이미지만 링크 내에 있는 경우 대체 텍스트를 사용하여 이미지의 시각적 내용이 아닌 링크가 안내하는 목적지를 제공합니다. 스크린 리더 사용자는 링크가 안내하는 목적지를 듣게 됩니다.
이미지 링크에는 설명 텍스트를 넣을 수 있으며, 반드시 넣을 필요는 없습니다.
예를 들어 Salesforce 로고는 Salesforce 제품 개요 페이지(https://www.salesforce.com/form/demo/salesforce-products/) 링크로 사용될 수 있습니다.
링크를 활성화하도록 선택할 수 있는 링크 텍스트가 없는 경우 링크가 안내하는 목적지를 제공하는 대체 텍스트를 포함해야 합니다. 링크 텍스트나 대체 텍스트가 없으면 스크린 리더가 '링크'라는 단어나 링크가 안내하는 목적지의 실제 URL을 말하기 때문에 사용자가 링크 목적지의 내용을 이해하는 데 도움이 되지 않습니다.
이 이미지 링크의 대체 텍스트는 대체 텍스트="Salesforce 제품 개요 페이지"와 같이 설정됩니다.
링크가 안내하는 목적지를 적절하게 설명하는 링크 텍스트가 제공되고 이미지 자체가 의미 있는 추가 정보를 전달하지 않는 경우, 중복 및 반복을 방지하기 위해 빈 대체 텍스트 값이 사용됩니다. 다음의 예를 확인해보세요.
대체 텍스트=""
또한 링크를 선택하면 새 브라우저 탭(target="_blank")을 열지 고려해 보세요. 이 경우 새 창에서 링크가 열릴 것임을 사용자에게 알려야 합니다. 이렇게 하려면 링크 라벨 텍스트 뒤에 새 창을 나타내는 아이콘을 사용하고 대체 텍스트="(새 창에서 열림)"를 지정합니다.
다음의 예를 확인해보세요.
Salesforce 제품 개요 페이지 
대체 텍스트="(새 창에서 열림)".
요약
잘하셨습니다. 다양한 이미지에 대한 설명 텍스트와 대체 텍스트를 만들었습니다! 여러분이 마주할 수 있는 모든 이미지 유형을 다루지는 않았지만 이 유닛에서 학습한 일반적인 원리를 통해 모든 유형의 이미지에 대한 효과적인 대체 및 설명 텍스트를 만들 수 있습니다.
리소스
- W3C: 페이지 구조 개념
- WebAIM: 대체 텍스트
- National Center for Accessible Media PDG: 디지털 토킹북의 과학 콘텐츠 설명에 대한 효과적인 방안
